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

网页

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

Answer 1

嘿，

我认为您使用的代码是错误的。如果您转到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 文件不同

Answer 2

我想你试试这个...

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 3

1. 在src:url('a.ttf');中使用单引号
2. 确保 （A.ttf） 在 CSS 文件的相同路径中。

Internet Explorer 从版本 9 开始有一些 ttf 支持，但是 "仅当 [字体] 设置为可安装时才有效"。

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