Google字体重量300无效

Question

在Chrome或Chrome Canary中使用谷歌字体打开无法获得300重量.

我已经试过这和这在codepen,无济于事.边缘工作得很好.

HTML

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<div class="header-pic text-align-center">
  <h1>We make dream places <br> affordable for you.</h1>
</div>

CSS

body {
    font-family: 'Open Sans', sans-serif;
}
.header-pic h1{
    font-size: 80px;
    font-weight: 300;
}

有任何想法吗？

编辑:为了澄清,不工作意味着没有显示300和400之间的差异.添加了截图.

添加了评论截图和代码集,因为它显示了无差异的清晰度.

http://codepen.io/anon/pen/YWVLYE 这应该是它应该是这样的: 这就是它在我的chrome中的样子:

Answer 1

我认为你应该从头开始,转到google字体,搜索opensans字体,然后选择你想要的所有类型,然后下载zip.下载zip文件后,转到fontsquirrel,将此zip文件上传到font generater部分,然后您将获取字体解压缩并将它们添加到项目中的fonts文件夹中,然后您可以在styleshit.css中包含代码,在https的 zip文件中://www.fontsquirrel.com/tools/webfont-generator,它看起来像这样.

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold-webfont.eot');
    src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibold-webfont.woff') format('woff'),
         url('../fonts/opensans-semibold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

...等等从谷歌字体中选择的所有字体类型.添加字体系列时只需添加font-family:'open_sansregular'; 我发现这是避免所有开销和浏览器兼容性的最佳解决方案,谢谢.

提示:我发现很多次,如果你使用cdn直接链接到字体然后它可能无法加载也有些浏览器不会得到你键入的字体系列.因此,在项目中包含字体总是有帮助的.