CSS 外部字体在 Div 中无法运行

Question

最近我为我的网站下载了一种字体并重命名了它 "a.ttf"。然而，当我尝试将它嵌入到 div 的 CSS id 中时，它似乎不起作用。有人知道这里的问题吗？非常感谢，祝你有美好的一天！我也忘了提及我的外部 CSS 页面正在运行，因为我在其他 div 中工作类。我刚刚检查了元素，它现在显示无法解码下载的字体。这是什么意思。啊啊啊！ :-)

CSS代码

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

#text
{
color: white;
font-family: a;
font-size: 25px;
font-weight: bold;
text-align: left;
margin-left: 15px;
margin-top: 20px;
}

HTML Div

<div id="text">Test Div</div>

Answer 1

我想你试试这个...

Css

@font-face {
  font-family: 'a';
  src: url('a.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
#text{
 color: white;
 font-family: a;
 font-size: 25px;
 font-weight: bold;
 text-align: left;
 margin-left: 15px;
 margin-top: 20px;
}

希望对您有所帮助。

Answer 2

嘿，我认为您使用的代码有误。如果您转到 FontSquirrel 并下载字体工具包，这是添加自定义字体的推荐方法

@font-face{ 
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
     url('WebFont.woff') format('woff'),
     url('WebFont.ttf') format('truetype'),
     url('WebFont.svg#webfont') format('svg');

}

您需要一个以上的字体扩展名才能在所有浏览器中使用。还有你的字体在哪里？？...路径可能和你的不一样 css file

Answer 3

在 src:url('a.ttf');
确保 (a.ttf) 在与 css 文件相同的路径中。

Internet Explorer has some ttf support starting with version 9, but "only working when [fonts are] set to be installable".

Answer 4

当您使用@font-face规则时，请确保您使用以下语法：

@font-face {
    font-family: 'My Font';
    font-style: normal;
    font-weight: 400;
    src: url('../path/to/My-Font.ttf') format('ttf');
}

您似乎得到的错误意味着您下载的文件（字体文件）可能在下载时已损坏，或者它可能已在服务器本身上损坏。我建议您从同一个网站重新下载该字体，或者从另一个网站重新下载。

当您要使用自定义字体时，请确保使用以下语法：

#text {
    color: white;
    **font-family: 'My Font'**;
    font-size: 25px;
    font-weight: bold;
    text-align: left;
    margin-left: 15px;
    margin-top: 20px;
}

当然，如果你复制我的代码，一定要去掉星号(*)。

这里有一些关于 @font-face 规则的更多信息：

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

这里：

https://css-tricks.com/snippets/css/using-font-face/

还有，这里：

https://developer.mozilla.org/en/docs/Web/CSS/@font-face

CSS 外部字体在 Div 中无法运行

CSS External Font Not Functioning In Div

html

css

styles