8.1.5 CSS3文字(2)( 字体 )

font-face语法规则

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

 

1. YourWebFontName：此值指的就是你自定义的字体名称，最好使用你下载的默认字体。如 "font-family: "YourWebFontName";

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

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

 

有关字体的几种格式

一、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)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体

[ IE4+ ]

 

四、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式

[ Chrome4+, Safari3.1+, Opera10.0+, iOS Mobile Safari3.2+ ]

在@font-face中至少需要2种字体(.woff, .eot)，甚至还需要.svg等字体大道更多浏览器支持

 

参考网站：http://www.w3cplus.com/content/css3-font-face