CSS3嵌入Web字体

一、@font-face语法

1.格式

@font-face { 
font-family: <identifier>; 
src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*; 
[<font>];
     }

2.相关参数

identifier：字体名称
url：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径
string:字体的格式，主要用来帮助浏览器识别, format(fontType)
- fontType取值：
  - truetype:.ttf
    - Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+ IE9+
  - opentype:.otf
    - Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+
  - Web Open Font Format:.woff
    - Firefox 3.5+ Chrome 6+ Safari 3.6+ Opera 11.1+ IE9+
  - embedded Open Type:.eot
    - IE4+
  - svg:.avg
    - Chrome 4+ Safari 3.1 + Opera 10+ IOS Mobile Safari 3.2+
font:定义字体相关样式
- 取值：
  - font-weight
  - font-style
  - font-size
  - font-variant
  - font-stretch

3.字体格式兼容性

@font-face {
	font-family: 'diyfont';
	src:url('diyfont.eot'); /* IE9兼容模式 */
	src:url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */
		url('diyfont.woff') format('woff'), /* chrome、firefox opera  safari  IE9+ 最佳格式 */
		url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
		url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

二、相关工具

1.Web字体定制

http://www.iconfont.cn/webfont/#!/webfont/index 阿里Web字体
http://www.youziku.com/ 字体库网站

2.Web字体转换工具

https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具

3.使用字体图标

常用的字体图标库
- 阿里图标:http://www.iconfont.cn/
- Font Awesome:http://fontawesome.dashgame.com/
- Glyphicons Halfings:http://glyphicons.com/
字体图标制作工具
- http://icomoon.io/app/#/select
- http://www.iconfont.cn/help/iconmake.html阿里图标

三、相关示例

例1.下载文字

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阿里图标</title>
	<link rel="stylesheet" href="../icon/iconfont.css">
	<style>
		body{
			font-size:100px;
		}
		i{
			font-size:150px;
			color:red;
		}
		.icon-cuowu::before{
			font-size:100px;
		}
	</style>
</head>
<body>
	
	<i class="iconfont icon-cuowu"></i>
	<i class="iconfont icon-erweima"></i>
</body>
</html>

例2.使用link引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Font Awesome</title>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style>
		.box{
			font-size:100px;
			text-shadow: 10px 10px 3px #ccc;
			font-style:oblique;
		}
	</style>
</head>
<body>
	<div class="box">
		<i class="fa fa-balance-scale"></i>
		<i class="fa fa-briefcase"></i>
	</div>
</body>
</html>