Question

我遇到了字体问题，完全是“@ font-face”。当我试图运行这个本地HTML页面时，所有字体都有效，但是现在当我尝试运行在线HTML页面时，只有一种字体正常工作。

现在我有两种字体，一种是工作，另一种不是

CSS：

@font-face {
    font-family: 'RemachineScript';
    src: url(fonts/SCRIPTIN.ttf);
}

@font-face {
    font-family: 'Quicksand';
    src: url(fonts/Quicksand.otf);
}

header#subheader div.title {
    font-family: 'RemachineScript';
}

header#subheader p.subheader {
    font-family: 'Quicksand';
}

您可以在http://gspinaci.com/

看到HTML

网址是对的，因为它们位于同一个文件夹中。我能做什么？

Answer 1

控制台说没有Quicksand.otf文件，请确保两件事，首先，文件在那里，名称完全相同（区分大小写），第二个是你的font-face调用是非常具体，使用您可以从word squirrel下载的webkit字体：http://www.fontsquirrel.com/fonts/Quicksand

并确保在CSS文件中粘贴WHOLE font-face调用，如下所示：

@font-face {
 font-family: 'triplex';
 src: url('fonts/triplexsans-light-webfont.eot');
src: url('fonts/triplexsans-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/triplexsans-light-webfont.woff') format('woff'),
     url('fonts/triplexsans-light-webfont.ttf') format('truetype'),
     url('fonts/triplexsans-light-webfont.svg#triplexlight') format('svg');
font-weight: normal;
font-style: normal;
}

请记住包括所有字体格式文件，不仅包括.otf。

修改

您无需配置服务器，只需修改.htaccess文件，将以下行添加到其中：

AddType application/vnd.ms-fontobject eot
AddType font/opentype otf
AddType font/truetype ttf
AddType application/x-font-woff woff

Answer 2

检查这个答案：@font-face issue 你接受的答案中的内容几乎没有接近防弹;）你也可以尝试我的小转换器http://freedockstar.com/fontface/

我也不确定你是否需要为字体设置mime类型。没有它我的服务器工作正常。每个字体都是服务器，如text / html，没有任何问题。你在css中定义类型，并且接缝足够了;）

Answer 3

你需要添加：

格式（truetype）要么格式（opentype）或src属性之后的其他人

@font-face{
   font-family: 'RemachineScript';
   src: url(fonts/SCRIPTIN.ttf) format (truetype);
}

你可以在字体ttf文件中找到格式类型

Answer 4

也许为时已晚，但为了记录...我通过授予.ttf文件的读取权限来解决此问题。

chmod +r font.ttf

@ font-face无法在线工作

4 个答案: