@font-face {
font-family: <identifier>;
src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*;
[<font>];
}
identifier：字体名称
url：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径
string:字体的格式，主要用来帮助浏览器识别, format(fontType)
.ttf
.otf
.woff
.eot
.avg
font:定义字体相关样式
@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- */
}
http://www.iconfont.cn/webfont/#!/webfont/index 阿里Web字体http://www.youziku.com/ 字体库网站 https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具常用的字体图标库
http://www.iconfont.cn/
http://fontawesome.dashgame.com/
http://glyphicons.com/
字体图标制作工具
http://icomoon.io/app/#/select http://www.iconfont.cn/help/iconmake.html阿里图标<!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>
<!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>以上就是CSS3嵌入Web字体的详细内容，更多关于CSS3嵌入Web字体的资料请关注九品源码其它相关文章！