<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. MongoDB学习笔记05

    count 返回集合中文档数量文档数量 db.foo.count() db.foo.count({}) distinct用来找出给定键的所有不同的值,使用时必须指定集合和键 db.runCommand ...

  2. oc基础 不可变字符串的创建和使用

    oc基础  不可变字符串的创建和使用 简介:下面都是字符串基本用法. 1.字符串的创建 //创建oc常量字符串 NSString *str=@"hello world!"; NSL ...

  3. YUI Array 之some(检测|any)

    YUI原码 YUI someYArray.some = Lang._isNative(Native.some) ? function (array, fn, thisObj) { return Nat ...

  4. contentProvider内容提供者

    contentProvider内容提供者 15. 四 / android基础 / 没有评论   步骤 权限在application中注册 Source code     <provider an ...

  5. ASP.NET MVC5 生成验证码

    1 ValidateCode.cs using System; using System.Drawing; using System.Drawing.Drawing2D; using System.D ...

  6. Azure File文件共享(6):使用Python开发

    Azure文件共享服务提供了多种方式的访问接口,包括Powershell,.Net, Java, Python等等,本章主要介绍如何使用Python来访问Azure File存储. 关于Python环 ...

  7. 简单的html5布局

    <!DOCTYPE html><html><meta charset="utf-8"><head><style>html ...

  8. vs 2013打开vs 2008解决方案问题解决

    同时安装了vs 2013和vs 2008后,双击vs 2008的解决方案,会出现直接用vs 2013打开的问题. 解决以上问题: 右键选择VS 2008的解决方案,选择开发方式->选择默认程序, ...

  9. CSS基础-引入方法，选择器，继承

    一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...

  10. Linux系统目录/bin /sbin /usr/bin /usr/sbin和/lib /usrlib的一些分析

    其实就是相当于转载了. /bin,/sbin,/usr/sbin,/usr/bin 目录 这些目录都是存放命令的,首先区别下/sbin和/bin: 从命令功能来看,/sbin 下的命令属于基本的系统命 ...