Google Web Fonts 字体粗细无法正确呈现答案

【问题标题】：Google Web Fonts font-weight not rendering correctlyGoogle Web Fonts 字体粗细无法正确呈现
【发布时间】：2014-03-23 04:57:35
【问题描述】：

我正在尝试在具有两种不同权重（300 和 800）的 html 页面中使用 Open Sans 网络字体。但是这些权重之间的差异很小（用 IE11、Chrome 测试）。您可以在下面看到我得到的图像和外观（来自 Google 字体网站）。

我的结果：

谷歌的结果：

我的html代码是：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>font test</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
    <link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    Font Family: Open Sans <br />
    font-weight 300: <span id="test">GGG</span><br />
    font-weight 800: <span id="test2">GGG</span><br />
</body>
</html>

和css：

#test
{
    font-family: 'Open Sans' !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 32px;
}

#test2
{
    font-family: 'Open Sans' !important;
    font-style: normal !important;
    font-weight: 800 !important;
    font-size: 32px;
}

【问题讨论】：

标签： html css google-webfonts

【解决方案1】：

我没有看到你的重量

<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,vietnamese' rel='stylesheet' type='text/css'>

替换为：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>

它会起作用的。

http://codepen.io/anon/pen/KGhbt/

【讨论】：