今晚有网友问到font-face跨域在nginx下如何配置,印象中一淘UX有文章介绍办法,但打开文章里面相应的链接后发现没内容。
搜了一下其他地方,大多数给出的都是一样的链接。
所以在这里补充一下内容:
原因:
Firefox对字体文件有加载限制,也就是说不允许你随便加载别人的字体,防止他人盗用字体。
解决办法:
1、把字体文件放在你网站根目录下。
2、给字体文件的http头里面添加Access-Control-Allow-Origin属性,以控制指定域引用你的字体文件。
nginx:
server { ... # Fix @font-face cross-domain restriction in Firefox location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ { add_header Access-Control-Allow-Origin "http://yoursite.com"; } ... }
apache:
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://yoursite.com" </IfModule> </FilesMatch>
3、添加mine
AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType application/x-font-woff woff
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。