Question

我试图在我的网站上使用谷歌字体。我以前用过这个：

 @import url(http://fonts.googleapis.com/css?family=Cantata+One);
 #MasterHeaderWrap .TopNav .rtsLevel1 .rtsLink .rtsTxt { font-family: 'Cantata One', serif !important; text-transform: uppercase !important;}

它可以改变字体。显示正确的字体。但是，当我尝试对此字体使用相同的格式时：

 @import url(https://fonts.googleapis.com/css?family=Exo);
 #MasterHeaderWrap .TopNav .rtsLevel1 .rtsLink .rtsTxt { font-family: 'Exo', sans-serif !important; text-transform: uppercase !important;}

显示不正常。我的意思是字体改变，但它绝对不是Exo。有人可以建议吗？

就像这里的免责声明一样，我无法访问HTML后端，我只能访问网站上的CSS编辑器，所以我所能做的就是插入这些css片段。

编辑：我明白了！我所要做的就是重新安排我的代码。感谢你们！你是我书中的所有魔术师！

Answer 1

试试这个：

@import url(https://fonts.googleapis.com/css?family=Exo);

#MasterHeaderWrap .TopNav .rtsLevel1 .rtsLink .rtsTxt {
    font-family: 'Exo Regular', sans-serif !important; text-transform: uppercase !important;
  /*------------------^^^^^^^ */
}

修改

好吧，我认为你的网站是通过HTTP设置的，所以google字体的请求需要是HTTP而不是HTTPS，所以这有效：

@import url(http://fonts.googleapis.com/css?family=Exo);
/* ------------^^*/
#MasterHeaderWrap .TopNav .rtsLevel1 .rtsLink .rtsTxt {
    font-family: 'Exo', sans-serif !important; text-transform: uppercase !important;
}

Answer 2

试试这个：

@import url('//fonts.googleapis.com/css?family=Exo');

Answer 3

看看下面的代码段，这应该可以正常工作：

@import url(https://fonts.googleapis.com/css?family=Exo);

 #MasterHeaderWrap, .TopNav, .rtsLevel1, .rtsLink, .rtsTxt {
   font-family: 'Exo', sans-serif;
   text-transform: uppercase;
}

body { padding: 20px; } /* Reset Styling */

<div id="MasterHeaderWrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam molestiae eos earum sint. Debitis libero quam, atque ducimus inventore ut, quo non quasi autem repellat commodi dolores. Dolor, nulla, commodi?</div>

希望这有帮助！

通过CSS导入谷歌字体

3 个答案:

修改