css自定义字体font-face的兼容和使用
2016-05-04 14:52
811 查看
@Font-face目前浏览器的兼容性:
Webkit/Safari(3.2+)TrueType/OpenType TT (.ttf) 、OpenType PS (.otf);
Opera (10+)
TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg);
Internet Explorer
自ie4开始,支持EOT格式的字体文件;ie9支持WOFF;
Firefox(3.5+)
TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)
Google Chrome
TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6
由上面可以得出:.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持
语法
@font-face { [font-family: <family-name>;]? [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]? [unicode-range: <urange>#;]? [font-variant: <font-variant>;]? [font-feature-settings: normal|<feature-tag-value>#;]? [font-stretch: <font-stretch>;]? [font-weight: <weight>]; [font-style: <style>]; }
font-face 在css中具体的 使用方法
/*声明 WebFont*/ @font-face { font-family: 'pinghei'; src: url('../font/pinghei.eot'); src: url('../font/pinghei.eot?#iefix') format('embedded-opentype'), url('../font/pinghei.woff') format('woff'), url('../font/pinghei.ttf') format('truetype'), url('../font/pinghei.svg') format('svg'); font-weight: normal; font-style: normal; } /*使用指定字体*/ .test { font-family: 'pinghei'; }
相关工具介绍
font压缩工具地址:https://github.com/aui/font-spider
gulp 插件: https://github.com/aui/gulp-font-spider
grunt 插件:https://github.com/aui/grunt-font-spider
相关参考资料:
Mozilla
相关文章推荐
- CSS3选择器详解一
- css3盒子布局-定义盒子布局的位置(box-ordinary-group)
- php 时间显示转换成如:几分钟前,几天前样式
- css3盒子布局-定义布局取向(box-orient)和顺序(box-direction)
- Material Design之主题样式
- WPF通用对话框使用系统主题样式
- html 基础之行间样式,内部样式,外部样式
- CSS等高布局的7种方式
- css3高级滤镜-光照滤镜
- css3高级滤镜-切换滤镜
- css3高级滤镜-渐隐效果
- 【CSS-05】switch 效果
- CSS 定位
- [CSS]clearfix 清除浮动元素及去掉浏览器默认样式
- html中hr的各种样式使用
- ionic css类总结
- 纯css 写三角形
- CSS3圆角详解
- css行内元素有哪些?块级元素有哪些? 盒模型的哪些?
- 深入理解CSS变形transform(3d)