@ font-face import不能在离线网站/不同的主机上使用在IE中的CSS使用在线字体 [英] @font-face import not working in offline website/different host using online fonts via CSS in IE only
问题描述
IE很奇怪。我已经看过MIME类型，添加了 .htaccess 文件与
IE is very strange. I've had a look at MIME types, added a .htaccess file with
<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开发者工具似乎已经注意到了，但是没有改变。该网站目前离线（只是在硬盘上查看） - authough当它上传到不同的服务器它仍然不工作 - 所有的JavaScript和样式表链接从头标记。好的。
And the IE9 developer tools seem to have noticed that is in place but again no change. The website is currently offline (just viewed on the hard drive) - authough when it's uploaded to a different server it still does not work - with all the Javascript and Style Sheets linked from within the head tag. All good.
字体没有正确导入。
开发人员控制台说：
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以 @charsetUTF-8; 开头，我的HTML文件也以：
I've done quite a bit of research on this and I understand document types can get in the way of this. I am using UTF-8 where the css starts with @charset "UTF-8"; and my HTML file also starts with:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
我以为这是字体转换，但如果是这样，在您从主机服务器直接查看网站时，它不会工作在IE的第一位。
I was thinking it was to do with the font conversion but surly if that was the case, the font wouldn't work in the first place in IE when it does when you're looking directly at the website from the hosted server.
有关如何解决这个问题的任何想法？
Any ideas on how to resolve this?
此外，在IE 7和8中，他们只使用EOT文件，我得到一个不同的错误：
Also in IE 7 and 8, where they only use EOT files, I get a different error:
CSS3111: @font-face encountered unknown error.
vitesse-bold.eot
字体目录.htaccess：
Fonts directory .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：
Main website .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：// ，但似乎已经停止工作了。
Unsure what was going on with IE creating two fonts with both http://www. and http:// but it seems to have stopped working now.
推荐答案
实际问题
面部代码，并将问题缩小到EOT文件。
ACTUAL ISSUE
We got the font working in IE9 by fixing the @font-face code, and narrowed the issue down to the EOT file.
这里的问题是字体文件中设置的字体名和家族名。由于某些原因，IE6-8有这两个属性是不同的问题（不是所有的时间，因为我在我的网站上使用的自定义字体有不同的名称为每个属性，它的工作原理很好在一切）。
The issue here was the fontname and family-name set within the font file itself. For some reason, IE6-8 have issue with these two properties being different (not all the time though, as the custom fonts I am using on my site have different names for each property, and it works just fine in everything).
我得到了原来的OTF文件，使用FontForge设置fontname，family name和name of humans将字体保存为TTF，并将其在线转换为EOT格式。
I got the original OTF file off him, used FontForge to set the "fontname", "family name" and "name for humans" to all be the same, then saved the font as a TTF, and converted it online to EOT format.
现在很棒。我们做的事情，使$＃！7在IE中工作。
Works great now. The things we do to make $#!7 work in IE.
注意：我以前试图将文件转换为EOT（没有编辑文件属性）没有成功。
Note: I had previously tried to convert the file to EOT (no edits to the file properties) with no success.
如何引用字体文件？听起来好像你不是相对链接到他们，或者他们在另一个域/主机名。
How are you referencing your font files? Sounds as though you either aren't relatively linking to them, or they are on another domain/host name.
如果你已经链接到他们绝对，例如： http://www.domain.com/fonts/myfont.eot ，并通过 http://domain.com ，那么你会有CORS的问题。我有这个问题，我认为这是一个IE的问题，结果，我只是浏览网站与 www 在一个浏览器，没有在IE。
If you have linked to them absolutly, eg: http://www.domain.com/fonts/myfont.eot and you visit the site via http://domain.com, then you will have CORS issues. I had this problem, I thought it was an IE problem, turned out I was simply viewing the website with www on one browser, and without on IE.
如果字体文件在另一个主机名或域上，您将需要启用CORS，阅读更多：
If the font files are on another host name or domain, you will need to enable CORS, read more:
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
用于@ font-face的代码：
Code I use for @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;
注意：
使用 src：local <〜4.0默认android浏览器不支持
note:
The use of src: local('(*%$@#@') is not supported by <~4.0 default android browser, and will cause the custom font to not work at all.
这篇关于@ font-face import不能在离线网站/不同的主机上使用在IE中的CSS使用在线字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://www.titaniumwebdesigns.com/forums/screenshot-a.jpg](\"http://www.titaniumwebdesigns.com/forums/screenshot-a.jpg\"){kind=link}
![http://www.titaniumwebdesigns.com/forums/screenshot-b.jpg](\"http://www.titaniumwebdesigns.com/forums/screenshot-b.jpg\"){kind=link}
![http：// www .titaniumwebdesigns.com / forums / screenshot-c.jpg](\"http://www.titaniumwebdesigns.com/forums/screenshot-c.jpg\"){kind=link}