chrome 中的谷歌字体 Montserrat 没有渲染轻字体粗细答案

【问题标题】：Google font Montserrat in chrome no rendering light font-weightchrome 中的谷歌字体 Montserrat 没有渲染轻字体粗细
【发布时间】：2018-10-10 12:41:20
【问题描述】：

在发布之前，我搜索并测试了不同的解决方案，但均未成功。 Chrome 没有为 montserrat 系列渲染所有正确的权重，我尝试了不同的解决方案，如在 win 10 中启用/禁用清除类型选项，但没有一个有效。无论如何，我不想通过改变我的 s.o 来解决这个问题。配置。在 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 **/
}

【问题讨论】：

标签： css google-chrome fonts

【解决方案1】：

The problems with font-weight and web fonts are known but sadly still not fixed.

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

您可能在本地安装了字体，然后 chrome 会先加载它，而不是使用网络字体。一种可能的解决方法是从您的本地目录中删除该字体，但即使这样可行，在本地安装蒙特塞拉特的其他人在使用您的网站时可能会遇到同样的问题。

更理想的解决方法是下载字体并将每个权重加载为不同的字体。在 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/

【讨论】：

很好的答案，不仅解决了问题，还帮助理解了问题，谢谢谢谢谢谢

【解决方案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;
}

这应该可以让您不必下载和托管字体文件。

【讨论】：

【解决方案3】：

Open Sans Google 字体也有类似的问题。对我来说，解决方案是将以下内容添加到我的 css 中：

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

【讨论】：