@font-face存在的问题:
1、不同浏览器支持不同格式
2、Firefox默认情况下不允许跨域font-face,除非你可以添加“Access-Control-Allow-Origin” header to the font.
 
一个暂时的解决方案:
1、去fontsquirrel.com下载需要的font-face kit
2、到fontsquirrel font-face generator上传刚下载的font-face kit
3、选择Expert选项
4、格式选择 ‘TrueType’, ‘EOT’, and ‘SVG’(woff是一种只有Firefox才支持的格式,但是Firefox也支持.ttf,所以就不用woff了)
5、选择‘Base64′  编码
6、下载下来使用就行了
(实际上就是把ttf集合到CSS里,所以可以解决Firefox跨域限制。缺点是CSS文件变大了,对于那些不支持ttf的格式浏览器,像手机Safari和ie)
 
 
这里也有一个办法
# For Apache
<FilesMatch ".(eot|ttf|otf|woff)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>
 
# For nginx
location ~* \.(eot|ttf|woff)$ {
  add_header Access-Control-Allow-Origin '*';
}

font-face 在 Firefox无法正常工作问题的更多相关文章

  1. webdriver 操作 Firefox 在关闭浏览器时弹出 “Plugin Container for Firefox已停止工作” 处理办法。

    上来先来一个图: 在使用webdriver操作Firefox浏览器的时候,一路顺畅.可是在最后关闭浏览器后,出现了如上面图示的警告!这个警告很早就出现了,因为也不影响测试结果,也就一直没理. 后来新搭 ...

  2. css3 自定义字体的使用方法

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  3. 在前端页面中使用@font-face来显示web自定义字体【转】

    本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...

  4. CSS在线字体库,外部字体的引用方法@font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  5. css3-自定义字体

    参考链接http://www.w3cplus.com/content/css3-font-face 出处W3CPLUS css3-自定义字体   @font-face @font-face是CSS3中 ...

  6. CSS测试题Ⅱ

    1.如何使用 CSS3 强制换行? A. word-wrap: break-word; B. text-wrap: break-word; C. text-wrap: force; D. text-w ...

  7. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  8. js高级应用

    特别板块:js跨域请求Tomcat6.tomcat7 跨域设置(包含html5 的CORS) 需要下载两个jar文件,cors-filter-1.7.jar,Java-property-utils-1 ...

  9. Jquery打造的类似新浪微博@提醒功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. MySQL所学所思所想

    MySQL更改线上配置方案思想:原则上,需要备机.备份工作准备到位,有参数调优配置方案.有配置回退方案.有应急切换备机方案.以上方案评审无问题,然后可以和客户约定实施的时间.服务中断时间,先向客户侧申 ...

  2. SVG轨迹回放实践

    最近做了埋点方案XTracker的轨迹回放功能,大致效果就是,在指定几个顺序的点之间形成轨迹,来模拟用户在页面上的先后行为(比如一个用户先点了啥,后点了啥).效果图如下: 在这篇文章中,我们来聊聊轨迹 ...

  3. Linux入门之常用命令(7)压缩

    compress filename 压缩   -d解压缩  *.Z bzip -d解压缩 -z压缩 *.bz2 bzcat filename .bz2 读取压缩文件内容 gzip -d解压缩  -#压 ...

  4. P1013

    问题 D: P1013 时间限制: 1 Sec  内存限制: 128 MB提交: 33  解决: 21[提交][状态][讨论版] 题目描述 " 找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手 ...

  5. git忽略文件并删除git仓库中的文件

    问题描述 不慎在创建.gitignore  文件之前的时候将文件push到了 git仓库,即使之后在.gitignore文件中写入新的过滤规则,这些规则也不会起作用的,git依然会对所有git仓库中的 ...

  6. c++ 11 移动语义、std::move 左值、右值、将亡值、纯右值、右值引用

    为什么要用移动语义 先看看下面的代码 // rvalue_reference.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #includ ...

  7. Echarts数据可视化series-pie饼图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. JavaScript中的this基本问题

    在函数中 this 到底取何值,是在函数真正被调用执行的时候确定下来的,函数定义的时候确定不了. 执行上下文环境 : **定义**:执行函数的时候,会产生一个上下文的对象,里面保存变量,函数声明和th ...

  9. 使用vim编写hexo文档,并用ultisnips/snipmates/snippets插件补全

    作为一个vim使用者,编写markdown文档时若不能用vim这怎么能受的了! 下面是我编写markdown的时候用到的插件 Plugin 'Markdown'Plugin 'Markdown-syn ...

  10. PHP中如何定义类及其成员属性与操作

    1.类的定义: i. 类的关键字定义使用class 1.定义一个空类 Class Person{}; 2.定义一个有成员属性和操作的类 Class Person{ 成员属性........ 操    ...