一、@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+
- truetype:
- fontType取值：
-
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/#/selecthttp://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>