2018 年更新
我过去曾遇到过这个问题，我不得不求助于提供更多字体文件格式的选项。 2018 年再次遇到它让我有点惊讶。但事实证明，我的问题不在于文件格式，而在于没有请求和指定正确的字体粗细。
如果我们不自定义从 Google 请求此字体的 URL，我们的链接标签将如下所示：
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
让我们看一下请求的 URL 中的内容。它将包含几个看起来像这样的字体规则：
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
注意font-weight 属性。它被指定为 400，这是一种“正常”加权字体。一些浏览器能够采用这种字体并将其变为粗体，但看起来仍然不错。这称为"faux bold"。不过，它永远不会像手工制作的粗体字体那么好。而在某些浏览器上，尤其是移动版 Safari，它会掉下来，看起来很糟糕。
补救方法是请求并指定您要使用的实际字体粗细变体。就我而言，它看起来像这样：
这将产生以下链接标签：
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin-ext" rel="stylesheet">
如果您查看该 URL 的内容，您会发现现在其中包含字体规则 font-weight: 700 的条目。
现在，如果我想为我的 h1 标签使用这种字体的粗体版本，我将使用以下 CSS。
h1 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
}
大多数浏览器会自动将 h1 设置为font-weight: bold。如果我想利用该默认设置，我必须提供自己的字体规则。我可以通过简单地复制 Google 提供的字体规则，将 font-face: 700 交换为 font-face: bold 并将这些更改的规则放入我自己的 css 中来做到这一点。
所以这条规则：
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
会变成这样：
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: bold;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
现在带有font-family: 'Source Sans Pro' 的h1 标签将使用正确的字体变体。
如果您想更深入地阅读，请查看此 2012 A List Apart article。