谷歌字体 - 如果它们具有相同的名称，如何指定字体系列？答案

【问题标题】：Google font - how to specific font-family If they have the same name?谷歌字体 - 如果它们具有相同的名称，如何指定字体系列？
【发布时间】：2016-03-30 21:33:54
【问题描述】：

我尝试在我的 html 页面中使用 Google 字体。

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

我希望字体系列的名称不同而不是相同

/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url (http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
unicode-range: ..
}

/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local('Montserrat-Bold'), url (http://fonts.gstatic.com/s/montserrat/v6/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
unicode-range: ..
}

我尝试这样做，但没有成功。

.one {
    font-family: 'Montserrat';
    font-size: 11px;
    font-weight: 700;
}
two {
    font-family: 'Montserrat';
    font-size: 11px;
    font-weight: 400;
}

如何在我的 css 中定义两种不同的字体？谢谢

【问题讨论】：

由于字体粗细不同，它应该可以完美运行。你可以制作一个 stacksn-p 或 jsfiddle.net 来显示这个问题吗？
可能是two 之前缺少的.？还是只是问题上的错字？

标签： css fonts google-font-api

【解决方案1】：

这是可行的，但您错过了 CSS 上 two 前面的点 (.)。看下面的sn-p：

.one {
  font-family: 'Montserrat';
  font-size: 11px;
  font-weight: 700;
}
.two {
  font-family: 'Montserrat';
  font-size: 11px;
  font-weight: 400;
}

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<span class="one">This is text on "one" with weight 700</span><br/>
<span class="two">This is text on "two" with weight 400</span>

【讨论】：