css - 谷歌字体蒙特塞拉特 Chrome

Question

发布之前，我搜索了不同的解决方案，但未成功测试。
Chrome不能完全显示montserrat系列的正确权重，我尝试过使用其他解决方案，例如在win 10中启用/禁用clear type选项，但它们都不起作用。无论如何，我都不想通过更改我的s.o解决此问题。组态。
一切都是正确的边缘和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字体。可能的解决方法是从本地目录中删除字体，但是即使可行，其他在本地安装了蒙特塞拉特的人也可能会在使用您的网站时遇到相同的问题。

更好的解决方法是下载字体并将每个粗细加载为其他字体。通过在@ font-face中定义它来完成在CSS中加载本地字体的操作，就像这样使用

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

您可以在此处 https://css-tricks.com/snippets/css/using-font-face/了解更多有关@ font-face的信息。