CSS中的Segoe UI Semilight无法在Chrome上运行

Question

我正在尝试在网页上使用Segoe UI Light,Segoe UI Semilight和Segoe UI.它在IE中呈现出色,但Chrome似乎并没有区分Light和Semilight.

正如Microsoft建议的那样,我正在使用此StackOverflow答案中建议的CSS .

/*
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:

有想法该怎么解决这个吗？

Answer 1

除了您的字体只能在Windows设备上正确显示,而在没有安装字体的所有其他字体上将被忽略时,您需要确保您具有匹配的后备.

第二件事是您的字体定义错误,并且不能跨浏览器工作.虽然Internet Explorer能够直接使用正确的字体文件,但src: local("Segoe UI Semibold");所有其他浏览器指定需要参考字体系列.src: local("Segoe UI");.

在semibold的情况下,您需要指定如下的字体定义:

@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight"), local("Segoe UI");
}

修复字体定义后,它应如下面的屏幕截图所示.在这些屏幕截图中,您还会看到,如果使用全名而不是字体系列名称指定font-family,则字体将回退到Times New Roman.发生这种情况是因为浏览器无法解析字体名称,这似乎是IE独有的.

不确定是否因为我使用本地字体,如果可用的网络字体已修复,您需要进行其他调整以查看字体.可能是Web字体具有特殊提示供Web使用的情况.