,第五章 CSS3 font-face字体,目标,掌握使用font-face自定义字体 了解字体图标的优缺点 如何设计字体图标,不受系统字体限制！,CSS3 字体,font-face 自定义字体 字体图标,CSS3 font-face字体,自定义字体 font-face, font-face font-family: myFirstFont; src: url(Sansation_Light.ttf), url(Sansation_Light.eot); /* IE9+ */ div font-family: myFirstFont; ,CSS3 font-face字体,font-face 自定义字体 的浏览器兼容情况 Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。 Internet Explorer 9+ 支持新的 font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。 注释：Internet Explorer 8 以及更早的版本不支持新的 font-face 规则。,CSS3 字体图标,Font Awesome 字体图标库,CSS3 字体图标,字体图标的应用,CSS3 字体图标,字体图标的好处 提高网页性能 无限放大不失真 为响应式布局提供优秀图片解决方案 字体图标的缺点 只能处理单种颜色 创作字符图标是很耗时间,CSS3 字体图标 下载,http:/pictos.cc/ http:/fico.lensco.be/ http:/tenbytwenty.com/ http:/zurb.com/playground/foundation-icons http:/symbolset.com/ http:/icomoon.io/ http:/www.entypo.com/ http:/fontello.com/ http:/www.heydonworks.com/article/an-app-icon-font http:/www.high-logic.com/font-editor/fontcreator.html,CSS3 字体图标 设计,FontCreator FontCreator 是一款易用的字体制作、字体编辑软件。它可以创建、修改 ttf, otf, ttc 格式的字体文件，并生成可在任意设备使用的标准字体文件。是Windows系统下制作编辑字体的必备软件。,总结,