Question

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

我不想要＆＃34;大胆＆＃34; Roboto的版本为＆＃34;粗体＆＃34;在我的网站上的字体，所以我使用@ 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是有意义的。如果您从谷歌导入，请仅使用导入和写入权限属性到您想要的元素。

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

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

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

2 个答案: