css - 在 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-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 文件位于同一目录中。

在您的 HTML 中:

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