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

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 浏览器”，宽度没有区别600 和 700。使用最新的“Edge”和“Firefox”浏览器一切都很好。

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

这是某种 Chrome 错误吗？在网上找不到任何关于它的信息。

此外，如果其他用户在其“Windows 10”PC 上本地预安装了“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

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

我所做的是首先从 http://www.localfont.com/ 下载所需的 Fonts + 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 的人能尽快解决这个问题......