我想使用自定义字体。
但是当我尝试使用时,字体无法正常显示,而是使用了自定义的 Times New Roman 字体。
以下是我的样式表代码:
@font-face {
font-family: "ARBONNIE";
src: url(Custom/ARBONNIE.ttf);
}
font {
font-family: "ARBONNIE";
}
但是,当我查看网站时,自定义字体没有显示。
目录和一切都是正确的。请帮忙 :(
@font-face
不兼容所有浏览器。一个有用的工具可以生成跨浏览器@font-face
代码,可以在这里找到:Font Squirrel @font-face
Generator。该生成器将为您提供所需的所有文件以及一个完整的示例,您可以使用它来在各种浏览器中进行测试。
最终,在您的页面上,您的CSS将如下所示:
@font-face {
font-family: 'BitstreamVeraSerifBold';
src: url('verasebd-webfont.eot');
src: url('verasebd-webfont.eot?#iefix') format('embedded-opentype'),
url('verasebd-webfont.woff') format('woff'),
url('verasebd-webfont.ttf') format('truetype'),
url('verasebd-webfont.svg#BitstreamVeraSerifBold') format('svg');
font-weight: normal;
font-style: normal;
}
.custom-font {
font-family: 'BitstreamVeraSerifBold';
}
BitstreamVeraSerifBold
,该字体文件与CSS文件在同一目录中。<span class="custom-font">Your text here</span>
我看到两个可能的问题:
@font-face 只支持某些浏览器和某些字体类型
IE9 支持 .eot 字体的 @font-face IE8 及更早版本不支持 @font-face Firefox、Opera、Chrome 和 Safari 支持 *.ttf 和 *.otf 字体的 @font-face
你是在 IE 中测试吗?*.ttf 不会起作用。
第二个可能的问题 - 尝试不使用 "font" 作为选择器。要么使用唯一的选择器,要么将其分配给 body 或 p 选择器
编辑 - 我看到你想要这个应用于一个区域。选择一个新的选择器,像这样使用字体样式:
@font-face {
font-family: "ARBONNIE";
src: url("Custom/ARBONNIE.ttf");}
ArbFont {font:16pt "Arbonnie";}
然后将您的HTML更改为使用新选择器,例如:
<div id="ArbFont">This is in Arbonnie</div>
body { font-family: "ARBONNIE"; }
希望能有所帮助。