<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. 前端--关于javascript函数

    终于可以说说函数了,函数是javascript设计最出色的地方,可以说它是所有概念中最重要的一个,因为围绕函数而阐述的周边概念涵盖了javascript的方方面面,所以理解了函数可以说对javascr ...

  2. PHP学习笔记三十八【下载】

    <?php //演示下载一个图片 $file_name="SunSet.jpg"; $file_name=iconv("utf-8","gb23 ...

  3. 关于Struts2的类型转换详解

    详细出处参考:http://www.jb51.net/article/35465.htm 一.类型转换的意义 对于一个智能的MVC框架而言,不可避免的需要实现类型转换.因为B/S(浏览器/服务器)结构 ...

  4. POJ 2455 Secret Milking Machine (二分 + 最大流)

    题目大意: 给出一张无向图,找出T条从1..N的路径,互不重复,求走过的所有边中的最大值最小是多少. 算法讨论: 首先最大值最小就提醒我们用二分,每次二分一个最大值,然后重新构图,把那些边权符合要求的 ...

  5. CTL_CODE 宏 详解

    CTL_CODE宏 CTL_CODE:用于创建一个唯一的32位系统I/O控制代码,这个控制代码包括4部分组成: DeviceType(设备类型,高16位(16-31位)), Function(功能2- ...

  6. （译+原）std::shared_ptr及std::unique_ptr使用数组

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5462363.html 参考网址: http://stackoverflow.com/questions ...

  7. 利用反射动态构成sql语句

    class Program     {         static void Main(string[] args)         {             People p = new Peo ...

  8. Tango_with_django_17笔记

    1. 在update Category tabole with SlugField中,起因是url会将空格自动转换成%20,为了把url变得美观,易读,可以用slugify,它可以把空格替换为连字符( ...

  9. MySQL数据库SQL层级优化

    本篇主涉及MySQL SQL Statements层面的优化. 首先,推荐一个链接为万物之始:http://dev.mysql.com/doc/refman/5.0/en/optimization.h ...

  10. 高手总结的CSS执行顺序及其优先权问题汇总

    今天在看一本书时又看到了”CSS优 先权“这个问题,感觉这个问题还是比较重要的,也算是样式的特异性吧,尤其是在面对较多.较深层.较复杂的样式属性时,理解CSS的加权计算方法对于重写 样式属性之类的问题 ...