CSS3 @font-face详细用法

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了！肯定会有人问，这样的东西IE能支持吗？我告诉大家@font-face这个功能其实早在IE4就支持了，你肯定会感到惊讶。如果你看到一些英文网站或blog看到一些很漂亮的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分享。

首先我们一起来看看@font-face的语法规则：

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

取值说明

  1. YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体（下载回来的叫什么字体，这里就填什么字体名），他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
  2. source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
  3. format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,svg等；
  4. weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

兼容浏览器

说到浏览器对@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?#iefix‘) 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 */
   }

说了这么多空洞的理论知识，大家一定想自己动手试试的，实例demo:

HTML Code:

<h2 class="neuesDemo">Neues Bauen Demo</h2>

通过@font-face来定义自己的Web Font:

@font-face {
      font-family: ‘NeuesBauenDemo‘;
      src: url(‘../fonts/neues_bauen_demo-webfont.eot‘);
      src: url(‘../fonts/neues_bauen_demo-webfont.eot?#iefix‘) format(‘embedded-opentype‘),
       url(‘../fonts/neues_bauen_demo-webfont.woff‘) format(‘woff‘),
       url(‘../fonts/neues_bauen_demo-webfont.ttf‘) format(‘truetype‘),
       url(‘../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo‘) format(‘svg‘);
      font-weight: normal;
      font-style: normal;
    }

我在这里采用的是相对路径，当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到我们实际页面中去：

h2.neuesDemo {
    font-family: ‘NeuesBauenDemo‘
}

获取特殊字体：

我平时都是到Google Web Fonts和Dafont.com寻找自己需要的字体，当然网上也还有别的下载字体的地方,如：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type。前面几个链接是帮助你获取一些优美的怪异的特殊字体!

获取@font-face所需字体格式：

特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三方工具或者软件来实现，下面我给大家推荐一款我常用的一个工具fontsquirrel, 链接：http://www.fontsquirrel.com/tools/webfont-generator

使用这个在线字体格式生成工具，我们只需要上传我们下载回来的一种字体格式，就能生成其它的.eot,.woff,.ttf,.svg字体格式

时间： 2024-10-09 21:57:16

CSS3 @font-face详细用法的相关文章

css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解css. 一.字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族): “Arial”.“Times New Roman”.“宋体”.“黑体”等;font-style(字体

Display:Block 详细用法

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素. 块级元素: 动占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样子: 行内元素: 自己的

DOM Style样式对象的详细用法

DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head>     <style type="text/css">                /* 内部样式 */       h3 {color:green;}     </style>             <!-- 外部样式 style.css -->    

文件/目录权限设置命令chmod的详细用法

chmod是文件/目录权限设置的命令,在Linux中经常遇到,本博文以下总结chmod的详细用法. Linux/Unix的档案调用权限分为三级,即档案拥有者user.群组group.其他other.u表示该档案的拥有者,g表示与该档案的拥有者属于同一个群体(group)者,o表示其他以外的人,a表示这三者皆是. + 表示增加权限.- 表示取消权限.= 表示唯一设定权限. r表示可读取,w表示可写入,x表示可执行. 举例说明: (1).将档案file1.txt 设为所有人皆可读取: chmod u

mysql中游标在存储过程中的详细用法

昨天写的一个东东,分享下给大家. drop PROCEDURE  if exists sp_cleanUserData; CREATE  PROCEDURE `sp_cleanUserData`() BEGIN /*定义游标*/ declare v_dt bigint(20) default 0 ; declare v_num INT DEFAULT 0; /*游标循环到末尾时给定义的常量赋值*/ declare cur_userId   CURSOR FOR select  userId fr

Linux中find、grep命令详细用法

在linux下面工作,有些命令能够大大提高效率.本文就向大家介绍find.grep命令,他哥俩可以算是必会的linux命令,我几乎每天都要用到他们.本文结构如下: find命令 find命令的一般形式 find命令的常用选项及实例 find与xargs grep命令 grep命令的一般形式 grep正则表达式元字符集(基本集) grep命令的常用选项及实例 1.find命令 find命令是一个无处不在命令,是linux中最有用的命令之一.find命令用于:在一个目录(及子目录)中搜索文件,你可以

SplitContainer 控件详细用法（转）

1.可以将 Windows 窗体 SplitContainer 控件看作是一个复合体,它是由一个可移动的拆分条分隔的两个面板.当鼠标指针悬停在该拆分条上时,指针将相应地改变形状以显示该拆分条是可移动的.使用 SplitContainer 控件,可以创建复合的用户界面(通常,在一个面板中的选择决定了在另一个面板中显示哪些对象).这种排列对于显示和浏览信息非常有用.拥有两个面板使您可以聚合不同区域中的信息,并且用户可以轻松地使用拆分条(也称为"拆分器")调整面板的大小.另外,还可以嵌套多个

chmod和chown命令详细用法

Linux下数字表示文件的操作权限(777,755,..) Linux下,查看某路径下用(ls -l)查看所有文件的详细属性列表时,会看到文件的操作权限,类似"drwxr-xr-x"的字符串. 这串字符可以分成4段理解,结构为"d + 文件所有者操作权限 + 文件所有者所在组操作权限 + 其余人的操作权限": 1,第一段:例子中字母"d",表示文件所在目录 2,第二段:例子中字符串"rwx",表示文件所有者对此文件的操作权限

Java包(Package)的详细用法（转）

Java包(Package)的详细用法 http://wenwen.soso.com/z/q229375145.htm 当一个大型程序交由数个不同的程序人员开发时,用到相同的类名是很有可能的,那么如果发生了这样的事件我们该怎么办那?,在我们java程序开发中为了避免上述事件,提供了一个包的概念(package),那么既然有了这样一种方法能避免上述事件,那么我们怎样使用package那?,使用方法很简单我们只需要在我们写的程序第一行使用package关键字来声明一个包就行了,例如我们来声明一个名为

AWK详细用法

awk非常的优秀,运行效率高,而且代码简单,对格式化的文本处理能力超强.基本上grep和sed能干的活awk全部都能干,而且干得更好. 先来一个很爽的例子:文件a,统计文件a的第一列中是浮点数的行的浮点数的平均值.用awk来实现只需要一句话就可以搞定(当然,这个东东用python也可以很轻松的实现,只是无论如何都得新建一个文件:别妄想用bash shell来做,那可是浮点数!!!)$cat a1.021 331#.ll   442.53 6ss    7awk 'BEGIN{total = 0;