Html 在 Chrome 中忽略字体粗细
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22001035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font weight ignored in Chrome
提问by vseguip
I created a fiddletrying to use Open Sans font with font-weight 300:
我创建了一个小提琴，试图使用字体粗细为 300 的 Open Sans 字体：
HTML
HTML
<span class="demo">example</span>
CSS
CSS
.demo {
font-weight: 400 !important;
font-family: 'Open Sans' !important;
font-style: normal;
font-variant: normal;
}
I use Google fonts to define the CSS
我使用 Google 字体来定义CSS
I can see a difference in Firefox (Ubuntu 13.10) when rendering at font-weight: 300 (light) and at font-weight: 400 (normal) but none in Chrome (Version 33.0.1750.117 ), where everything looks like it's rendered at font-weight:400. Am I doing something wrong or is there a bug in Chrome? Is there any known workaround?
在以 font-weight: 300 (light) 和 font-weight: 400 (normal) 渲染时，我可以看到 Firefox (Ubuntu 13.10) 的差异，但在 Chrome（版本 33.0.1750.117 ）中没有，所有内容看起来都在字体粗细：400。我做错了什么还是Chrome中存在错误？是否有任何已知的解决方法？
Update:
更新：
There is definitely something wrong with chrome I have two instances of the same page open in 2 different windows in Chrome. One is rendering the font ok (300 weight corresponds to the light variant) and one is not (300 weight is the same as the Normal variant). Any clues? I've made sure to refresh the page in each tab so they are actually the same page.
chrome 肯定有问题我在 Chrome 的 2 个不同窗口中打开了同一页面的两个实例。一种是渲染字体正常（300 weight 对应于 light 变体），一种不是（300 weight 与 Normal 变体相同）。有什么线索吗？我确保刷新每个选项卡中的页面，因此它们实际上是同一页面。
Update 2:
Attached screenshot: of the bug: 
更新 2：附加截图：错误的：
Update 3This is not a duplicateof this. In that question the problem is that "Arial Black" and "Arial" are different fonts actually. In my case Open Sans is the only font and the problem is Chrome picking up the incorrect weight some times. As you can see from the screenshots, Chrome is not consistent with the font rendered even between two instances.
更新3这是不是重复的这个。在那个问题中，问题是“Arial Black”和“Arial”实际上是不同的字体。在我的情况下，Open Sans 是唯一的字体，问题是 Chrome 有时会选择不正确的重量。从屏幕截图中可以看出，即使在两个实例之间，Chrome 也与呈现的字体不一致。
回答by Fred K
Add this to your CSS:
将此添加到您的 CSS：
* {-webkit-font-smoothing: antialiased;}
回答by Léo Lam
This seems to be a Chrome/Chromium bug, caused by having the font installed locally on your system. Other browsers don't seem to suffer from this issue.
这似乎是一个 Chrome/Chromium 错误，由在您的系统本地安装字体引起。其他浏览器似乎没有遇到这个问题。
So far, it seems to occur on Linux and Windows (confirmed).
到目前为止，它似乎发生在 Linux 和 Windows 上（已确认）。
For some reason, it will just load your local font and ignore any of your font-weightrules, even if they're !important. It won't even be consistent with itself: the font weight can change randomly between tabs and page reloads.
出于某种原因，它只会加载您的本地字体并忽略您的任何font-weight规则，即使它们是!important. 它甚至不会与自身保持一致：字体粗细可以在选项卡和页面重新加载之间随机变化。
The simplest workaround is to remove the font, but that could be an issue if you need it for something else.
最简单的解决方法是删除字体，但如果您需要它用于其他用途，这可能是一个问题。
You might also try renaming the font to something else in order to force Chrome to use your web font and honour your CSS font rules.
您也可以尝试将字体重命名为其他名称，以强制 Chrome 使用您的网络字体并遵守您的 CSS 字体规则。
回答by Jamie Kudla
Try changing the font family to 'Open Sans Light', sans-serif;. I had the same problem and this worked for me.
尝试将字体系列更改为'Open Sans Light', sans-serif;. 我有同样的问题，这对我有用。
回答by jakealbaugh
i overlaid them on top of each other and they look good on osx chrome.
我将它们重叠在一起，它们在 osx chrome 上看起来不错。
font-weight: 400 !important;
beneath
下面
font-weight: 300 !important;
回答by harisrozak
My solution is download and install all the weight types of the font on your machine, or don't install it at all. That's odd solution, but works for me.
我的解决方案是在您的机器上下载并安装字体的所有粗细类型，或者根本不安装它。这是奇怪的解决方案，但对我有用。
回答by bas
For me the solution was to include the CSS in the head-section instead of using @import inside the stylesheet.
对我来说，解决方案是在 head-section 中包含 CSS，而不是在样式表中使用 @import。
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
