logo标签列表

Chrome忽略字体粗细设置

htmlcssgoogle-chromefontswebfonts
44

我创建了一个fiddle，尝试使用Open Sans字体和300的字重：

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：CSS

在Firefox（Ubuntu 13.10）上，当渲染font-weight: 300（轻）和font-weight: 400（正常）时，我可以看到区别，但在Chrome（版本33.0.1750.117）中没有看到区别，一切看起来都像是以font-weight：400渲染的。 我做错了什么还是Chrome有错误？ 有任何已知的解决方法吗？

更新：

Chrome肯定有问题。 在两个不同的窗口中，我打开了相同页面的两个实例。 在一个窗口中，字体渲染得很好（300重量对应于轻型变体），而在另一个窗口中则没有（300重量与Normal变体相同）。 有任何线索吗？ 我确保在每个选项卡中刷新页面，以便它们实际上是相同的页面。

更新2：附图：关于这个错误的截图：Chrome font rendering bug

更新3：这不是这个问题的重复。 那个问题是“Arial Black”和“Arial”实际上是不同的字体。 在我的情况下，Open Sans是唯一的字体，问题是Chrome有时选择了错误的字重。 如您从屏幕截图中所见，Chrome甚至在两个实例之间呈现的字体也不一致。

1
如果你将字体大小调整到7.5em，你会注意到字重有轻微的差别（我在使用Chrome浏览器）。如果你添加-webkit-font-smoothing: antialiased;，你会更清楚地看到这个差别。 - adaam
为什么不使用谷歌字体导入，而不是所有这些CSS调用呢？例如：@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700,700italic,800); - ElliotSchmelliot
1
@adaam 我注意到在使用 7.5em 和 -webkit-font-smoothing: antialiased 时没有任何区别。 - vseguip
3
你的电脑中是否安装了Open Sans字体？我之前遇到过一些字体粗细的问题，但是当我把它从系统里删除后，一切都正常了。请问你有没有安装这个字体？ - Léo Lam
1
@LéoLam 谢谢！我删除本地文件后，第二次就成功了。 - MiKo
显示剩余3条评论
9个回答
40

将以下内容添加到您的 CSS 中：

* {-webkit-font-smoothing: antialiased;}
1
谢谢，它有效。有什么解释吗？ - Vojtech Ruzicka
1
我也可以使用。在这里了解有关字体平滑的更多信息：http://szafranek.net/works/articles/font-smoothing-explained/ - Jibran K
14

这似乎是Chrome/Chromium的一个bug，由于在您的系统上安装了该字体所致。其他浏览器似乎没有遇到此问题。

目前，它似乎会在Linux和Windows（已确认）上出现。

由于某种原因，它只会加载您的本地字体并忽略任何font-weight规则，即使它们是 !important。 它甚至不能保持一致性：字体重量可以在选项卡和页面重新加载之间随机更改。

最简单的解决方法是删除该字体，但如果您需要它用于其他用途，则可能会有问题。

您还可以尝试将字体重命名为其他名称，以强制Chrome使用您的Web字体并遵守CSS字体规则。

问题是“如果用户已经安装了字体怎么办”？而对于谷歌的Open Sans来说，“尝试将字体重命名为其他名称”并不是那么简单。 - Niccolò
你需要让Chromium修复这个问题。（我不知道最近是否已经修复了。）至于重命名字体，只需下载字体并在你的CSS中引用时更改字体名称即可。虽然这不像简单地添加一个<link>到Google的CSS那么容易，但也不是很复杂。 - Léo Lam
更改字体引用名称在Chrome 56.0.2924.87上不起作用。 - Dan
啊，没错。在其他浏览器和设备上渲染得非常完美，而且 font-weight 设置为 400，但它却渲染成了 700。谢谢！ - Daniel
我也遇到了这个问题。在Chrome中使其正常工作的解决方案是不使用@import，而是将css文件包含在<head>部分中。另请参见我的答案。 - bas
补充一下，在Mac OS上也存在这个错误。详细信息：Chrome版本89.0.4389.82（官方版本）（x86_64），macOS Catalina版本10.15.6（19G73）。 - Adam Chalcraft
8

我遇到了一个与变量字体有关的问题。通过在字体定义的 font-face 中定义字重范围，解决了这个问题。

@font-face {
  font-family: …;
  font-weight: 1 999;
  src: …;
}
1
哇，这个在其他地方都找不到。救了我，谢谢！ - switz
1
这是唯一为我解决问题的方案。 - nth-child
3
尝试将字体族更改为'Open Sans Light', sans-serif;。我也遇到了同样的问题，这个方法对我很有效。
这使得谷歌字体在任何浏览器上都无法正常工作：我认为“Open Sans Light”未被识别，所有浏览器都会回退到安装的sans-serif。 - Niccolò
1
在HTML中使用这个而不是在CSS中使用它。最好的解决方案。
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,700;1,400&display=swap" rel="stylesheet">

斜体和粗细的文档

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
1
如果您的网站需要符合GDPR的要求，我不建议这样做。 - Matthias Seifert
这绝对不是最佳解决方案，而且在欧盟或保护用户数据的国家中也无法使用。 - rank
1
我将它们重叠在一起，它们在OSX Chrome上看起来很好。
font-weight: 400 !important;

beneath

font-weight: 300 !important;

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

3
在Linux上，它们对我来说看起来仍然是一样的。 - vseguip
1
对我来说，在Win Chrome上也是这样。 - Niccolò
1
对我来说，解决方案是将CSS包含在头部部分，而不是在样式表中使用@import。
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
0

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

0
这对大多数人来说可能是显而易见的，但在我的情况下，我遇到了这个问题，结果发现我只是在同一个选择器中用字体属性覆盖了它。
    selector {
        font-weight: bold;
        ...
        font: inherit;
    }

将font-weight移到font属性下面修复了它。我猜那是基本的CSS，但我没记住font属性会像那样覆盖font-weight属性。我想我本来是想用font-family而不是font，这就导致了问题。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接