Google 网络字体 "Open Sans" 如果也在 Windows 7+10 上本地安装，则不会以正确的粗细显示

Question

我正在使用 "Open Sans" 是这样的：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
google: {
  families: ['Open+Sans:400,400italic,600,600italic,700,700italic:latin']
}
});
</script>

一切正常，除了我的 2 台电脑（一台 "Windows 7"，另一台 "Windows 10"）和最新的 "Chrome Browser"，没有600 和 700 之间的宽度差异。使用最新的 "Edge" 和 "Firefox" 浏览器一切都很好。

我发现，在两台机器上 "Open Sans" 都是本地安装的。我自己在 "Windows 7" PC 上和 "Windows 10" PC 上已经预先安装了它。在两台电脑上卸载本地字体后一切正常。

这是某种 chrome 错误吗？ ~~在网上找不到任何相关信息。~~

此外，如果其他用户在他们的 "Windows 10" 个人电脑上 "Open Sans" 本地预装，那么我正在开发的网站将在 Chrome 浏览器上显示错误的权重"Open Sans" 字体。这可以以某种方式避免吗？

PS1。在我的 css

中没有使用任何 "src: local(..." 声明

PS2。不通过 @font-face 导入字体，而是使用 webfont.js 来处理所有

这里是 fiddle:
https://jsfiddle.net/x75h2624
正如您在 win10 / chrome Open Sans 600 + 700 上看到的那样（两者都只是正常而不是斜体）是完全一样的。在 win10 firefox、win10 edge、iOS chrome 等...一切正常！

PS3。刚找到这个
https://bugs.chromium.org/p/chromium/issues/detail?id=335050
也张贴在那里自 2014 年以来是否相关且未修复？

PS4。由于这个问题已经很老了，我提交了一份新的错误报告：
https://bugs.chromium.org/p/chromium/issues/detail?id=617419
并且还发现这个博客描述了同样的问题：http://timschreiber.com/2015/01/20/local-web-font-conflict-in-chrome/

Answer 1

我认为你应该按照 Google 字体网站说明使用字体，我还将包括 HTML、CSS 以及 的选项webfont.js

HTML

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

JS

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans:400,600,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();  
</script>

谢谢 T04435。

Answer 2

我在想，为了避免这个 Chrome 错误，必须能够使用自定义名称指定 "Open Sans" 字体系列，以便 Chrome 不弄糊涂了，所以仔细阅读 "Custom" 标题下的 WebFontLoader 规范 (https://github.com/typekit/webfontloader#custom) 我很幸运，这实际上是可能的！

我所做的是首先从 http://www.localfont.com/

下载所需的 字体 + CSS

将字体上传到我的服务器后，我将下载的 CSS 声明添加到我自己的 css 文件中。 注意： 删除所有 local('...') 声明并重命名 font-family 的所有实例： 'Open Sans';为了自定义，我选择了font-family：'CustomOpenSans';.

在此之后，我的 css 看起来像这样：

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 400;
  font-style: normal;
  src: url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.eot');
  src: url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.woff') format('woff'),
       url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 600;
  font-style: normal;
  src: url('../assets/fonts/Open-Sans-600/Open-Sans-600.eot');
  src: url('../assets/fonts/Open-Sans-600/Open-Sans-600.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-600/Open-Sans-600.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-600/Open-Sans-600.woff') format('woff'),
       url('../assets/fonts/Open-Sans-600/Open-Sans-600.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-600/Open-Sans-600.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 700;
  font-style: normal;
  src: url('../assets/fonts/Open-Sans-700/Open-Sans-700.eot');
  src: url('../assets/fonts/Open-Sans-700/Open-Sans-700.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-700/Open-Sans-700.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-700/Open-Sans-700.woff') format('woff'),
       url('../assets/fonts/Open-Sans-700/Open-Sans-700.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-700/Open-Sans-700.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 400;
  font-style: italic;
  src: url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.eot');
  src: url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.woff') format('woff'),
       url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 600;
  font-style: italic;
  src: url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.eot');
  src: url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.woff') format('woff'),
       url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 700;
  font-style: italic;
  src: url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.eot');
  src: url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.woff') format('woff'),
       url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.svg#OpenSans') format('svg');
}

和 webfont.js 代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
WebFontConfig = {
    custom: { families: [ 'CustomOpenSans' ] }
}; 
</script>

具有自定义系列命名的 custom 行成功了。

我还需要将 CSS 中的 font-family 值更改为 'CustomOpenSans'像这样：

body
{
    font-family: 'CustomOpenSans', sans-serif;
}

我希望 Chromium 的人能尽快解决这个问题...

Google 网络字体 "Open Sans" 如果也在 Windows 7+10 上本地安装，则不会以正确的粗细显示

Google web font "Open Sans" does not show up in the correct weight if also installed locally on Windows 7+10

fonts

google-chrome

chromium

webfonts

google-webfonts

HTML

CSS

JS