使用CSS自定义字体

Question

我试图获得自定义字体.

当我尝试时,字体不起作用,它使用自定义Times new Roman.

这是样式表中的代码:

@font-face {
    font-family: "ARBONNIE";
    src: url(Custom/ARBONNIE.ttf);
}
font {
    font-family: "ARBONNIE";
}

但是,当我查看网站时,自定义字体不会显示.
这是正确的目录和一切.请帮忙 :(

Answer 1

您的使用@font-face与所有浏览器都不兼容.这里有一个生成跨浏览器@font-face代码的有用工具:Font Squirrel @font-faceGenerator.该生成器将为您提供所需的所有文件,以及可用于在各种浏览器中进行测试的完整示例.

最终在您的页面上,您的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文件位于同一目录中.

在你的HTML中:

<span class="custom-font">Your text here</span>