自定义字体@ font-face：
@ font-face的是一个CSS规则，允许你输入自己的字体出现在网站上，即使在特定的字体在访问者的计算机上没有安装。能让客户端使用在线字体。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!--@font-face--><style>@font-face {font-family: myFont;src: url("./font/BOD_PSTC.TTF");}#test {font-family: myFont;}</style> </head><body><div id="test">小苹果little apple</div></body></html>
自定义字体图标
1.制作一套矢量图
2.将矢量图与字符进行绑定
3.使用工具或站点生成一套字体
4.最终使用
方案1
AI—画矢量图svg
Fontlab STudio----生成字体
拿到字体后，
访问在线网站/tool/webfont-generator
上传字体，下载拿到字体生成的包
方案2：
拿到矢量图后，
访问http://icomoon.io
点击IcoMoon App
点击import Icons
选中这些矢量图 generator (站点就会把每一张矢量图和字体进行了绑定)
点击dowload ,下载拿到包
使用：拿到style.css和fonts
生成的style.css是这样的：
@font-face {font-family: 'hehe';src: url('fonts/hehe.eot?7zih0y');src: url('fonts/hehe.eot?7zih0y#iefix') format('embedded-opentype'),url('fonts/hehe.ttf?7zih0y') format('truetype'),url('fonts/hehe.woff?7zih0y') format('woff'),url('fonts/hehe.svg?7zih0y#hehe') format('svg');font-weight: normal;font-style: normal;font-display: block;}[class^="icon-"], [class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family: 'hehe' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-happy:before {content: "\e9df";}.icon-wink:before {content: "\e9e7";}.icon-cool:before {content: "\e9eb";}.icon-angry:before {content: "\e9ed";}.icon-cross:before {content: "\ea0f";}.icon-checkmark:before {content: "\ea10";}
使用：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="style.css"/><style type="text/css">.test{font-size: 40px;}</style></head><body><i class="icon-happy test"></i> </body></html>
字体图标库：
/
http://icomoon.io
