持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情
使用Web Fonts
为了演示，通过如下的方式获取到了字体文件:
第一步:在字体天下网站下载一个字体
默认下载下来的是ttf文件;
第二步:使用字体;
使用过程如下:
1.将字体放到对应的目录中
2.通过@font-face来引入字体,并且设置格式
3.使用字体
注意: @font-face用于加载一个自定义的字体;
web-fonts的兼容性
我们刚才使用的字体文件是.ttf,它是TrueType字体.
在开发中某些浏览器可能不支持该字体,所以为了浏览器的兼容性问题,我们需要有对应其他格式的字体;
TrueType字体:拓展名是.ttf
OpenType/TrueType字体:拓展名是.ttf、.otf,建立在TrueType字体之上
Embedded OpenType字体:拓展名是.eot,OpenType字体的压缩版
SVG字体:拓展名是.svg、.sVgz
WOFF表示Web Open Font Format web开放字体:拓展名是.woff，建立在TrueType字体之上
这里我们提供一个网站来生产对应的字体文件:
font.qqe2.com/#暂时可用
web fonts兼容性写法
如果我们具备很强的兼容性,那么可以如下格式编写:
这被称为"bulletproof@font-face syntax (刀枪不入的@font-face语法)“:
这是Paul lrish早期的一篇文章提及后@font-face开始流行起来(Bulletproof @font-face Syntax)。
src用于指定字体资源
url指定资源的路径
format用于帮助浏览器快速识别字体的格式;
字体图标
认识字体图标
思考:字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢?
当然可以，这个就叫做字体图标。
字体图标的好处:
放大不会失真
可以任意切换颜色
用到很多个图标时，文件相对图片较小
字体图标的使用:
登录阿里icons (www.iconfont.cn/)
下载代码，并且拷贝到项目中
将字体文件和默认的css文件导入到项目中
字体图标的使用
字体图标的使用步骤:
第一步:通过link引入iconfont.css文件
第二步:使用字体图标
使用字体图标常见的有两种方式:
方式一:通过对应字体图标的Unicode来显示代码;
方式二:利用已经编写妙的class,直接使用即可;
