CSS3-web字体
CSS3-web字体
web字体优势
web字体不同于font-family直接指定用户端字体,web字体可以在用户端没有安装某字体的情况下使用某字体
字体格式
格式 | format | 兼容性 |
---|---|---|
ttf | truetype | IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+ |
otf | opentype | Firefox3.5+、Chrome4+、Safari3.1+、Opera10+、iOS Mobile、Safari4.2+ |
eot | embedded-opentype | IE4+ |
woff | woff | IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+ |
woff2 | woff2 | |
svg | svg | Chrome4+、Safari3.1+、Opera10+、iOS Mobile Safari3.2+ |
因为各个浏览器兼容性都不大相同,所以在设置时最好把所有格式都设置上
@font-face写法
示例:
@font-face{
font-family:"fangzhengdahei"; /* 自定义字体名 */
src:url("方正大黑简体.ttf"); /* 字体路径 */
}
html{font-family:"fangzhengdahei"} /* 引用 */
格式:
@font-face{
font-family:<webFontName>;
src:<source>[format][,<source>[format]][...];
[font-weight:] /* 粗细 */
[font-style:] /* 样式 */
[font-stretch:] /* 如何拉伸 */
[unicode-rabge:] /* 支持的unicode范围 */
}
兼容性写法(摘自 iconfont.cn):
@font-face{
font-family:'webfont';
src:url('webfont.eot'); /* IE9 */
src:url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
html{
font-family:'webfont' !important; /* !important表示重复设置时优先使用 */
}
使用字体图标
普通方式
- 从一个iconfont.cn下载一个字体图标
- 用
@font-face
声明字体 - 设置要使用图标对象的
font-family
属性 - 使用图标,例如:
<span class="iconfont"></span>
伪元素方式(建议使用)
上面第3步改为:
.iconfont::before{
font-family:字体名字;
content:"\ec7f"; /* 注意 &#x 改成了 \ */
}
第4步:
<span class="iconfont"></span>