CSS3——@font-face(文字字体包)
@font-face
下载外部字体包到本地,处理字体样式
我们来看是怎么用的
1 @font-face{ 2 font-family: '自定义'; 3 src: url('地址'); 4 } 5 div{ 6 font-family: '用上面自定义的名字' 7 }
在我们中文的网址中实际用到的不多,因为中文的字体包都很大,所以加载速度会大大减慢。
除非字体包里面不大,用到的东西不多
说明:
设置嵌入HTML文档的字体。
- 需要兼容当前的主流浏览器,需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
- 嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
- .eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。
- 未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。
- 示例:使用一个全浏览器兼容的自定义字体
1 @font-face { 2 font-family: 'diyfont'; 3 src: url('diyfont.eot'); /* IE9+ */ 4 src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 url('diyfont.woff') format('woff'), /* chrome、firefox */ 6 url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 7 url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */ 8 }