html - CSS 中的 Segoe UI Semilight 不适用于 Chrome

Question

我正在尝试在网页上使用 Segoe UI Light、Segoe UI Semilight 和 Segoe UI。它在 IE 中呈现得很好，但 Chrome 似乎没有区分 Light 和 Semilight。

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

这是结果。

Chrome:

IE:

关于如何解决这个问题有什么想法吗？

Answer 1

除了您的字体只会在 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 独有的。

不确定是不是因为我使用的是本地字体，如果可用的网络字体已经修复，您需要进行额外的调整以使字体看起来不错。可能是网络字体对网络使用有特殊提示。