Question

我正在使用＆＃34; Open Sans＆＃34;像这样：

<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台PC（一台用＃34; Windows 7＆＃34;另一台用＆＃34; Windows 10＆＃34;除外）最近的＃34 ; Chrome浏览器＆＃34;，600和700的宽度没有区别。最新的＆＃34; Edge＆＃34;和＃34; Firefox＆＃34;浏览器都很好。

我发现，在两台机器上都是这样，并且＃34; Open Sans＆＃34;在本地安装。在＆＃34; Windows 7＆＃34; PC和我自己以及Windows 10＆＃34; PC它已经预先安装好了。在两台PC上卸载本地字体后，一切正常。

这是某种铬虫吗？ ~~在网上找不到任何关于它的信息。~~

此外，如果其他用户使用他们的＆＃34; Windows 10＆＃34; PC＆＃34; Open Sans＆＃34;在本地预安装，然后我正在开发的网站将在Chrome浏览器上显示＆＃34; Open Sans＆＃34;字体。这可以以某种方式避免吗？

PS1。没有使用任何＆＃34; src：local（...＆＃34;我的css中的声明

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

这是一个小提琴：
https://jsfiddle.net/x75h2624
正如你在win10 / chrome上看到的那样，Open Sans 600 + 700（两者都只是正常的非斜体）完全相同。在win10 firefox，win10优势，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错误，必须能够指定＆＃34; Open Sans＆＃34;具有自定义名称的字体系列，以便Chrome不会混淆，因此请仔细阅读标题＆＃34; Custom＆＃34;下的WebFontLoader规范。（https://github.com/typekit/webfontloader#custom）我很幸运，这实际上是可能的！

我所做的是首先从http://www.localfont.com/下载所需的字体+ CSS

将字体上传到我的服务器后，我将下载的CSS声明添加到我自己的css文件中。 注意：删除所有本地（＆＃39; ...＆＃39;）声明并重命名 font-family：＆＃39;的所有实例打开Sans＆＃39 ;; 来自定义，我选择 font-family：＆＃39; CustomOpenSans＆＃39;; 。

在此之后我的案例中的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>

使用自定义系列命名的自定义行可以解决问题。

另外，我需要将CSS中的 font-family 值更改为＆＃39; CustomOpenSans＆＃39; ，如下所示：

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

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

Answer 2

我认为您应该根据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。

Google网络字体＆＃34; Open Sans＆＃34;如果在Windows 7 + 10上本地安装，则不会显示正确的重量

2 个答案:

HTML

CSS

JS