使用CSS自定义字体 [英] Using a custom font with CSS

问题描述

我试图得到一个自定义的字体。

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

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

  @ font-face {
 font-family：ARBONNIE; 
 src：url（Custom / ARBONNIE.ttf）; 
} 
字体{
 font-family：ARBONNIE; 
} 
  

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

）

解决方案使用 @ font-face 不兼容所有的浏览器，一个用于生成跨浏览器 @ font-face 代码的有用工具在这里：字体松鼠 @ font-face 生成器。该生成器将给你所需的所有文件，以及一个完整的例子，你可以用于在各种浏览器中进行测试。

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

<$ p
font-family {
font-family：'BitstreamVeraSerifBold';
src：url（'verasebd-webfont.eot'）;
src：url （'verasebd-webfont.eot？#iefix'）格式（'embedded-opentype'），
url（'verasebd-webfont.woff'）格式（'woff'），
url（'verasebd （'truetype'），
url（'verasebd-webfont.svg＃BitstreamVeraSerifBold'）format（'svg'）;
font-weight：normal;
font-style：normal;

}

.custom-font {
font-family：'BitstreamVeraSerifBold';



$ b $ p
$ b

请注意，我使用字体 BitstreamVeraSerifBold ，字体文件与CSS文件位于同一目录。

在您的HTML中：

 < span class =custom-font>您的文字在这里< / span> 
  

I am attempting to get a custom font.

When I try, the font doesn't work and it uses custom Times new Roman.

This is my code in the style sheet:

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

But, when I view the website, the custom font is not shown.
It's the correct directory and everything. Please help :(

解决方案

Your use of @font-face is not compatible with all browsers. A useful tool for generating cross-browser @font-face code is here: Font Squirrel @font-face Generator. That generator will give you all of the files you need as well as a complete example that you can use to test in various browsers.

Ultimately on your page, your CSS will look something like this:

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

Note that I'm using the font BitstreamVeraSerifBold here, with the font files in the same directory as the CSS file.

And in your HTML:

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

这篇关于使用CSS自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！