Chrome 中忽略的字体粗细答案

【问题标题】：Font weight ignored in ChromeChrome 中忽略的字体粗细
【发布时间】：2014-03-26 21:34:46
【问题描述】：

我创建了一个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;
}

我使用谷歌字体来定义CSS

我可以看到 Firefox (Ubuntu 13.10) 在 font-weight: 300 (light) 和 font-weight: 400 (normal) 渲染时有所不同，但在 Chrome (版本 33.0.1750.117) 中没有 )，所有内容看起来都以 font-weight:400 呈现。我做错了什么还是Chrome中有错误？有什么已知的解决方法吗？

更新：

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

更新 2：附截图：bug的：

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

【问题讨论】：

如果您将字体大小增加到 7.5em，您会注意到字体粗细略有不同（我使用的是 Chrome）。如果您添加 -webkit-font-smoothing: antialiased;，您会发现更多差异。
不要使用所有这些 css 调用，为什么不直接使用 google 字体导入，即 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700,700italic,800);
@adaam 我注意到 7.5em 和使用 -webkit-font-smoothing: antialiased 没有区别。
您的系统上是否恰好安装了 Open Sans？在我从系统中删除它之前和之后，我遇到了一些字体粗细问题，一切正常。
@LéoLam 谢谢！我在本地删除它的第二个工作。

标签： html css google-chrome fonts webfonts

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

出于某种原因，它只会加载您的本地字体并忽略您的任何font-weight 规则，即使它们是!important。它甚至与自身不一致：字体粗细可以在选项卡和页面重新加载之间随机变化。

最简单的解决方法是删除字体，但如果您需要它来做其他事情，这可能是个问题。

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

【讨论】：

问题是“如果用户安装了字体怎么办”？对于 Google 的 Open Sans，“尝试将字体重命名为其他字体”并不是那么简单。
您必须获得 Chromium 才能解决此问题。（我不知道它最近是否已修复。）至于重命名字体，它就像下载字体并在 your CSS 中引用它时更改字体名称一样简单。这不像简单地在 Google 的 CSS 中添加 <link> 那样简单，但也没有那么复杂。
重命名字体引用在 Chrome 56.0.2924.87 上不起作用
啊，是的。而已。它在其他浏览器和设备上完美呈现，font-weight 设置为400，但它呈现为700。谢谢！
我也遇到过这个问题。它在 Chrome 中运行良好的解决方案是不使用 @import，而是在部分中包含文件 css。另请参阅我的回答。

【解决方案5】：

将此添加到您的 CSS：

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

【讨论】：

谢谢，它有效。有什么解释吗？
也适合我。在此处了解有关字体平滑的更多信息：szafranek.net/works/articles/font-smoothing-explained

【解决方案6】：

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

【讨论】：

这使得 Google 字体无法在我的任何浏览器上运行：“Open Sans Light”无法识别，我相信所有浏览器都会退回到已安装的无衬线字体。

【解决方案7】：

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

font-weight: 400 !important;

下面

font-weight: 300 !important;

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

【讨论】：

在 Linux 上对我来说仍然看起来一样。
Win Chrome 对我来说也是如此