Chrome中忽略的字体粗细

f45qwnt8 于 12个月前发布在 Go

关注(0)|答案(9)|浏览(103)

我创建了一个fiddle，尝试使用字体重量为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（浅），字体粗细为：400（正常），但在Chrome（版本33.0.1750.117）中没有，所有内容看起来都是以font-weight：400呈现的。是我做错了什么，还是Chrome中有bug？是否有任何已知的解决方法？

更新：

Chrome肯定有问题，我在Chrome的两个不同窗口中打开了同一页面的两个示例。一个是渲染字体ok（300 weight对应于light变体），另一个则不是（300 weight与Normal变体相同）。有线索吗？我已经确保刷新了每个标签中的页面，所以它们实际上是同一个页面。

更新2：附截图：关于bug：

更新3此为非this的重复。在那个问题中，问题是“Arial Black”和“Arial”实际上是不同的字体。在我的情况下，开放Sans是唯一的字体和问题是Chrome拿起不正确的重量有些时候。从截图中可以看出，即使在两个示例之间，Chrome也与渲染的字体不一致。

google-chrome

来源：https://stackoverflow.com/questions/22001035/font-weight-ignored-in-chrome

9条答案

按热度按时间

xiozqbni1#

把它添加到你的CSS中：

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

赞(0）回复(0）举报 12个月前

gc0ot86w2#

这似乎是一个Chrome/Chromium的错误，是由于在系统上本地安装了字体造成的。其他浏览器似乎没有受到这个问题的困扰。
到目前为止，它似乎发生在Linux和Windows上（已确认）。
出于某种原因，它将只加载您的本地字体，并忽略任何font-weight规则，即使它们是!important。它甚至不会与自身一致：字体粗细可以在选项卡和页面重新加载之间随机改变。
最简单的解决方法是删除字体，但如果您需要它做其他事情，这可能是一个问题。
您也可以尝试将字体重命名为其他字体，以强制Chrome使用您的Web字体并遵守CSS字体规则。

赞(0）回复(0）举报 12个月前

gg58donl3#

我遇到了一个可变字体的问题。这是通过在字体-字体定义中定义字体-粗细范围来解决的。

@font-face {
  font-family: …;
  font-weight: 1 999;
  src: …;
}

赞(0）回复(0）举报 12个月前

ykejflvf4#

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

赞(0）回复(0）举报 12个月前

nwwlzxa75#

我把它们叠加在一起，它们在OSX Chrome上看起来很好。

font-weight: 400 !important;

下方

font-weight: 300 !important;

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

赞(0）回复(0）举报 12个月前

mcvgt66p6#

我的解决方案是下载并安装字体的所有权重类型在您的机器上，或者根本不安装它。这是一个奇怪的解决方案，但对我有效。

赞(0）回复(0）举报 12个月前

xv8emn3q7#

对我来说，解决方案是在head部分包含CSS，而不是在样式表中使用@import。

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

赞(0）回复(0）举报 12个月前

dojqjjoe8#

在HTML中使用它，而不是在CSS中使用它。最佳解决方案👍

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

Doc for ital & wght

赞(0）回复(0）举报 12个月前

igetnqfo9#

这对你们大多数人来说可能是显而易见的，但我遇到了这个问题，在我的情况下，我只是在同一个选择器中用font属性覆盖了它：

selector {
        font-weight: bold;
        ...
        font: inherit;
    }

将font-weight移动到font属性下面可以修复它。我想这是基本的css，但我不记得font属性会像那样覆盖font-weight属性。我想我的意思是使用font-family而不是font，这导致了这个问题。

赞(0）回复(0）举报 12个月前

我来回答

Chrome中忽略的字体粗细

9条答案

相关问题

热门标签

最新问答