Question

您好（对不起英语我是法国人），

以下是网站： www.anthonyblochet.fr

问题是所使用的字体不会在firefox或iOS中显示。

以下是代码：

@font-face {
    font-family: 'ProximaNova-Regular';
    src: url('webfonts/2ACFD6_0_0.eot');
    src: url('webfonts/2ACFD6_0_0.eot?#iefix') format('embedded-opentype'),
    url('webfonts/2ACFD6_0_0.woff') format('woff'),
    url('webfonts/2ACFD6_0_0.ttf') format('truetype'),
    url('webfonts/2ACFD6_0_0.svg#wf') format('svg');
}

对于body元素：

font: normal 1.25em/1.2 ProximaNova-Regular;

我为iOS尝试了几件事：

AddType image/svg-xml svg
AddType image/svg-xml svgz

对于Firefox：

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

我还检查了文件.svg，字体标记上有id wf。

感谢

Answer 1

而不是

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

尝试

<FilesMatch "\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin »
    "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

Answer 2

网络字体也不会出现在Chrome或IE上。原因很简单，所提到的字体资源不存在，即像http://www.anthonyblochet.fr/css/webfonts/2ACFD6_0_0.woff这样的网址会导致404 Not Found响应。

webfont没有出现在iPhone和Firefox上

2 个答案: