我正在设计一个网站(例如 mywebsite),该网站从另一个网站(例如 anothersite)加载字体字体.我在 Firefox 中加载字体时遇到问题,我阅读了 这个博客:
I am designing a website (e.g. mywebsite) and this site loads font-face fonts from another site (say anothersite). I was having problems with the font face font loading in Firefox and I read on this blog:
Firefox(支持@font-face从 v3.5) 不允许跨域默认字体.这意味着字体必须从同一个域提供(和子域),除非您可以添加访问控制允许来源"标题到字体.
Firefox (which supports @font-face from v3.5) does not allow cross-domain fonts by default. This means the font must be served up from the same domain (and sub-domain) unless you can add an "Access-Control-Allow-Origin" header to the font.
如何将 Access-Control-Allow-Origin 标头设置为字体?
How can I set the Access-Control-Allow-Origin header to the font?
推荐答案所以你要做的是... 在字体文件文件夹中放置一个 htaccess 文件,其中包含以下内容.
So what you do is... In the font files folder put an htaccess file with the following in it.
<FilesMatch ".(ttf|otf|eot|woff|woff2)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>同样在您的远程 CSS 文件中,font-face 声明需要字体文件的完整绝对 URL(在本地 CSS 文件中不需要):
also in your remote CSS file, the font-face declaration needs the full absolute URL of the font-file (not needed in local CSS files):
例如
@font-face { font-family: 'LeagueGothicRegular'; src: url('www.example/css/fonts/League_Gothic.eot?') format('eot'), url('www.example/css/fonts/League_Gothic.woff') format('woff'), url('www.example/css/fonts/League_Gothic.ttf') format('truetype'), url('www.example/css/fonts/League_Gothic.svg') }这将解决问题.需要注意的一件事是,您可以准确指定应允许哪些域访问您的字体.在上面的 htaccess 中,我已经指定每个人都可以使用 "*" 访问我的字体,但是您可以将其限制为:
That will fix the issue. One thing to note is that you can specify exactly which domains should be allowed to access your font. In the above htaccess I have specified that everyone can access my font with "*" however you can limit it to:
单个网址:
标头集 Access-Control-Allow-Origin example
Header set Access-Control-Allow-Origin example
或以逗号分隔的 URL 列表
Access-Control-Allow-Origin:site1,site2
(当前实现不支持多个值)
(Multiple values are not supported in current implementations)
更多推荐
如何添加 Access
发布评论