0

IE很奇怪。我查看了 MIME 类型，添加了一个.htaccess文件

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

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

而 IE9 开发者工具似乎已经注意到它已经到位但又没有任何变化。该网站目前处于离线状态（仅在硬盘驱动器上查看）-尽管当它上传到不同的服务器时它仍然无法正常工作-所有 Javascript 和样式表都从head标签内链接。都好。

字体根本没有正确导入。

我在开发者控制台中收到一条错误消息：

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.eot?#iefix

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.ttf

我已经对此进行了大量研究，并且我了解文档类型可能会阻碍这一点。我正在使用 UTF-8，其中 css 以开头，@charset "UTF-8";而我的 HTML 文件也以：

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">

我认为这与字体转换有关，但如果是这样的话，当您从托管服务器直接查看网站时，字体首先在 IE 中不起作用。

关于如何解决这个问题的任何想法？

同样在 IE 7 和 8 中，他们只使用 EOT 文件，我得到一个不同的错误：

CSS3111: @font-face encountered unknown error.
vitesse-bold.eot

字体目录.htaccess：

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

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

主网站.htaccess：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

CSS字体导入：

@font-face {
    font-family:'Vitesse-Bold';
    src:url('../includes/fonts/vitesse-bold.eot');
    src:url('../includes/fonts/vitesse-bold.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/vitesse-bold.woff') format('woff'),
            url('../includes/fonts/vitesse-bold.ttf') format('truetype'),
            url('../includes/fonts/vitesse-bold.svg#vitesse-bold') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'Flama-Bold';
    src:url('../includes/fonts/flama-bold.eot');
    src:url('../includes/fonts/flama-bold.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/flama-bold.woff') format('woff'),
            url('../includes/fonts/flama-bold.ttf') format('truetype'),
            url('../includes/fonts/flama-bold.svg#flama-bold') format('svg');
    font-weight:normal;
    font-style:normal;
}

截图：

http://www.titaniumwebdesigns.com/forums/screenshot-a.jpg 字体导入src:url('../includes/fonts/font.eot');

http://www.titaniumwebdesigns.com/forums/screenshot-b.jpg 字体导入src:url('http://sub-domain.domain.com/includes/fonts/font.eot');

http://www.titaniumwebdesigns.com/forums/screenshot-c.jpg 字体导入src:url('http://www.sub-domain.domain.com/includes/fonts/font.eot');

不确定 IE 用这两种字体创建两种字体发生了什么http://www.，http://但它现在似乎已经停止工作。

4

1 回答 1

2

实际问题

我们通过修复 @font-face 代码使字体在 IE9 中工作，并将问题缩小到 EOT 文件。

这里的问题是字体文件本身中设置的字体名称和家族名称。出于某种原因，IE6-8 存在这两个属性不同的问题（尽管并非总是如此，因为我在我的网站上使用的自定义字体对每个属性都有不同的名称，并且它在所有方面都可以正常工作）。

我从他那里得到了原始的 OTF 文件，使用 FontForge 将“fontname”、“family name”和“name for human”设置为相同，然后将字体保存为 TTF，并在线转换为 EOT 格式。

现在效果很好。我们为使 $#!7 在 IE 中工作所做的事情。

注意：我之前曾尝试将文件转换为 EOT（不对文件属性进行编辑），但没有成功。

原始答案

你是如何引用你的字体文件的？听起来好像您没有相对链接到它们，或者它们位于另一个域/主机名上。

如果您绝对链接到它们，例如：http://www.domain.com/fonts/myfont.eot并且您通过 访问该站点http://domain.com，那么您将遇到 CORS 问题。我遇到了这个问题，我以为是 IE 问题，结果我只是www在一个浏览器上查看网站，而没有在 IE 上。

如果字体文件位于另一个主机名或域上，则需要启用 CORS，阅读更多：

http://enable-cors.org/

http://www.w3.org/TR/cors/

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

我用于@font-face 的代码：

@font-face {
font-family: "Vitesse-Bold";
src: url('../includes/fonts/vitesse-bold.eot');
src: local('(*%$@#@'),
    url('../includes/fonts/vitesse-bold.woff') format('woff'),
    url('../includes/fonts/vitesse-bold.ttf') format('truetype'),
    url('../includes/fonts/vitesse-bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Flama-Bold";
src:url('../includes/fonts/flama-bold.eot');
src: local('(*%$@#@'),
    url('../includes/fonts/flama-bold.woff') format('woff'),
    url('../includes/fonts/flama-bold.ttf') format('truetype'),
    url('../includes/fonts/flama-bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

像这样使用：

font-family: "Vitesse-Bold", Verdana, sans-serif;

注意： <~4.0 默认安卓浏览器不支持 使用src: local('(*%$@#@')，会导致自定义字体完全不起作用。

于 2012-09-11T14:15:37.110 回答