Chrome 中忽略的字体粗细

Posted 2023-03-15

技术标签:

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

我创建了一个fiddle 尝试使用字体粗细为 300 的 Open Sans 字体：

<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 谢谢！我在本地删除它的第二个工作。 【参考方案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：