CSS3技巧之font-face使用

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

@font-face的语法规则：

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

font-family定义字体的名称，src用来指定字体文件地址，可以是相对地址或者绝对地址。@font-face规则的各描述属性说明如下：

描述符值描述

font-familyname必需。规定字体的名称。

srcURL必需。定义字体文件的 URL。

font-stretchnormal

condensed

ultra-condensed

extra-condensed

semi-condensed

expanded

semi-expanded

extra-expanded

ultra-expanded

可选。定义如何拉伸字体。默认是 "normal"。

font-styleormal

italic

oblique

可选。定义字体的样式。默认是 "normal"。

font-weightnormal

bold

100

200

300

400

500

600

700

800

900

可选。定义字体的粗细。默认是 "normal"。

unicode-rangeunicode-range可选。定义字体支持的 UNICODE 字符范围。默认是 "U 0-10FFFF"。

字体格式有太多选择，不幸的是始终没有一个能在所有的浏览器上通用。这意味着，你必须使用多种字体的方案来保持用户跨平台的一致性体验。当前，在web上使用各种不同字体格式有：TTF、OTF、WOFF、EOT 和 SVG 。具体不同字体在各品牌浏览器的支持情况，这里不一一介绍。

在@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 */ }

使用@font-face定义自己的WEB字体如下：

@font-face { font-family: "iconfont"; src: url("../fonts/iconfont.eot"); src: url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"), url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.ttf") format("truetype"), url("../fonts/iconfont.svg#iconfont") format("svg");}

题外话

如何获取我们所需要的字体文件呢？其一，到付费网站购买字体；其二，到免费网站下载字体。当我们获取到字体，如何得到同一字体的.eot,.woff,.ttf,.svg字体格式。这里推荐一个网页工具font squirrel，它能有效帮助我们生成不同字体格式文件。比如，我们手上已经有目标字体的ttf格式文件，上传该ttf文件，font squirrel便能帮我们方便地生成其他字体格式文件。

来源：https://m.weidianyuedu.com