为什么我的字体在 400 和 500 重量的 chrome 中看起来一样？答案

【问题标题】：Why does my font look the same for 400 and 500 weight in chrome?为什么我的字体在 400 和 500 重量的 chrome 中看起来一样？
【发布时间】：2016-05-13 22:09:15
【问题描述】：

我使用谷歌字体中的 Roboto，由于某种原因，chrome 将其渲染为 400 和 500 相同，这只是公牛。在 mozilla 上一切都很好而且花花公子，但实际上 chrome 是怎么回事？此外，斜体 400 比较小尺寸的 400 正常更薄。实际结果是什么？

包含字体的 Css：

@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic);

我还想提一下，我使用的是 bootstrap 3.5，所以我想重置是不可能的

【问题讨论】：

你能分享一下你在哪里包含了字体文件吗？
很可能没有导入 500 字体粗细对我来说很好：codepen.io/rikato/pen/qbMxGv
重复 - stackoverflow.com/questions/4698564/…
检查检查器样式和计算属性以确保其他东西没有覆盖您的字体粗细值。作为一个快速测试，使用font-weight: 500 !important;，看看是否能解决它。如果是这样，您需要理清 CSS 的特殊性。
puu.sh/mWB0E/813f1bee13.png 这是我在 chrome 上查看你给我的 codepen 时得到的。我想这意味着我必须重新安装字体或什么？在 Mozilla 上一切都很好，这很奇怪puu.sh/mWB5H/8fc32b45d8.png

标签： css google-chrome

【解决方案1】：

看起来字体被正确导入了，所以我不得不假设这是font-weight属性在其他地方被覆盖的问题，尤其是在您使用引导程序的情况下。

检查文本元素的检查器样式和计算属性，以确保其他内容不会覆盖您的字体粗细值。如果它被忽略，您将看到一条穿过您的字体粗细值的线。

作为快速测试，请使用font-weight: 500 !important;，看看是否可以解决问题。如果是这样，您需要理清 CSS 的特殊性。

【讨论】：