font-face 在 Firefox无法正常工作问题

@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)

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

这里也有一个办法

# 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 ‘*‘;

}

https://icomoon.io/#docs

时间: 2024-08-28 03:07:54

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

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

关闭Firefox出现下图所示: 解决办法:移除如下文件即可 C:\Windows\SysWOW64\Macromed\Flash\NPSWF32_15_0_0_152.dll

CSS3 字体【@font-size使用全攻略-配合font squirrel】

篇1: CSS3 字体 CSS3 @font-face 规则 以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体. 使用CSS3,网页设计师可以使用他/她喜欢的任何字体. 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户. 您所选择的字体在新的CSS3版本有关于@font-face规则描述. 您"自己的"的字体是在 CSS3 @font-face 规则中定义的. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 属性

css3 自定义字体的使用方法

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

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

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

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

本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使

CSS测试题Ⅱ

1.如何使用 CSS3 强制换行? A. word-wrap: break-word; B. text-wrap: break-word; C. text-wrap: force; D. text-width: set; 答案:A. word-wrap: break-word; 2.下面哪个是有效的 CSS3 转换语句? A. matrix() B. modify() C. skip() D. simulate() 答案:A. matrix() 注解:matrix() 方法把所有 2D 转换方法

用python从符合一定格式的txt文档中逐行读取数据并按一定规则写入excel(openpyxl支持Excel 2007 .xlsx格式)

前几天接到一个任务,从gerrit上通过ssh命令获取一些commit相关的数据到文本文档中,随后将这些数据存入Excel中.数据格式如下图所示 观察上图可知,存在文本文档中的数据符合一定的格式,通过python读取.正则表达式处理并写入Excel文档将大大减少人工处理的工作量. 1. 从gerrit获取原始信息,存入文本文档: $ssh –p 29418 <your-account>@192.168.1.16 gerrit query status:merged since:<date

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

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性——除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创