谷歌字体的 300 字重无效

Question

谷歌字体的 300 字重无效

10

无法在Chrome或Chrome Canary中使用Google字体Open Sans的300权重。

我已经在this和this上尝试过，在codepen中也是如此，但都无济于事。在Edge中运行良好。

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之间没有显示差异。已添加屏幕截图。

添加了评论屏幕截图和codepen，因为它更清楚地显示了冷漠。

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

- Julian

定义“不工作”。在我的Chrome浏览器中，它在您的示例中似乎是有效的。 - Turnip

它在Mozilla和Chrome上都运行良好。 - vignesh

font-weight: 300; 在你的 CodePen 示例中有效。 - Akash

你的电脑上是否安装了Open Sans字体？也许这会产生干扰？编辑：相关信息 - https://dev59.com/HYzda4cB1Zd3GeqPqLqJ - Turnip

已经安装了，但是卸载不起作用。 - Julian

显示剩余15条评论

4个回答

1

尝试在 body 中添加以下 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;
   }

- Sanjeev Kumar

我看到第一段文字是浅色的，第二段文字比第一段略微加粗。 - Sanjeev Kumar

0

对我来说，这个示例看起来很好。300使用Open Sans Light，而400只是使用普通的“Open Sans”。

为了检查这一点，我右键单击标题，检查元素，在Chrome Dev工具的样式部分中点击计算，有一个部分显示它正在使用什么字体以及它是否使用本地文件或网络文件。当我查看它时，它正在使用本地文件。

通过这种方式，您可以看到是Google字体未加载还是本地文件覆盖了网络文件。

很抱歉这不是一个解决方案，但这可能是您更好地调试它的方法。

- Alex Howes

-1

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

你可以使用

字体：300 12px/18px arial

- Rakesh Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sudarshan Kalebere · Accepted Answer

我认为你应该从头开始，前往Google Fonts，搜索Opensans字体，然后选择你想要的所有类型，然后下载zip文件。一旦你下载了zip文件，请转到Fontsquirrel，在字体生成器部分上传此zip文件，然后您将获得字体并将其添加到项目中的字体文件夹中，然后您可以包含来自zip文件中的样式表.css中给出的代码，来自https://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;
}

...以及你从Google Fonts中选择的所有字体类型。在添加字体系列时，只需添加font-family：'open_sansregular'; 我发现这是避免所有开销和浏览器兼容性问题的最佳解决方案，谢谢。

提示：我发现很多时候，如果您直接使用cdn链接提供字体，则可能无法加载，某些浏览器也无法获取您输入的字体系列。因此，始终将字体包含在您的项目中会更有帮助。