html - 谷歌字体@import + @font-face？

Question

我正在尝试在我的 CSS 中使用带有@import 和@font-face 的 Google 字体导入字体。我以前只对下载的字体使用@font-face，但由于加载需要时间，我更喜欢使用 Google Fonts 方法。

我不希望 Roboto 的“粗体”版本作为我网站中的“粗体”字体，所以我使用了@font-face。但是，我不确定使用它的方式。像这样使用@import 和@font-face 是否正确？

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');

@font-face
{
    font-family: Roboto;
    src: url("https://fonts.googleapis.com/css?family=Roboto:400");
}

@font-face
{
    font-family: Roboto;
    font-weight: bold;
    src: url("https://fonts.googleapis.com/css?family=Roboto:500");
}

@font-face
{
    font-family: Roboto;
    font-style: italic;
    src: url("https://fonts.googleapis.com/css?family=Roboto:400i");
}

@font-face
{
    font-family: Roboto;
    font-weight: bold;
    font-style: italic;
    src: url("https://fonts.googleapis.com/css?family=Roboto:500i");
}

我感觉我导入了两次字体...但它甚至不起作用! (页面显示默认浏览器字体)

感谢您阅读并花时间帮助我。

Answer 1

你可以在你的样式表中这样使用

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
h2{
font-family:Roboto;
}