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

我正在使用“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>

并且一切正常，除了我的两台电脑(一台装有“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/

最佳答案

我在想，为了避免这个 Chrome 错误，必须能够使用自定义名称指定“Open Sans”字体系列，以便 Chrome 不会混淆，因此请仔细阅读 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-chrome - 如果 Google 网络字体 "Open Sans"也在本地安装在 Windows 7+10 上，则不会以正确的粗细显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37577722/