谷歌蒙特塞拉特在铬没有渲染光字体重量

Question

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

字体重量和网络字体的问题是已知的,但遗憾的是仍然没有修复.

Chrome仍然存在Web字体及其权重方面的一些问题.

您可能在本地安装了字体,并且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/