Google字体 - 如何使用特定字体系列如果它们具有相同的名称?

时间:2016-03-30 13:19:20

标签: css fonts google-font-api

我试图在我的html页面上使用Google字体。

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

我希望font-family的名称不同,而是相同的

/* 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中定义两种不同的字体? 谢谢

1 个答案:

答案 0 :(得分:2)

这是有效的,但您在CSS上的.前面缺少点(two)。请参阅以下代码段:

&#13;
&#13;
.one {
  font-family: 'Montserrat';
  font-size: 11px;
  font-weight: 700;
}
.two {
  font-family: 'Montserrat';
  font-size: 11px;
  font-weight: 400;
}
&#13;
<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>
&#13;
&#13;
&#13;