WEB 字体
1 嵌入Web字体
1.1 什么是Web字体
- 可以把字体放置在服务器上,而不受制于客户端系统字体
- 浏览器会根据指定的命令将对应的字体下载到本地缓存
- 1998年@font-face加入到css2中, 但css2.1中又被移出,css3重新加入
- IE兼容性极好
1.2 @font-face语法
格式
@font-face {
font-family: <identifier>;
src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*;
[<font>];
}
相关参数
identifier 字体名称
url 此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径
string 字体的格式,主要用来帮助浏览器识别, format(fontType)
1.3 标准写法(兼容)
@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";
}
1.4 各种字体格式的兼容性情况(附)
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+
2 字体工具
2.1 web字体定制
- https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index 阿里Web字体
- http://www.youziku.com/ 字体库网站
- https://www.ziti163.com/webfont/create.aspx 字体网
2.2 web字体转换
https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具
3 字体图标
3.1 使用字体图标的优势
- 相比位图更加清晰
- 灵活性高,更方便改变大小、颜色、风格等
- 兼容性好,低版本IE也支持
3.2 常用的字体图标库
Font Awesome http://fontawesome.dashgame.com/
Glyphicons Halfings http://glyphicons.com/
3.3 字体图标制作工具
- IcoMoon http://icomoon.io/app/#/select