Question

在发布之前，我搜索过并且未成功测试了不同的解决方案。 Chrome没有为蒙特塞拉特家族提供所有正确的权重，我尝试了不同的解决方案，因为启用/禁用win 10中的clear type选项，但是没有工作。无论如何，我不想通过改变我的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 **/
}

Answer 1

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

Chrome仍然存在网络字体及其权重方面的一些问题。

您可能在本地安装了字体，并且Chrome首先加载它，而不是使用Web字体。一种可能的解决方法是从本地目录中删除字体，但即使有效，其他在本地安装蒙特塞拉特的人也可能在使用您的网站时遇到同样的问题。

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

Answer 2

我想出了一个稍微简单的方法，你不必在本地托管字体。

首先在新窗口中打开google fonts链接 - 在本例中为：

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

现在将其粘贴到新的CSS文件中。问题出在以 src：开头的行，其中特别要求浏览器首先在本地查找字体文件。您需要删除本地引用并保留 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;
}

这可以节省您下载和托管字体文件的费用。

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;
}

谷歌蒙特塞拉特在Chrome中没有渲染灯字体重量

3 个答案: