html - CSS中的Segoe UI Semilight在Chrome上不起作用

我正在尝试在网页上使用Segoe UI Light，Segoe UI Semilight和Segoe UI。它在IE中呈现出色，但Chrome似乎无法区分Light和Semilight。

我使用的是Microsoft建议的this StackOverflow answer上建议的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/

这是结果。

Chrome:

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使用。