我想在网页上使用自定义字体。为此,我已将此字体添加到我的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