使用带有 CSS 的自定义字体答案

【问题标题】：Using a custom font with CSS使用带有 CSS 的自定义字体
【发布时间】：2014-06-03 05:01:10
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： css fonts font-face

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我不想把它分配给字体
字体标签是一个折旧的元素。将字体分配给您的正文标签，类似于我上面所做的，它应该可以工作。如果您需要更多帮助，我需要您的网站网址
我不希望它用于整个该死的网站！我只想要一件事。
如果您不希望它用于整个网站，则必须将其分配给特定的类/id/元素。另外，如果您需要跨浏览器支持，请不要忘记为不同的浏览器添加不同的文件格式

【解决方案3】：

我发现两个潜在问题：

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

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

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

第二个可能的问题 - 尝试在没有“字体”一词作为选择器的情况下执行此操作。要么使用唯一的选择器，要么将其分配给 body 或 p 选择器

edit - 看到你想要这个用于一个区域。选择一个新的选择器，使用如下字体样式：

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

ArbFont {font:16pt "Arbonnie";}

然后更改您的 html 以使用新的选择器，例如：

<div id="ArbFont">This is in Arbonnie</div>

【讨论】：