Google webfont 未显示正确的字体粗细答案

【问题标题】：Google webfont not displaying correct font weightGoogle webfont 未显示正确的字体粗细
【发布时间】：2012-12-10 08:59:54
【问题描述】：

我经常在我的网站项目中使用 google webfonts，但我遇到了一个不知道如何解决的特殊问题。

在我的所有浏览器（OS X 10.8.2 上的 FF、Chrome 和 Safari）上，Open Sans 常规字体粗细 (400) 显示为半粗体。这是一个甚至发生在google's webfont library上的例子：http://i.imgur.com/sZtWW.png

为了确保这是我的问题，我在浏览器堆栈中加载了页面。在 browserstack 实例中，它显示了正确的字体粗细（Win 7 上的 Chrome 23）。

有人知道问题出在哪里吗？

【问题讨论】：

标签： webfonts google-webfonts

【解决方案1】：

您本地安装的 Open Sans 字体版本覆盖了页面 CSS 中指定的版本。

Google 从其网站复制和粘贴的默认规则将优先使用本地字体。

要确保 CSS 指定的字体优先，请使用此 CSS 指令：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

【讨论】：