一、字体
当我们的网页想使用一些指定的字体时，例如抖音美好体。但是大多用户电脑是没有这个字体的，因此需要制作这个字体并让用户浏览器自动下载安装。可以先下载这个字体放入前端代码文件夹中：
<style>
@font-face {
font-family: "抖音美好体";
src: url("font/抖音美好体.otf");
}
<style>
这样当我们后面使用这个字体的时候，浏览器发现这是我们自己的做的字体，就会找到这个字体文件下载下来临时安装。浏览器关掉后字体就没了，下次访问再重新下载。
二、字体图标
字体是一个字一个字做出来的，都是一些图片的形式存在的。因此也可以直接把字体做成图标的样子，比如购物车图标、箭头图标、个人中心图标等等。这样就可以像用文字一样使用图标了，写不同的文字就会展示不同的图标。同时多个图标整合到了字体文件里面，也不会出现多个图标文件。由于它是字体因此可以使用CSS来渲染。
2.1、字体图标库
网上有许多别人已经做好的字体图标，可以直接拿来使用。比较常用的如阿里字体图标库, 使用这里的图标需要登录。可以将图片下载为图片格式，下载时也支持修改图标颜色。
除了下载之外，还可以把自己需要的图表添加入库(加入购物车)。然后把这些图标添加进自己的项目，就可以生成在线链接。打开后就可以看到代码内容。
@font-face {
font-family: "iconfont"; /* Project id 5153907 */
src: url('//at.alicdn.com/t/c/font_5153907_n2z93fuv68p.woff2?t=1775211231279') format('woff2'),
url('//at.alicdn.com/t/c/font_5153907_n2z93fuv68p.woff?t=1775211231279') format('woff'),
url('//at.alicdn.com/t/c/font_5153907_n2z93fuv68p.ttf?t=1775211231279') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-dianzan:before {
content: "\e8ad";
}
.icon-sousuo:before {
content: "\e60d";
}
如上所示，写了两个类选择器分别添加了一个伪元素，伪元素的内容就是一段字符编码。这样就可以在html中引用这个在线css，并且使用字体图标。
<span class="iconfont icon-dianzan"></span>
这样页面上就会出现点赞的图标。当然还可以使用CSS属性来修改它的属性，如大小颜色下划线等等。使用在线链接是不稳定的，开发时一般下载到本地使用。下载后会包含字体文件和css文件。当然除了阿里的字体图标库，还有其他的如国外的，这里我们就不介绍了，阿里的足够了。
三、SVG矢量图
除了字体图标可以无损缩放之外，svg缩放也不会失真。我们平时所用的图片都是由像素点组成的，在放大时由于像素点不够就会变的模糊。SVG使用代码定义了图片的形状、路径、颜色等属性。当放大时浏览器或者SVG图片查看器会重新计算图片路径和形状。SVG图片更加轻量化，不需要记录像素点了。因此它也仅适用于简单的图片。
通过阿里的图标库可以下载为SVG图片，在HTML中，可以通过<svg>元素来展示svg图片，如下：
<svg t="1775528244877" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5466" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M395.502 780.767c-8.246 0-14.934-6.687-14.934-14.934V250.972L837.601 64v585.334c0 8.248-6.687 14.934-14.933 14.934-8.247 0-14.933-6.686-14.933-14.934V108.492l-397.3 162.531v494.81c0 8.246-6.686 14.934-14.933 14.934z" fill="#152B3C" p-id="5467"></path><path d="M414.917 843.501c0 58.249-52.15 116.499-116.5 116.499-64.319 0-116.501-52.162-116.501-116.499 0-64.338 52.181-116.5 116.501-116.5h116.5v116.5zM842.084 688.167c0 58.25-52.15 116.5-116.5 116.5-64.319 0-116.501-52.164-116.501-116.5s52.181-116.501 116.501-116.501h116.5v116.501z" fill="#FF3B30" p-id="5468"></path><path d="M372.982 727.001v88.544c0 58.25-52.148 116.5-116.5 116.5-14.85 0-28.999-2.888-42.062-7.956C235.625 946.184 265.388 960 298.416 960c64.35 0 116.5-58.25 116.5-116.499v-116.5h-41.934zM800.15 571.666v88.545c0 58.251-52.15 116.501-116.5 116.501-14.848 0-29-2.89-42.062-7.958 21.205 22.097 50.969 35.913 83.997 35.913 64.349 0 116.5-58.25 116.5-116.5V571.666H800.15z" fill="" p-id="5469"></path><path d="M395.509 411.854c-5.884 0-11.463-3.501-13.833-9.29-3.121-7.626 0.54-16.347 8.174-19.476l427.166-174.743c7.626-3.085 16.347 0.547 19.476 8.173 3.121 7.628-0.54 16.349-8.174 19.476L401.153 410.738a14.964 14.964 0 0 1-5.644 1.116z" fill="#152B3C" p-id="5470"></path></svg>
除了使用<svg>元素之外，还可以使用<img>元素来引用它，同样的背景图片也可以使用svg图片。
「真诚赞赏，手留余香」
WangFuJie Blog
真诚赞赏，手留余香
使用微信扫描二维码完成支付
