2

我正在尝试获取自定义字体。

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

这是我在样式表中的代码：

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

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

4

3 回答 3

5

您的使用@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>
于 2012-06-28T23:23:06.143 回答
0

您是否将其用于整个网站？

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

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

于 2012-06-28T22:48:47.070 回答
0

我看到两个潜在的问题：

@font-face 仅在某些浏览器和某些字体类型中受支持

IE9 支持 @font-face 用于 .eot 字体 IE8 及更早版本不支持 @font-face Firefox、Opera、Chrome 和 Safari 支持 @font-face 用于 *.ttf 和 *.otf 字体

你在IE中测试这个吗？*.ttf 不起作用。

第二个可能的问题 - 尝试在不使用“字体”作为选择器的情况下执行此操作。使用唯一选择器或将其分配给 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>
于 2012-06-28T23:03:59.103 回答