@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. pygame_polygon

    今天我们要在窗口上绘制简单的多边形 1.认识几个简单的常用的颜色: black=(0,0,0) while=(255,255,255) red=(255,0,0) green=(0,255,0) bl ...

  2. 浅析前端开发中的 MVC/MVP/MVVM 模式

    MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式(Design Pattern),只是为了解决一类 ...

  3. Coin Change (II)(完全背包)

                                                               Coin Change (II) Time Limit: 1000MS   Mem ...

  4. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

  5. 学习如何看懂SQL Server执行计划(三)——连接查询篇

    三.连接查询部分 --------------------嵌套循环-------------------- /* UserInfo表数据少.Coupon表数据多嵌套循环可以理解为就是两层For循环,外 ...

  6. windows Tomcat+Nginx 集群 迷你版

    一. 准备 两个Tomcat 加上Nginx 2. 创建一个公共的文件夹用于部署项目 3. Tomcat配置 配置内存 在catalina.bat 第一行增加 set JAVA_OPTS=-Xms51 ...

  7. 单独创建一个Android Test Project 时junit 的配置和使用

    现在的集成ADT后Eclipse都可以直接创建Android Test Project 如图所示: 命名后选择你要测试的单元程序,比如我自己准备测试sms,便可以如图所示那样选择 本人新建的测试工程为 ...

  8. 纯CSS3实现轮播图

    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...

  9. 阿里巴巴 Java 开发规约插件初体验

    阿里巴巴 Java 开发手册 又一次来谈<阿里巴巴 Java 开发手册>,经过这大半年的版本迭代,这本阿里工程师们总结出来避免写出那么多 Bug 的规范,对于 Java 开发者简直就是必备 ...

  10. 使用邮件监控Mxnet训练

    1. 前言 受到小伙伴的启发,就自己动手写了一个使用邮件监控Mxnet训练的例子.整体不算复杂. 2. 打包训练代码 需要进行监控训练,所以需要将训练的代码打包进一个函数内,通过传参的方式进行训练.还 ...