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

Question

我正在尝试在网页上使用 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/

这是结果。

铬：

IE：

关于如何解决这个问题的任何想法？

Answer 1

不同的浏览器有不同的渲染字体的方法。 Chrome 是最好的时候字体渲染效果不佳的最大罪魁祸首，我偶然发现了一些关于这个问题的文章（一些最近的文章。）

https://code.google.com/p/chromium/issues/detail?id=408587

如果您安装 Google Canary（Google Chrome 的每晚“测试版”版本）并在其中进行测试，您会得到什么结果？只是检查一下，因为它可能是特定于版本的错误。阅读几篇文章，似乎是最近对 Chrome 的更新，它将不再正确呈现 Segoe UI font-weight: 300/200。

另外，不要使用本地字体，任何不使用 Windows PC 的人都不会看到这种字体渲染，比如 Mac/Linux/Chrome/Firefox 操作系统。

有本地机器的免费替代品，您可以下载/用作网络字体（即使您打算仅使用本地网站），例如 Google's Open Sans.

Answer 2

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

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