9.1 嵌入Web字体
什么是Web字体
- 可以把字体放置在服务器上,而不受制于客户端系统字体
- 浏览器会根据指定的命令将对应的字体下载到本地缓存
- 1998年@font-face加入到css2中, 但css2.1中又被移出,css3重新加入
- IE兼容性极好
@font-face语法
格式
@font-face {
font-family: <identifier>;
src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*;
[<font>];
}
相关参数
identifier 字体名称
url 此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径
string 字体的格式,主要用来帮助浏览器识别, format(fontType)
标准写法(兼容)
@font-face {
font-family: 'diyfont';
src: url('diyfont.eot'); /* IE9兼容模式 */
src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */
url('diyfont.woff') format('woff'), /* chrome、firefox opera safari IE9+ 最佳格式 */
url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
/*使用*/
.box {
font-family: "diyfont";
}
各种字体格式的兼容性情况(附)
truetype .ttf
Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+ IE9+
opentype .otf
Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+
Web Open Font Format .woff
Firefox 3.5+ Chrome 6+ Safari 3.6+ Opera 11.1+ IE9+
embedded Open Type .eot
IE4+
svg .svg
Chrome 4+ Safari 3.1 + Opera 10+ IOS Mobile Safari 3.2+