如何让“字体粗细：更轻”在 Google Chrome 中工作？

Posted 2023-03-06

【中文标题】如何让“字体粗细：更轻”在 Google Chrome 中工作？

【英文标题】：How Do I get 'font-weight: lighter' to work in Google Chrome?

【发布时间】：2011-02-11 22:39:02

【问题描述】：

Google Chrome（可能还有 Safari）中的“font-weight: normal”和“font-weight: bold”之间似乎没有任何区别。有没有人找到像 Firefox 那样在 Chrome 中调用“font-weight:thin”的方法？

【参考方案1】：

这似乎是 Chrome 中的 known issue，已在最新开发版本中修复：

有一个temporary workaround你也可以试试：

要在没有定义粗体字体的@font-face 字体上启用font-weight 属性，您需要显式定义font-weight:normal; 和font-style:normal; strong> 在@font-face 定义中。示例：

@font-face 
    font-family: 'GriffosFont Regular';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/GriffosFont.eot');
    src: local('GriffosFont Regular'), local('GriffosFont'), url('fonts/GriffosFont.woff') format('woff'), url('fonts/GriffosFont.\
ttf') format('truetype'), url('fonts/GriffosFont.svg#GriffosFont') format('svg');

【参考方案2】：

也许您需要将其添加到您的 CSS 中：

* -webkit-font-smoothing: antialiased;

【参考方案3】：

font-weight: lighter; 不适合我，所以我改用了font-weight: normal;，这符合我的目的。不知道 chrome 现在是怎么回事...

【讨论】：

请注意，font-weight: lighter 使字体«一步»更轻，因此继承粗体的元素将使用正常的字体粗细来呈现。如果您有特定的字体粗细，最好直接指定它。 font-weight: 200 将产生浅色字体。

我同意。对于它的价值，在这篇文章的时候，font-weight: lighter; 没有在 chrome 中工作。我可以挖掘我的提交以找到存在错误的确切版本的 chrome，我确信它现在已经修复（五年后）。