Google字体重量300无效

Question

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

我已在this中尝试this和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 fonts，搜索opensans字体，然后选择你想要的所有类型，然后下载zip。 下载zip文件后转到fontsquirrel，将此zip文件上传到font generater部分，然后您将获取字体解压缩并将它们添加到项目中的fonts文件夹中，然后您可以包含styleshit.css中给出的代码，来自https://www.fontsquirrel.com/tools/webfont-generator的zip文件，它看起来像这样。

@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：＆＃39; open_sansregular＆＃39 ;;我发现这是避免所有开销和浏览器兼容性的最佳解决方案，谢谢。

提示：我发现很多次，如果您使用cdn直接指向字体，那么它可能无法加载，某些浏览器也无法获得您键入的字体系列。因此，在项目中包含字体总是有帮助的。

Answer 2

尝试在正文中添加以下css：

<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="BorderThickness" Value="0" />
    </Style>
</ListBox.ItemContainerStyle>

Answer 3

这个例子对我很好。 300正在使用Open Sans Light而400正在使用普通的'Sans Sans＆＃39>。

要检查这一点，我右键点击标题，检查元素和Chrome开发工具的样式部分，点击计算，然后显示一个部分，显示它使用的字体以及它是否使用了#c;使用本地文件或网络文件。当我查看它时，它使用本地文件。

通过这种方式，您可以查看是否未加载Google字体或覆盖网络文件的本地文件。

很抱歉，这不是一种修复，而是一种可以更好地调试它的方法。

Answer 4

http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic'rel ='styleheet'type ='text / css'＆gt;

你可以使用

font：300 12px / 18px arial