使用自定义字体和CSS

Question

我想使用自定义字体。

但是当我尝试使用时，字体无法正常显示，而是使用了自定义的 Times New Roman 字体。

以下是我的样式表代码：

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

但是，当我查看网站时，自定义字体没有显示。
目录和一切都是正确的。请帮忙 :(

- ryan test

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>

- Drew Gaynor

Answer 2

我看到两个可能的问题：

@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>

- TheyCallMeRobot

Answer 3

你是在整个网站上使用它吗？

你应该在“font { }”的位置分配字体，无论是div、a、p、span、body等。

所以尝试一下 body { font-family: "ARBONNIE"; } 希望能有所帮助。

- dilloncarter

---

我想要将它仅分配给字体。 - ryan test

字体标签是一个已经过时的元素。将字体分配给您的body标签，类似于我上面所做的，它应该可以工作。如果您需要更多帮助，我将需要您网站的URL。 - dilloncarter

我不需要在整个网站上使用它！我只需要用于一件事。 - ryan test

如果您不想将其用于整个网站，则必须将其分配给特定的类/ID/元素。此外，如果需要跨浏览器支持，请不要忘记为不同的浏览器包括不同的文件格式。 - dilloncarter