Google字体300不工作
无法获得谷歌字体的300磅，打开sans在Chrome或Chrome金丝雀中工作。
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，它应该是这样的：
这是它在我的镀铬中的样子：
回答 4
Stack Overflow用户
发布于 2016-07-04 06:43:40
我认为您应该从头开始，goto 谷歌字体，搜索操作系统字体，然后选择您想要的所有类型，然后下载zip。下载zip文件后，转到松鼠，将这个zip文件上传到字体生成器部分，然后将它们解压缩到项目中的字体文件夹中，然后您可以将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;
}...and，所以你从谷歌字体中选择的所有字体类型。在添加字体家族时，只需添加字体系列：‘open_sansregular’；我发现这是避免所有开销和浏览器兼容性的最佳解决方案，谢谢。
提示：我发现很多次，如果您使用cdn提供字体的直接链接，那么它可能无法加载，一些浏览器也不会获得您键入的字体家族。因此，在您的项目中包括字体总是有帮助的。
Stack Overflow用户
发布于 2016-07-04 07:32:42
尝试在正文中添加以下css：
body{
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}Stack Overflow用户
发布于 2016-07-05 11:25:33
这个例子对我来说很好。300使用，400只使用普通的Open。
为了检查这一点，我右键点击了chrome工具的标题、检查元素和样式部分，点击了计算，其中有一个部分显示了它使用的字体，以及它是使用本地文件还是使用网络文件。当我查看它时，它使用的是本地文件。
通过这种方式，您可以看到是Google没有加载，还是一个本地文件覆盖了网络文件。
对不起，这不是修复，而是一种您可以更好地调试它的方法。
https://stackoverflow.com/questions/38145620
复制相似问题
腾讯云开发者
