Google字体@import + @ font-face? [英] Google Font @import + @font-face?

问题描述

我正在尝试在CSS中使用@import和@ font-face导入带有Google字体的字体.我曾经只将@ font-face与下载的字体一起使用，但是由于加载需要花费时间，因此我更喜欢使用Google Fonts方法.

I'm trying to import fonts with Google Fonts with @import and @font-face, in my CSS. I used to only use @font-face with downloaded fonts, but since it takes time to load, I preferred to use the Google Fonts method.

我不想将Roboto的粗体"版本用作网站中的粗体"字体，因此我使用@ font-face.但是，我不确定使用它的方式.这样使用@import和@ font-face是否正确?

I didn't wanted the "bold" version of Roboto as the "bold" font in my website, so I used @font-face. However, I'm not sure of the way to use it. Is this correct to use @import and @font-face like this?

@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");
}

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

I've the feeling I'm importing the fonts twice... but it doesn't even work! (The page displays the default browser font)

感谢您阅读并抽出时间来帮助我.

Thank you for reading and taking time to help me.

推荐答案

您可以在样式表中使用此类

you can use like this in your stylesheet

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

这篇关于Google字体@import + @ font-face?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！