Question

最近我为我的网站下载了一个字体，并将其重命名为＆＃34; a.ttf＆＃34;。当我尝试将它嵌入到div的CSS id中时，它看起来并不实用。有人知道这里的问题吗？非常感谢你，祝你有个美好的一天！我忘了提及我的外部CSS页面正在运行，因为我在其他div中有工作类。我只是检查了元素，它现在说无法解码下载的字体。这意味着什么。 ARGGHHH！： - ）

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文件不一样

Answer 3

在src:url('a.ttf');
确保（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

CSS外部字体在Div中不起作用

4 个答案: