HTML5培训

@font-face 字体嵌入

发布时间:2013年 08月 23日   |  作者:风吟子

一.@font-face是什么?

@font-face是连接服务器上的字体的一种方式(就像你指定图片链接一样),浏览器会根据这条指令把对应的字体文件下载到本地缓存,使用它去 修饰文本。这通常被称作字体嵌入

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中 。

@font-face这个功能早在IE4就支持了


二.使用@font-face的好处有哪些?

       如果不满足于仅仅使用Web安全字体的话,我们通常只能依赖于图片、Flash或者脚本技术才能够使用其他特定的字体,所有这些模拟技术都会对网站的可访问性和可用性造成很大的问题。从实现和维护的角度来说,它们也有很大的工作强度,某种程度上也会降低页面的性能。

       相反地,如果使用@font-face,将不会对页面上真实的内容文字造成任何影响。你不需要关心用户是否安装了Flash插件或者是否开启了

Javascript。不需要创建任何图片或者脚本,用户也无需下载它们,我们只需要编写简单的css规则即可!


三.@font-face的语法规则

@font-face {

       font-family: ;

       src:  [][, []]*;

       [font-weight: ];

       [font-style: 


 }

取值说明

YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。

                                 如“font-family:"YourWebFontName";”。

source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下

几种类型:

       1truetype(.ttf)

       2opentype(.otf)

       3WebOpenFontFormat (.woff)

       4embedded-opentype(.eot)

       5svg等;

weight和style这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。


四.浏览器的支持程度

         @font-face在各种浏览器上都得到了很好的支持,但是不同的浏览器会要求你使用不同的字体文件类型。

1、TrueType(.ttf)和OpenType(.otf)字体文件,在绝大多数浏览器上都能够正常工作。

2、Embedded Open Type(.eot)格式,.eot字体是IE专用字体,从IE4到IE8都要求你使用这种字体文件格式

         3、SVG(.svg)格式,唯一能够在ios的safari上正常工作的字体文件格式。你可能对于svg作为矢量图片格式的角色非常熟悉,但是svg文件同样能够包含字体信息,实际上,每个字体的元素确实都是由矢量绘制而成的。

4、WebOpenFontFormat (.woff) 开放字体格式,支持它的浏览器只有FireFox3.6及其之后版本、Chrome6和IE9,但是主浏览器都在添加对它的支持,很多字体厂商也开始提供这种字体格式。

注意:WOFF得到了官方的支持,有望成为标准的Web字体格式,也许在未来,它是唯一的字体格式。


五.字体格式的转换及使用

特殊字体我要怎样才能得到,那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢?那么我们就带着这些问题来一个全程完成的实例吧:

1、获取特殊字体

我们拿下面这种dh_hand_scribblies字体来说吧:

要得到dh_hand_scribblies字体,不外乎两种途径,其一找到付费网站购买字体,其二就是到免费网站DownLoad字体。

免费的字体下载地址:Google Web Fonts 和Dafont.com,当然网上也还有别的下载字体的地方。


dh_hand_scribblies下载下来后,需要把它解压缩出来。 


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

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


       然后点击Add Fonts按钮上传字体,字体上传完成后,将Agreement处的复选框打上对号,最后点击Download Your Kit 按钮。现在从

Font Squirrel下载下来的文件已经保存在你本地的电脑上了,接着只要对他进行解压缩 。在解压后的文件中就会找到 .ttf .eot .svg .woff 这四个扩展名的文件了。


3、在css样式中附上@font-face样式 

      现在@font-face所需字体已经加载到本地项目,现在在本地项目中的style.css中附上我们需要的@font-face样式 :

@font-face{

         font-family:'webfont';

         src:url('fontface/dh_hand_scribblies-webfont.eot');

         src:local(‘J'),

              url('fontface/dh_hand_scribblies-webfont.woff') format('woff'),

              url('fontface/dh_hand_scribblies-webfont.ttf') format('truetype'),

              url('fontface/dh_hand_scribblies-webfont.svg') format('svg');

        font-weight:normal;

        font-style:normal;

}

分    析:

第一行,给你链入的字体定义了一个名字,可以随意命名。

第二行,是为ie8及之前版本指明了eot版本的字体文件路径,这个声明和其他版本的字体文件声明分开的原因是:

              因为IE浏览器无法理解在src描述符里面使用逗号来分割的多个值。它会把那看作是一个路径,并将使得eot格式的文件没法在ie下起作用。

第三行:第二个src值,这次列出了针对非IE浏览器的所有字体文件。其中格式的提示,如:format(‘woff’) 是可选的,但包含这个的话能够提醒浏览

              器每个字体文件的具体格式,也能避免浏览器下载不能使用的文件,这种下载将会严重浪费宽带并降低页面速度。


注意:第二个src开始值是local(‘J’),这个笑脸表情的作用:保护ie浏览器Local() 语法是合法的css。它的真正用途是在@font-face规则中指向用户

机器上本地安装的字体版本,因此如果用户已经安装了和你嵌入的字体一样的版本,那他就无需额外下载文件了。 


4、把自己定义的字体应用到你的Web中的DOM元素上

       到这里为止,我们已经通过@font-face自定义好所需的dh_hand_scribblies字体,离最后效果只差一步了,就是把自己定义的字体应用到你的Web中的DOM元素上:


          .myfont{

                   font-family: 'webfont'

          } 


        

                 

 hello 1234567


        


注意:字体内容一般是英文或者数字,很少有支持中文的。


参考地址:http://www.cnblogs.com/rubylouvre/archive/2011/06/19/2084875.html


相关文章
提高网页加载速度---CSS
less语言特性(二) ——
less语言特性(一) ——
移动端性能大比拼:CSS
推荐大家使用的CSS书写规
CSS3的Transform-style和Perspe
其他文章
提高网页加载速度---CSS
less语言特性(二) ——
less语言特性(一) ——
JavaScript中的一些坑
移动端性能大比拼:CSS
推荐大家使用的CSS书写规
 
 

版权所有:北京博看文思科技有限责任公司|(0.0527849197388s)