Chrome 中忽略字体粗细

Question

我创建了一个 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 (light) 和 font-weight: 400 (normal) 渲染时的差异，但在 Chrome (Version 33.0.1750.117) 中没有差异 ），所有内容看起来都以 font-weight:400 渲染。是我做错了什么还是Chrome有bug？有任何已知的解决方法吗？

更新：

Chrome 肯定有问题我在 Chrome 的 2 个不同窗口中打开了同一页面的两个实例。一种是渲染字体正常（300 粗细对应于 light 变体），另一种则不然（300 粗细与 Normal 变体相同）。有什么线索吗？我已确保刷新每个选项卡中的页面，以便它们实际上是同一页面。

更新2： 附上错误截图：

更新3 这不是this的不是重复。在这个问题中，问题是“Arial Black”和“Arial”实际上是不同的字体。就我而言，Open Sans 是唯一的字体，问题是 Chrome 有时会选择不正确的粗细。从屏幕截图中可以看出，即使在两个实例之间，Chrome 的渲染字体也不一致。

Answer 1

将其添加到您的 CSS 中：

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

Answer 2

这似乎是 Chrome/Chromium 的错误，是由系统本地安装字体引起的。其他浏览器似乎没有遇到这个问题。

到目前为止，它似乎发生在 Linux 和 Windows 上（已确认）。

出于某种原因，它只会加载您的本地字体并忽略任何

font-weight

规则，即使它们是

!important

。它甚至不会与自身一致：字体粗细可以在选项卡和页面重新加载之间随机变化。

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

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

Answer 3

我在使用可变字体时遇到了这个问题。通过在字体定义中定义字体粗细范围来解决这个问题。

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

Answer 4

尝试将字体系列更改为

'Open Sans Light', sans-serif;

。我遇到了同样的问题，这对我有用。

Answer 5

我将它们叠加在一起，它们在 osx chrome 上看起来不错。

font-weight: 400 !important;

下面

font-weight: 300 !important;

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

意大利和重量文档

Answer 9

这对你们大多数人来说可能是显而易见的，但我遇到了这个问题，就我而言，结果证明我只是用同一选择器中的字体属性覆盖它：

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

将字体粗细移至字体属性下方修复了该问题。我想这是基本的CSS，但我不记得 font 属性会像这样覆盖 font-weight 属性。我想我的意思是使用 font-family 而不是 font，这导致了问题。