Google Font @import + @font-face？

Question

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

我不想让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;
}

Answer 2

当您从服务器上的文件加载字体时，@ font -face是有意义的。如果您从google导入，请仅使用导入和将权限属性写入您想要的元素。

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

h2 {
   font-family:Roboto;
   font-weight: 500;
}