CSS3-web fonts

 

 

Advantage web fonts

Unlike web font font-family font specified directly client, web font a font can be used in a case where a client does not have fonts installed

font format

format	format	compatibility
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+

Compatibility not quite the same as each browser, so when you set the best settings on all formats

FONTKE Online Font Converter
Ali online WEB fonts

@ Font-face writing

Example:

@font-face{
	font-family:"fangzhengdahei";	/* 自定义字体名 */
	src:url("方正大黑简体.ttf");	/* 字体路径 */
}
html{font-family:"fangzhengdahei"}	/* 引用 */

format:

@font-face{
	font-family:<webFontName>;
	src:<source>[format][,<source>[format]][...];
	[font-weight:]	/* 粗细 */
	[font-style:]	/* 样式 */
	[font-stretch:]	/* 如何拉伸 */
	[unicode-rabge:]	/* 支持的unicode范围 */
}

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

Use the Fonts icon

Common way

1. From a iconfont.cn download a font icon
2. With a @font-facestatement font
3. To use an icon set object font-familyproperties
4. The use of icons, for example:<span class="iconfont">&#xec7f</span>

Pseudo-element method (recommended)

Step 3 above with the following:

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

Step 4:

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