Question

我想在网页上使用自定义字体。为此，我已将此字体添加到我的SCSS文件

@font-face {
   font-family: 'Arcon-Regular';
   src: url(asset_path('Arcon-Regular.woff')) format("woff");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'bebas';
   src: url(asset_path('bebas.woff')) format("woff");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'lovelo_black-webfont';
   src: url(asset_path('lovelo_black-webfont.woff')) format("woff");
   font-weight: normal;
   font-style: normal;
}

这里是我为标题设置字体的地方

.frontend {
    h1 {
        font-family: 'bebas' !important;    
    }

    h2, h3, h4, h5, h6 {
        font-family: "lovelo_black-webfont",serif !important;
    }

    p, a, li, button, dl, dt, dd {
        font-family: 'Arcon-Regular' !important;
    }
}

这是一些测试标记

<html>
<body class="frontend">
<h1> This should be Bebas </h1>
<h2> This should be Lovelo </h2>
<p> This should be Arcon </p>
</body>
</html>

这三个都适用于Chrome，但Lovelo无法在IE上运行，我无法弄明白为什么。

编辑：从here获取字体并使用转换器将其转换为WOFF

WOFF Font在Chrome上工作但不在Internet Explorer上工作

0 个答案: