2011-02-15 34 views
86

我正在设计一个网站(例如mywebsite.com),并且此网站从另一个网站(称为anothersite.com)加载字体字体。我是有在Firefox中字型字体加载的问题,我在读this blog如何添加Access-Control-Allow-Origin标头

火狐(从V3.5支持@字体面 )不允许跨域 字体默认。这意味着必须从相同域 (和子域)提供字体 ,除非您可以将 “访问控制 - 允许来源”标头 添加到字体中。

如何将Access-Control-Allow-Origin标头设置为字体?

回答

141

所以你要做的是...在字体文件文件夹中放置一个htaccess文件,其中包含以下内容。

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

也是在远程CSS文件,字体-face声明所需要的字体文件(不需要在本地CSS文件)的完整的绝对网址:

例如

@font-face { 
    font-family: 'LeagueGothicRegular'; 
    src: url('http://www.mysite.com/css/fonts/League_Gothic.eot?') format('eot'), 
     url('http://www.mysite.com/css/fonts/League_Gothic.woff') format('woff'), 
     url('http://www.mysite.com/css/fonts/League_Gothic.ttf') format('truetype'), 
     url('http://www.mysite.com/css/fonts/League_Gothic.svg') 

} 

这将解决问题。需要注意的一点是,您可以准确指定应允许哪些域访问您的字体。在上述htaccess的我已经指定了每个人都可以访问我的字体与"*"但是你可以限制它:

单个URL:

Access-Control-Allow-Origin: http://yoursite.com 

或逗号分隔的URL列表

Access-Control-Allow-Origin: http://yoursite.com,http://anothersite.com

(当前实现中不支持多个值)

+1

您不必使用完整路径。假设您将'fonts'文件夹保存在与.css文件相同的目录中,那么简单的`url('/ fonts/League_Gothic.woff')格式('woff')`就足够了。 – StrayObject 2011-12-14 14:03:01

+1

此解决方案也适用于跨域.ajax请求!太好了! – Isaac 2011-12-14 15:20:09

20

the official docs,浏览器不当您使用

Access-Control-Allow-Origin: "*" 

头,如果您还使用了

Access-Control-Allow-Credentials: "true" 

头喜欢它。相反,他们希望你特别允许他们的出身。如果你仍然要允许所有来源,你可以做一些简单的Apache魔术得到它的工作(确保已启用mod_headers):

Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN 

浏览器都需要发送Origin标题上的所有跨域要求。该文档明确指出,如果您接受/计划接受请求,则需要在Access-Control-Allow-Origin标题中回显此标题。这就是这个Header指令正在做的事情。

3

对于Java基于应用程序添加到您的web.xml文件:

<servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.ttf</url-pattern> 
</servlet-mapping> 

<servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.otf</url-pattern> 
</servlet-mapping> 

<servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.eot</url-pattern> 
</servlet-mapping> 

<servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.woff</url-pattern> 
</servlet-mapping> 
5

接受的答案没有工作对我来说不幸的是,因为我的网站的CSS文件@import字体CSS文件,并且这些文件都存储在Rackspace Cloud Files CDN上。

由于Apache的头永远不会发生(因为我的CSS是不是在Apache),我不得不做几件事情:

  1. 转到云中的文件的用户界面,并添加自定义标题(接入控制 - 允许来源与值*)每个字体真棒文件
  2. 更改WOFF和TTF文件的内容类型,以字体/ WOFF分别

字体/ TTF看看你能不能逃脱只是#1,因为第二个需要一些命令行工作。

要添加#1自定义标题:

  • 查看云文件容器文件
  • 向下滚动到文件
  • 点击齿轮图标
  • 单击编辑页眉
  • select Access-Control-Allow-Origin
  • 添加单个字符'*'(不含引号)
  • 命中进入
  • 重复其他文件

如果您需要继续做#2,那么你就需要用卷曲

curl -D - --header "X-Auth-Key: your-auth-key-from-rackspace-cloud-control-panel" --header "X-Auth-User: your-cloud-username" https://auth.api.rackspacecloud.com/v1.0 

从结果返回的命令行,提取值X-验证令牌和X-存储的URL

curl -X POST \ 
    -H "Content-Type: font/woff" \ 
    --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woff 

curl -X POST \ 
    -H "Content-Type: font/ttf" \ 
    --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf 

当然,这个过程只有当您正在使用Rackspace公司CDN的工作原理。其他CDN可能提供类似的工具来编辑对象标题和更改内容类型,所以也许你会很幸运(并在此发布一些额外的信息)。

1

在您的请求ajax的file.php中,可以设置值标头。

<?php header('Access-Control-Allow-Origin: *'); //for all ?>