Question

如标题所述。我有一些文本有CSS font-weight: bold;，它只在Firefox和Safari中工作（不确定IE，因为我有一个mac和避风港尚未测试）。在Chrome中，它似乎只是在各个字母之间添加了一些间距。字体为Open Sans，大小为13px。

HTML：

<ul class= "pull-right" id= "right-nav">
    <li><a href="index.html" class= "current-page">Home</a></li>
    <li><a href="club-info.html">Club Info</a></li>
    <li><a href="classes.html">Classes</a></li>
    <li><a href="finding-us.html">Finding Us</a></li>
    <li><a href="media.html">Media</a></li>
    <li><a href="about-bjj.html">About BJJ</a></li>
</ul>

CSS：

.current-page {
    font-weight: bold;
}

Answer 1

这是你的问题吗？

就Chrome而言，作为HTTPS的页面不应该调用作为HTTP的资源。事情是相反的，Chrome并不挑剔，所以它会很乐意通过作为HTTP的页面检索HTTPS资源。溶液

选项1 - 匹配协议

确保始终拨打Google Webfont网址的https版本。例如：

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700'
 rel='stylesheet' type='text/css'>

选项2 - 不指定协议

<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700'
 rel='stylesheet' type='text/css'>

Answer 2

您是否尝试过申请

.current-page {font-weight :bolder; }

而不是使用css

.current-page {font-weight :bold; }

我也遇到过这个问题，这就是我如何排序的。

或者你可以尝试

表示半粗体

font-weight:600;

用于额外的粗体（800）

font-weight:800;

Answer 3

尝试

font-family：'Open Sans'，sans-serif;

在font-weight之前

：粗体;

编辑添加...如果您使用的是Google API，那么您还必须引用CSS链接

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

否则粗体字体将无法下载

文本仅在Firefox和Safari中显示为粗体，而不是Chrome

3 个答案: