CSS使用网络字体(@font-face)详析

来源：互联网发布：淘宝中老年服装模特编辑：程序博客网时间：2024/06/04 20:10

前言

以前在给网页文字设置一些好看的字体时，限于用户系统是否安装此字体，而只能使用三种方法解决，要么用通用字体，要么用图片替换文本，要么用Flash。而这几种方法却存在严重的缺陷。
现在好了，@font-face终于解决了这种使用网络字体的问题。

浏览器兼容性问题

其实，@font-face并不是CSS3才出来的属性，早在1998年它就在CSS2中使用了，但是在CSS2.1中又被除去了，CSS3又把它加了进来。

@font-face语法

@font-face {    font-family: <字体名>;    src: <字体路径> [<格式>][,<字体路径> [<格式>]]*;    [font-weight: <粗细>];    [font-style: <样式>];}

取值说明：

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

字体路径：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

格式：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

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

属性值描述 font-family name 必需。规定字体的名称。 src URL 必需。定义字体文件的 URL。 font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded 可选。定义如何拉伸字体。默认是 “normal”。 font-style normal
italic
oblique 可选。定义字体的样式。默认是 “normal”。 font-weight normal
bold
100
200
300
400
500
600
700
800
900 可选。定义字体的粗细。默认是 “normal”。 unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

@font-face小例子

<style type="text/css">@font-face {  font-family: 'Bungee Inline';  font-style: normal;  font-weight: 400;  src: local('Bungee Inline'), local('BungeeInline-Regular'), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCfn8qdNnd5eCmWXua5W-n7c.woff) format('woff');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}h2{    font-family: 'Bungee Inline';}</style>

<h2>Lecepin's Blog </h2>

效果：

代码块中，font-family和src是必需的。src中的local()表是从本地系统查找字体，如果找不到，再从url()指定的查找。

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+】。

src format属性兼容写法

关于兼容各个浏览器的兼容写法，可以参考一下一个国外大神Paul Irish写的兼容代码：

   @font-face {    font-family: '字体名';    src: url('字体名.eot'); /* IE9 兼容模式 */    src: url('字体名.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */             url('字体名.woff') format('woff'), /* 现代浏览器 */             url('字体名.ttf')  format('truetype'), /* Safari, Android, iOS */             url('字体名.svg#grablau') format('svg'); /* Legacy iOS */   }

通常来说，有.woff和eot这两种就够了。

关于这个兼容写法，请参考：Bulletproof @font-face Syntax

字体格式转换工具

当你只有一种字体格式文件的时候，可以使用如下在线格式转换工具，生成其它格式字体文件：

Font Squirrel

@font-face generator

Google Fonts

博客名称：王乐平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin

1 0