html - 我无法使用 @font-face 规则在 html 页面中嵌入字体

Question

我尝试使用@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

Answer 1

您需要将 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;
    }