Chrome中忽略字体粗细

时间:2014-02-24 23:02:28

标签: html css google-chrome fonts webfonts

我创建了一个fiddle尝试使用带有font-weight 300的Open Sans字体:

HTML

<span class="demo">example</span>

CSS

.demo {
  font-weight: 400 !important;
  font-family: 'Open Sans' !important;
  font-style: normal;
  font-variant: normal;
}

我使用Google字体来定义CSS

我可以看到Firefox(Ubuntu 13.10)在font-weight:300(轻量级)和font-weight:400(正常)渲染时的差异,但Chrome中没有(版本33.0.1750.117) ),其中所有内容看起来都是以font-weight:400呈现的。我做错了什么或Chrome中有错误吗?有没有已知的解决方法?

更新

Chrome肯定存在问题我在Chrome中的2个不同窗口中打开了同一页面的两个实例。一种是使字体呈现正常(300重量对应于光变体)而一种不是(300重量与正常变体相同)。有线索吗?我确保刷新每个标签页面,使它们实际上是同一页面。

更新2 : 附上截图:错误:Chrome font rendering bug

更新3 这是this不重复。在那个问题中,问题是“Arial Black”和“Arial”实际上是不同的字体。在我的情况下,Open Sans是唯一的字体,问题是Chrome有时会收到不正确的重量。从截图中可以看出,Chrome与两个实例之间呈现的字体不一致。

6 个答案:

答案 0 :(得分:18)

将此添加到您的CSS:

* {-webkit-font-smoothing: antialiased;}

答案 1 :(得分:11)

这似乎是Chrome / Chromium错误,因为您的系统上已安装了本地字体。其他浏览器似乎没有遇到这个问题。

到目前为止,它似乎发生在Linux和Windows上(已确认)。

出于某种原因,它只会加载您的本地字体并忽略您的任何font-weight规则,即使它们是!important。它甚至不会与自身一致:字体重量可以在标签和页面重新加载之间随机改变。

最简单的解决方法是删除字体,但如果您需要其他内容,则可能会出现问题。

您也可以尝试将字体重命名为其他内容,以强制Chrome使用您的网络字体并遵守您的CSS字体规则。

答案 2 :(得分:3)

尝试将字体系列更改为'Open Sans Light', sans-serif;。我有同样的问题,这对我有用。

答案 3 :(得分:1)

我将它们叠加在一起,它们在osx chrome上看起来很好。

font-weight: 400 !important;

下面

font-weight: 300 !important;

http://jsfiddle.net/gpmXe/22/

答案 4 :(得分:0)

我的解决方案是在您的计算机上下载并安装所有重量类型的字体,或者根本不安装它。这是奇怪的解决方案,但对我有用。

答案 5 :(得分:0)

对我来说,解决方案是将CSS放在头部,而不是在样式表中使用@import。

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,700;1,400&display=swap" rel="stylesheet">