<style type="text/css">

@font-face{

    font-family:'Aaargh';

    src:url(fonts/Aaargh/Aaargh.ttf) format('truetype');

    font-weight:normal;

    font-style:normal;

}

@font-face{

    font-family:'OstrichSans-Black';

    src:url(fonts/theleagueof-ostrich-sans-bad8f030a420639c6066e53266647862d21d3501/ostrich-sans-master/OstrichSans-Black.otf) format('opentype');

    font-weight:normal;

    font-style:normal;

}

p.new1{

    font-family:'Aaargh';

}

p.new2{font-family:'OstrichSans-Black';

    }

</style>

</head>

<body>

<p class="new1">Hello,World!</p>

<p class="new2">Hello,World!gsdfds</p>

</body>

</html>

说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念：

一、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

五、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

   @font-face {  font-family: 'YourWebFontName';  src: url('YourWebFontName.eot?') format('eot');/*IE*/  src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/    } 
   @font-face {  font-family: 'YourWebFontName';  src: url('YourWebFontName.eot'); /* IE9 Compat Modes */  src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */              url('YourWebFontName.woff') format('woff'), /* Modern Browsers */              url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */              url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */    }

说了这么多空洞的理论知识，大家一定有点心痒痒了，那么我们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的，假如我们有一个这样的DOM标签，需要应用自定义字体：

既然各浏览器的字体格式不一致，那么我们有必要将一种字体转换成各种字体，这样我们在使用时可以给各浏览器设置不同字体格式，下面
给大家提供一个字体生成工具：fonts quirrel。

参考：http://blog.163.com/zx_1258/blog/static/133233799201301424414229/

40个可通过@font-face使用的免费字体：http://www.oschina.net/news/24166/free-fonts-fontface

font-face 使用的更多相关文章

  1. CSS3与页面布局学习总结（五）——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  3. [函数] Firemonkey Windows 重新计算 Font Baseline

    计算字型 Baseline 是一个不常用的函数,但如果想要显示不同大小文字下方对齐,就得用它来计算字型的 Baseline 才行,如果计算不准,显示的文字就会高高低低不整齐. 在 Firemonkey ...

  4. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  5. 关于firefox对font awesome本地环境无法加载问题

    问题描述 昨天尝试使用font awesome加载字体图标,直接在本地引入相关文件,测试发现图标在chrome和IE环境支持,但是在firefox上怎么都显示不出来. 解决方法 通过测试发现通过htt ...

  6. CSS3使用Font Awesome字体图标的控件样例（按钮，工具栏，输入框）

    按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...

  7. CSS 中Font Awesome 图标（附码表）

    HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...

  8. Font Squirrel

    Font Squirrel FontSquirrel:国外免费字体下载网是一个提供高质量商业字体下载网站,提供海量的英文字体库,用户可以随意下载并应用于各种商业用字,无需考虑其版权问题. 官网地址:h ...

  9. <web Font的使用>

    使用font-face将字体引入web中 先将字体文件复制到项目的font文件夹中,CSS样式如下: @font-face { font-family: 'iconfont'; /*字体名称*/ sr ...

  10. java 引入自定义字体font后出现的硬盘吃光的问题

    有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...

随机推荐

  1. EffectiveC#16--垃圾最小化

    1.申请和释放一个基于堆内存的对象要花上更多的处理器时间. 所以当一个引用类型的局部变量在常规的函数调用中使用的非常频繁时应该把它提升为对象的成员(方法一) 2.当你把一个实现了IDisposable ...

  2. 关于jQuery获取checkbox状态的问题

    这位大神概括的很好 http://www.cnblogs.com/wangkongming/p/4002710.html

  3. “有箭头的视图”，即程序的Storyboard Entry Point。

    设置方法很简单:打开StoryBoard文件,选中要设置为第一视图的ViewController,在右边工具栏勾选Is Initial View Controller就好了,此时你会看到ViewCon ...

  4. UI开发学习中遇到的问题汇总

    1.给UIView设置圆角,边框,阴影绘制,需要使用layer 1)设置圆角cornerView.layer.cornerRadius = 20; //设置试图圆角的大小cornerView.laye ...

  5. Spark RDD设计学习笔记

    本文档是学习RDD经典论文<Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster ...

  6. Spark IDEA开发环境构建

    本文档基于IEDA构建spark maven应用. date: 2016/8/1 author: wangxl 1.下载IDEA https://www.jetbrains.com/idea/ 2.安 ...

  7. 13年山东省赛 Mountain Subsequences（dp）

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Mountain Subsequences Time Limit: 1 Sec   ...

  8. mac上访问samba服务器

    打开safari输入smb://ip,回车后出现输入用户名密码对话框,若是匿名则选择作为“客人”选项 例子 smb://192.168.2.3

  9. linux下JDK,tomcat的安装与环境变量配置

    先从网上下载jdk(jdk-1_5_0_02-linux-i586.rpm) ,下载后放在/home目录中,当然其它地方也行. 进入安装目录#cd /home#cp jdk-1_5_0_02-linu ...

  10. USB枚举过程的详细流程

    USB枚举过程的详细流程 用户将一个USB设备插入USB端口,主机为端口供电,设备此时处于上电状态.主机检测设备.1>Hub使用中断通道将事件报告给Host.2>Host发送Get_Por ...