Chrome浏览器中Google字体Montserrat无法呈现轻字重。

Question

在发帖之前，我搜索了不同的解决方案，但都没有成功。 谷歌浏览器完全没有正确呈现Montserrat字体家族的字重，我尝试了不同的解决方案，如在Win10中启用/禁用“清晰类型”选项，但它们都没有奏效。无论如何，我不想通过更改我的操作系统配置来解决此问题。 在Edge和Firefox中一切正常。

有什么想法是为什么会发生这种情况吗？

我将字体导入为：

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900'); /** font-family: 'Montserrat', sans-serif; **/

并将其用作：

p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 100; /** 300 didnt work either **/
}

- Tyra Pululi

Answer 1

字体粗细和网络字体的问题已知，但仍未解决。

Chrome 在使用网络字体及其粗细方面仍存在一些问题。

可能您已经在本地安装了该字体，而 Chrome 会首先加载它，而不是使用网络字体。一种可能的解决方法是从本地目录中删除该字体，但即使这样做，其他已在本地安装 Montserrat 的用户访问您的网站时可能也会遇到同样的问题。

更优的解决方法是下载该字体并将每个重量的字体作为不同的字体进行加载。在 CSS 中加载本地字体可以通过 @font-face 进行定义，如下所示：

@font-face {
  font-family: 'MontserratLight';
  font-weight: normal;
  src: url('montserrat_light.eot'); 
  src: url('montserrat_light.eot?#iefix') format('embedded-opentype'),
       url('montserrat_light.woff2') format('woff2'),
       url('montserrat_light.woff') format('woff'), 
       url('montserrat_light.ttf')  format('truetype'), 
}

@font-face {
  font-family: 'MontserratRegular';
  font-weight: normal;
  src: url('montserrat_regular.eot'); 
  src: url('montserrat_regular.eot?#iefix') format('embedded-opentype'),
       url('montserrat_regular.woff2') format('woff2'),
       url('montserrat_regular.woff') format('woff'), 
       url('montserrat_regular.ttf')  format('truetype'), 
}

然后你可以将它们用作不同的字体。

例子

p {
  font-family: 'MontserratLight', sans-serif;
  font-size: 16px;
}

您可以在这里阅读更多关于@font-face的信息：https://css-tricks.com/snippets/css/using-font-face/

- Vladimir Yordanov

---

非常好的答案，不仅解决了问题，还帮助理解了问题，非常感谢！ - Tyra Pululi

Answer 2

我想到了一种稍微简单的方法，您无需在本地托管字体。

首先，在新窗口中打开Google字体链接- 在这种情况下，它是：

https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900

现在将此内容粘贴到新的CSS文件中。 问题出现在以 src: 开头的行上，具体要求浏览器首先查找本地字体文件。 你需要删除 local 引用，只保留 url 引用 - 这将防止默认使用本地副本（对我来说有效）。

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: local('Montserrat Thin'), local('Montserrat-Thin'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRxC7mw9c.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

这将避免您下载和托管字体文件。

- Brad Vickers

Answer 3

我曾遇到过与Open Sans Google字体类似的问题。对我来说，解决方法是在我的CSS中添加以下内容：

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

- iDoes