在CSS中使用自定义字体

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

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

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

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

但是，当我查看网站时，不会显示自定义字体。

---

这是正确的目录和所有内容。请帮助：（

您是否将其用于整个网站

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

---

所以，试试body{font family:“ARBONNIE”}希望它能有所帮助。

我发现了两个潜在的问题：

@字体仅在特定浏览器和特定字体类型中受支持

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

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

第二个可能的问题-尝试在不使用“字体”作为选择器的情况下执行此操作。请使用唯一的选择器或将其分配给正文或p选择器

编辑-看到您希望在一个区域使用此选项。选择一个新的选择器，使用如下字体样式：

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

ArbFont {font:16pt "Arbonnie";}

@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';
}

然后更改html以使用新的选择器，如下所示：

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

这是在阿尔邦尼

您对

@font-face

的使用与所有浏览器不兼容。此处提供了一个用于生成跨浏览器

@font-face

代码的有用工具：。该生成器将为您提供所需的所有文件以及一个完整示例，您可以使用该示例在各种浏览器中进行测试

最终，在您的页面上，您的CSS将如下所示：

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

ArbFont {font:16pt "Arbonnie";}

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

此处显示您的文本

我不想将其分配给font字体标签是一个贬值的元素。将字体分配给你的body标签类似于我上面所做的，它应该可以工作。如果你需要更多帮助，我需要你的网站url，我不想整个网站都使用它！我只想做一件事。如果你不想整个网站都使用它，它就没有o指定给特定的类/id/元素。此外，如果需要跨浏览器支持，请不要忘记为不同的浏览器包含不同的文件格式