CSS：@font-face导入不起作用。

Question

我不理解如何让它运作起来，任何帮助将不胜感激；

我参考了这个网站：http://alistapart.com/article/cssatten

从我的style.css文件中：

@font-face {
 font-family: "JSL";
 src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype");
}

font {
 color: #000000;
 font-size: 120%;
 font-family: "JSL";
}

- user2084666

Answer 1

加号不是问题（已使用我的重命名字体进行测试），您也不必在主css文件的顶部导入单独的css文件。

但是，您可能需要比真正的字体更多版本。请查看Bulletproof @font-face Syntax。

您可以使用FontSquirrel的生成器来实现此目的。

这是我的应用程序中@font-face嵌入的示例，它固定在我的主css样式表的顶部。

@font-face {
    font-family: 'JustVector';
    src: url('../fonts/justvectorv2+webfont.eot');
    src: url('../fonts/justvectorv2+webfont.eot?') format('eot'),
        url('../fonts/justvectorv2+webfont.woff') format('woff'),
        url('../fonts/justvectorv2+webfont.ttf') format('truetype'),
        url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg');
    font-weight: normal;
    font-style: normal;
}

- Monica Lent

---

此外，请检查您的控制台，确保您热链接的字体在请求时没有返回403 Forbidden错误。 - Monica Lent

我试过这个，这必须在服务器端完成吗？因为对我来说这还是不起作用 - user2084666

Answer 2

根据字体的不同，您可能需要使用：

@font-face {
font-family: 'someFont';
src: url('path/to/font/someFont.eot');
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'), 
     url('path/to/font/someFont.woff'), format('woff'), 
     url('path/to/font/someFont.ttf'), format('truetype'), 
     url('path/to/font/someFont.svg'), format('svg');
font-weight: normal;
font-style: normal;
}

在CSS中：

BODY 
{
    font-family: 'someFont', Fallback, sans-serif;
    font-size: 12px;
    ... 
}

当我嵌入自定义字体时遇到问题，这个方法对我很有效。

- Maciej Ogonowski

Answer 3

字体 URL 中的 "+" 符号可能会有问题吗？您可能需要对其进行 URL 编码。

编辑 - 在访问字体 URL 后，看起来您应该尝试下载 ttf 文件，并从本地引用它，而不是从远程源引用。它提示我输入验证码以便下载文件，这可能是它无法正常工作的原因。

- Ripside

---

我发帖后意识到这一点，但我更改了链接为http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf，并获得了相同的结果。 - user2084666

Answer 4

您需要下载文件并在本地引用它， 链接支持下载链接，需要验证码才能下载，这意味着它不是TTF文件的直接链接。

- John Mersal

Answer 5

不

@font-face

尝试导入它：

@import_your_new_cssfile.css

你把它放在哪里：

font-face {
 font-family: "JSL";
 src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype");
}

font {
 color: #000000;
 font-size: 120%;
 font-family: "JSL";
}

- Marek Andrzejak