如果安装在用户的计算机中,我想在网站中使用“Segoe UI”字体.
为了使用font-weight属性来改变字体的厚度(这是一个很酷的功能！),我已经声明了所有的@ font-face样式.
问题是我不能用Segoe UI Bold(我觉得这个名字是错误的).任何想法？
这里是一个例子. (4)和(5)将相同：http://jsfiddle.net/kxHQR/1/
@font-face {
font-family: 'Myname';
font-style: normal;
font-weight: 700;
src: local('Segoe UI Bold'),local('SegoeUI-bold'),local('segoeuib');
}
@font-face {
font-family: 'Myname';
font-style: normal;
font-weight: 600;
src: local('Segoe UI Semibold'),local('SegoeUI-Semibold');
}
@font-face {
font-family: 'Myname';
font-style: normal;
font-weight: 400;
src: local('Segoe UI'),local('SegoeUI');
}
@font-face {
font-family: 'Myname';
font-style: normal;
font-weight: 300;
src: local('Segoe UI Light'),local('SegoeUI-Light');
}
/* ... */
BODY {
font-family: 'Myname';
}
.boldtext {
font-family:'Segoe UI';
font-weight:700;
}
<p style='font-weight:300'>1. Text with font-weight:300. OK</h1> <p>2. Here is normal text. OK</p> <p style='font-weight:600'>3. Text with font-weight:600. OK</p> <p style='font-weight:700' >4. Text with font-weight:700. It must be like (5),but it is like (3). :(</p> <p class='boldtext'>5. Text with font-family:'Segoe UI' (no font-face) and font-weight:700; </p>
解决方法
这是来自微软自己的
stylesheet for Windows 8 (Metro) apps：
/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI
Semilight to an appropriate font-weight.
*/
@font-face {
font-family: "Segoe UI";
font-weight: 200;
src: local("Segoe UI Light");
}
@font-face {
font-family: "Segoe UI";
font-weight: 300;
src: local("Segoe UI Semilight");
}
@font-face {
font-family: "Segoe UI";
font-weight: 400;
src: local("Segoe UI");
}
@font-face {
font-family: "Segoe UI";
font-weight: 600;
src: local("Segoe UI Semibold");
}
@font-face {
font-family: "Segoe UI";
font-weight: 700;
src: local("Segoe UI Bold");
}
@font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 400;
src: local("Segoe UI Italic");
}
@font-face {
font-family: "Segoe UI";
font-style: italic;
font-weight: 700;
src: local("Segoe UI Bold Italic");
}
上述方法适用于我,也是Open Sans和Google字体使用的方法.不过与this的做法完全相反,原来是保罗·爱尔兰：
@font-face {
font-family: 'ChunkFiveRegular;
src: url('whatever source');
font-weight: normal;
font-style: normal;
}
保罗·爱尔兰的方法允许(阅读：需要)在CSS中设置权重和斜体,但结果是“人造的”：由于浏览器没有家庭中的所有字体,因此必须计算重量和形状人物自己弥补. Paul的做法中的单一和有限的优势在于它可能会在所有浏览器中重置字体 – 但它取决于所使用的字体 – 因为所有浏览器都会以不同的方式呈现字体！
我更喜欢Microsoft的方法,因为它允许指定您需要的字体样式和字体权重,浏览器将显示正确的字体文件,而不是计算人造大小,粗体和斜体.但是,它需要您为您将要使用的系列中的每个字体变体提供一个字体文件.
最后,这一切都归结于你将要使用的字体和使用方式(不同的权重,斜体等).不管你采取什么方法,我建议我自己的经验(和Paul recommends)使用FontSquirrel’s font-face generator进行所有的网页排版工作. FontSquirrel可以显着减少字体大小,省略不必要的字符集,压缩字体等.
