font-face跨域办法
font-face是现在比较流行的技术,可以矢量化你的图标,更改颜色方便等等。如果你想更进一步了解他,请点击这里(CSS3 icon font完全指南)
今晚有网友问到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
font-face跨域办法的更多相关文章
- tomcat 下配置ajax 跨域 tomcat font face 跨域 java跨域
tomcat ajax跨域和css字体 font face 跨域一样适用 CORS介绍 它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式 ...
- vue配置二级目录&vue-axios跨域办法&谷歌浏览器设置跨域
一.根据官方建议,dist打包的项目文件放在服务器根目录下,但是很多时候,我们并不能这样做,当涉及到二级目录设置多层深埋的时候,就需要在webpack配置文件里去设置一下了. 在webpack.con ...
- angualr跨域访问配置
浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了: 简单的解释就是相同域名,端口相同,协议 ...
- 关于ajax的跨域
在前端开发中,跨域是经常遇到的问题,也是面试最喜欢问的问题,究其根本原因,是浏览器的同源策略所致,是浏览器为了避免不同域名不能共享cookie以及locationstorage等等,发起请求的时候无法 ...
- 解决firefox和IE9对icon font字体的跨域访问问题
何为跨域访问,为什么会有跨域限制?一切还得从浏览器的同源策略说起. 同源策略:是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能会受到影响,可以说Web是构建在同源策略基础 ...
- [转]JavaScript跨域总结与解决办法
转载自http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html仅用作个人读书笔记. 什么是跨域 1.document.domain+ ...
- JavaScript跨域总结与解决办法
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?
AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...
- JavaScript跨域总结与解决办法(转)
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域 ...
随机推荐
- Squid服务日志分析
Squid服务日志分析 Apache 和 Squid 是两种著名的代理缓存软件,但Squid 较 Apache 而言是专门的代理缓存服务器软件,其代理缓存的功能强大,支持 HTTP/1.1 协议,其缓 ...
- mongodb转换List实体(去掉多余的字段) 批量添加
Gson gson = new Gson(); String str = "list集合json字符串"; JsonObject object = gson.fromJson(st ...
- maven安装(linux)
1.首先到Maven官网下载安装文件,目前最新版本为3.0.3,下载文件为apache-maven-3.0.3-bin.tar.gz,下载可以使用wget命令: 2.进入下载文件夹,找到下载的文件,运 ...
- Hibernate day02笔记
对象状态与一级缓存 状态介绍 hibernate 规定三种状态:瞬时态.持久态.脱管态 状态 瞬时态:transient,session没有缓存对象,数据库也没有对应记录. ...
- winform 控件(1)
单词:controls(父类),所有的控件dataSource ,工具的数据源DisplayMember,属性,指定的值 <1>label--文本显示工具属性:1.text,是显示文字的n ...
- B-F 字符串匹配算法
Brute-Froce 算法是串的匹配模式算法中的一种其匹配方式如下: 1.设有字符串 a ,b;a为主串,在 a 中查找 b 串的位置 2.匹配方式如下: 2.1: 分别从 a,b串的第一个元素开始 ...
- ado.net access oracle dataset via store procedure
使用存储过程返回结果集,并绑定到ado.net对象中在sql server里面是非常直观的. 1: create procedure GetAllRecords 2: as 3: select * f ...
- rtsp 协议 详细讲解
转载自:http://www.mikewootc.com/wiki/net/protocol/rtsp.html 目录: 概述 RTSP简介 协议特点 协议细节 典型的rtsp交互过程 RTSP消息格 ...
- BootLoader 详解(1)
1. Boot Loader的概念 BootLoader就是在操作系统内核运行前之前运行的一段小程序.通过这段小程序,可以初始化硬件设备.建立内存空间映射图,从而将系统的软硬件带到一个合适的状态,以便 ...
- php protobuff 使用
http://hi.baidu.com/sing520/item/a6e98a3545fe1ef2e6bb7ad0 php 不支持uint32 不支持空结构 不支持package