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+

因为各个浏览器兼容性都不大相同，所以在设置时最好把所有格式都设置上

FONTKE在线字体转换
阿里线上WEB字体

@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表示重复设置时优先使用 */
}

使用字体图标

普通方式

1. 从一个iconfont.cn下载一个字体图标
2. 用@font-face声明字体
3. 设置要使用图标对象的font-family属性
4. 使用图标，例如：<span class="iconfont">&#xec7f</span>

伪元素方式（建议使用）

上面第3步改为：

.iconfont::before{
	font-family:字体名字;
	content:"\ec7f";	/* 注意 &#x 改成了 \ */
}

第4步：

<span class="iconfont"></span>