@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+Keepalived配置高可用

    服务器环境: 主mysql:192.168.1.163 从mysql:192.168.1.126 VIP:192.168.1.50 一.mysql配置主从同步 1.配置主mysql服务器 vim /e ...

  2. SSH端口转发详解及实例

    一.SSH端口转发简介 SSH会自动加密和解密所有SSH客户端与服务端之间的网络数据.但是,SSH还能够将其他TCP端口的网络数据通SSH链接来转发,并且自动提供了相应的加密及解密服务.这一过程也被叫 ...

  3. EXTENDED LIGHTS OUT poj1222 高斯消元法

    EXTENDED LIGHTS OUT Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6443   Accepted: 42 ...

  4. The Twin Towers zoj2059 DP

    The Twin Towers Time Limit: 2 Seconds      Memory Limit: 65536 KB Twin towers we see you standing ta ...

  5. ASP.Net MVC 布局页 模板页 使用方法详细说明

    一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...

  6. Python系列之文件操作、冒泡算法、装饰器、及递归

    文件处理 python对文件进行读写操作的方法与具体步骤,包括打开文件.读取内容.写入文件.文件中的内容定位.及关闭文件释放资源等 open().file(),这个两函数提供了初始化输入\输出(I\O ...

  7. java web 项目 图书管理系统的设计与实现

     java web 项目 图书管理系统的设计与实现

  8. 运用 finereport 和 oracle 结合开发报表思路大总结

    近排自己学习了一款软件finereport开发报表模块,自己总结了如何了解需求,分析需求,再进行实践应用开发,最后进行测试数据的准确性,部署报表到项目对应的模块中显示. 一.需求(根据需求文档分析) ...

  9. DevOps之服务-监控工具

    唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <DevOps教程> <DevOps之服务-监控工具> 注:关于监控工具的具体 ...

  10. CSS之 z-index 属性

    层叠上下文: 三维概念,表示元素在Z轴的位置 层叠可嵌套,组合成一个分层次上下文  每个层叠上下文和兄弟元素独立,进行层叠变化或渲染时,只考虑后代元素  每个层叠上下是自成体系的 层叠顺序 1 bac ...