Google字体无法在Chrome中使用

Question

Google字体在IE和FF中运行良好但在Chrome中运行情况怎么样？ 有点搞笑它在自己的浏览器中不起作用

看图片（顶部的铬）

示例来自此页面http://www.europeanhairtransplant.se

我正在使用字体Magra。 我做错了吗？

HTML

<link href='http://fonts.googleapis.com/css?family=Magra' rel='stylesheet' type='text/css'>

CSS

h1, h2, h3, h4, h5, h6 {
    font-family: "Magra", Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
}

更新：

自从Chrome发布32版以后，它看起来更好但仍然不如FF或IE那么好

Answer 1

您可能没有为该字体加载正确的字体粗细。例如。你现在只加载默认（400）重量，如果你再做一些粗体，浏览器会伪造粗体效果，因为它找不到实际的粗体字体文件。

你选择的字体只有400和700个权重，所以你最好找一个权重更大的字体（Ubuntu怎么样？）。

许多浏览器无论如何都能正常渲染字体，但平台之间可能存在一些差异，因此更好地发挥其安全性。

Answer 2

差异（在Chrome 31上无法看到）显然是由字体重量问题引起的。如果未设置h1元素的字体粗细，则使用浏览器默认值bold（= 700）。由于您的代码仅在不指定权重的情况下调用Magra，因此仅加载normal（= 400）权重字体。然后，浏览器将以不同的方式处理此问题。他们可能会使用普通字体，或者他们可以通过算法加粗它（这通常会导致效果不佳）。

当您截取屏幕截图时，无法确定发生了什么。没有披露足够的代码。提到的URL至少包含一个声明，它将字体粗细设置为500，这是不合逻辑的（字体只有400和700权重）。我怀疑截图实际上是来自不同版本的页面。

无论如何，你只需要决定体重并持续使用它。假设您想要使用Magra，那么您只需normal和bold（请参阅有关字体的Google说明）。如果您想要正常的重量，只需将字体重量声明更改为

即可

font-weight: normal;

如果您想要粗体，请完全删除font-weight声明，或将其替换为

font-weight: bold;

和更改link元素，以便它要求正常和粗体字体（如果您只想要粗体字，请删除400,）：

<link href='http://fonts.googleapis.com/css?family=Magra:400,700' 
      rel='stylesheet'>