css - 为什么某些 Google 字体以斜体样式显示不正确

Question

我在使用某些 Google 字体时遇到了一个奇怪的问题。

例如，我使用的是 Muli 字体，在某些浏览器中，当 CSS 规则为:

p {
    font-style: normal;
}

我还打开了 Google Web Fonts website使用多个浏览器(我在 6 台不同的 PC 和 Mac 上测试了 16 种不同的浏览器)，只有其中两个我遇到了问题(一个在 Chrome 浏览器上，另一个在 Firefox 浏览器上)。

This screenshot显示 Firefox 中显示的字体和以斜体样式显示字体的浏览器的并排比较

为什么只有某些浏览器会将这些字体显示为斜体？在追踪这个问题时我应该寻找什么？

Answer 1

投机!如果您在 2 台不同的计算机上进行测试，使用相同的浏览器和浏览器版本，您的字体差异可能来自操作系统。使用 Googles API，当调用 Firefox 或 Chrome 时，使用 local 属性，调用该字体的操作系统版本(如果可用)。其中操作系统调用或提供的字体可以是斜体版本而不是普通字体。

我的建议是下载字体并自己手动导入，而不使用本地属性。

当您导入 Google 字体 API 时，会发生以下情况:

例如，来自 Firefox 的 Inconsolata 请求返回以下 CSS:

@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata'), url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}

另一方面，来自 Internet Explorer 的请求返回:

@font-face {
  font-family: 'Inconsolata';
  src: url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
} 

https://developers.google.com/webfonts/docs/technical_considerations