0

我尝试使用@font-face 规则向我的网页添加字体，但它没有显示

HTML

<!-- language: lang-html -->

    <ul>
    <li>GREAT</li>
    <li>BITE</li>
    </ul>

CSS

<!-- language: lang-css -->

body{
font-family:Armata;
font-size:16px;
    color:orange;
text-align: center;
background:white;
}

    @font-face {
    font-family: 'Armata';
    src: url(Armata-Regular.ttf),
    src: url(Armata-Regular.otf),
    src: url(Armata-Regular.eot);
    }

你可以从这里下载字体：http ://www.moldire.com

4

4 回答 4

2

您需要将 font-face 放在 CSS 的顶部。

   @font-face {
        font-family: 'Armata';
        src: url(Armata-Regular.ttf),
        src: url(Armata-Regular.otf),
        src: url(Armata-Regular.eot);
        }
    body{
    font-family:Armata;
    font-size:16px;
        color:orange;
    text-align: center;
    background:white;
    }
于 2013-08-20T13:04:14.900 回答
0

在您的网站上使用它

    <link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>

在 CSS 中你需要这个：

    font-family: 'Armata', sans-serif;
于 2014-12-09T11:43:16.483 回答
0 
@font-face {
    font-family: 'Armata';
    src: url(Armata-Regular.ttf),
    src: url(Armata-Regular.otf),
    src: url(Armata-Regular.eot);
    }

li
{
font-family:Armata;
}

或者如果你想将它用于整页然后将它应用到正文标签

于 2013-08-20T13:04:30.520 回答
0

这是我让字体工作的步骤：

  • css中的字体优先（已经提到过）
  • 具有字体的类型/格式 - EX： src: url(Armata-Regular.ttf) format('truetype')
  • 确保您的主机（本地或非本地）具有这些字体的 MIME 类型

最后，您会考虑使用网络字体路径吗？通过获取网络路径嵌入字体来节省时间：http ://www.google.com/fonts/specimen/Armata

这样做可以节省您跳过最后一个项目符号的时间。

于 2013-08-20T13:23:54.750 回答