我正在尝试在网页上使用Segoe UI Light,Segoe UI Semilight和Segoe UI。它在IE中呈现出色,但Chrome似乎无法区分Light和Semilight。
我正在使用此StackOverflow答案上建议的CSS,这是Microsoft建议的。
/*
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");
}
以下jsfiddle显示了Segoe UI的各种字体粗细,包括Light和Semilight:http : //jsfiddle.net/nHXDA/
这是结果。
铬合金:
IE:
有想法该怎么解决这个吗?
除了您的字体只能在Windows设备上正确显示,而在所有其他未安装该字体的字体上将其忽略之外,您还需要确保有合适的备用字体。
第二件事是您的字体定义错误,并且无法在浏览器中使用。虽然Internet Explorer可以直接使用正确的字体文件,但src: local("Segoe UI Semibold");
所有其他浏览器指定的字体文件都需要引用字体家族。src: local("Segoe UI");
。
在使用半粗体的情况下,您需要这样指定字体定义:
@font-face {
font-family: "Segoe UI";
font-weight: 300;
src: local("Segoe UI Semilight"), local("Segoe UI");
}
修复字体定义后,它应类似于以下屏幕截图所示。在这些屏幕截图中,您还将看到,如果使用全名而不是字体系列名称指定了字体系列,则该字体将回退到Times New Roman。发生这种情况是因为浏览器无法解析字体名称,该字体名称似乎是IE专有的。
不知道是否是因为我使用本地字体,并且是否修复了可用的Web字体,您需要进行其他调整以使字体看起来不错。Web字体可能有特殊的提示供Web使用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句