字体图标的使用已经非常广泛了，在本片中讲解两种使用方式：

A.字体图标Unicode如何表示附上使用代码

1.html标签中使用

2.js中使用

3.canvas中使用

B.官方推荐：symbol使用

注：示例均以iconfont为例 （https://www.iconfont.cn/）；

1.下载图标下载好后，大家可以看到这个文件夹；

 

 打开以后（太友好了，全部给你写好）：

 

 

2.将下载的文件放进需要的项目中

打开iconfont.css文件，大家会看到@font-face的定义（关于@font-face详细，请点击）

  1. @font-face {
  2.   font-family: "iconfont";
  3.   src: url(\'iconfont.eot?t=1593421399048\'); /* IE9 */
  4.   src: url(\'iconfont.eot?t=1593421399048#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */
  5.   url(\'data:application/x-font-woff2;charset=utf-8;base64,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\') format(\'woff2\'),
  6.   url(\'iconfont.woff?t=1593421399048\') format(\'woff\'),
  7.   url(\'iconfont.ttf?t=1593421399048\') format(\'truetype\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  8.   url(\'iconfont.svg?t=1593421399048#iconfont\') format(\'svg\'); /* iOS 4.1- */
  9. }

 

此处引用张鑫旭：https://www.cnblogs.com/hustskyking/p/manufacture-font-face-in-web.html

format 格式 Font 格式 后缀名
truetype TrueType .ttf
opentype OpenType .ttf, .oft
truetype-aat TrueType with Apple Advanced Typography extensions .ttf
embedded-opentype Embedded OpenType .eot
svg SVG Font .svg, .svgz

这堆麻烦的字体格式的出现，是因为各种浏览器对他们的支持程度不一样：

浏览器 支持类型
IE6,7,8 仅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5 支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome,Safari,Opera 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

在标签中使用也是我们最常见使用的方式

 

 这里附上代码：可以直接考过去验证：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
        <!-- 这里的href路径要记得换成自己的路径 -->
  6.     <link rel="stylesheet" type="text/css" href="font_ztktsv718x/iconfont.css">
  7. </head>
  8. <body>
  9. <script>  
  10.     function createIconContent(text){
  11.         let span = document.getElementById(\'IconContent\');
  12.         if(!span){
  13.             span = document.createElement("span");
  14.             p = document.createElement("p");
  15.             p.innerText = "我是用js动态生成标签写入Unicode编码显示出来的图标："
  16.             span.id = \'IconContent\';
    　　　　　　　//这里的className要记得换成font-face中的font-family后起的名字
  17.             span.className = "iconfont";
  18.             // span.style.display = \'none\';
  19.             document.body.appendChild(p);
  20.             document.body.appendChild(span);
  21.         }     
  22.         span.innerText = text;      
  23.     }
    　　//这里的编码在
  24.     createIconContent(\'\ue8ae\');
  25.     // \u指定为Unicode编码
  26. </script>
  27. </body>
  28. </html>

说明：Unicode编码可以在iconfont.css文件中找到

 这里附上代码：可以直接考过去验证：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 别忘记换路径哈 -->
  7.     <link rel="stylesheet" type="text/css" href="font_ztktsv718x/iconfont.css">
  8. </head>
  9. <body>
  10. <div>
  11.     <p>我是用canvas画出来的字体图标:</p>
  12.     <canvas id="canvas" width="1000" height="500"></canvas>
  13. </div>
  15. <script>
  16.     var width = 120; // 圆角矩形的宽度
  17.     var height = 80; // 圆角矩形的高度
  18.     var x = 400;
  19.     var y = 300;
  20.     var radius = 50;
  21.     var canvas = document.getElementById("canvas");
  22.     var ctx = canvas.getContext("2d");
  23.     ctx.fillStyle = \'#1ABFFF\';      //样式1
  24.     ctx.font = \'48px iconfont\';  //  !!!设置字体， 字体可以随意
  25.     //  绘制内容
  26.     ctx.fillText(\'\ue8ae\', 10, 50);  
  27.      ctx.stroke();         
  28. </script>
  29. </body>
  30. </html> 

这个为什么单独拎出来说呢，因为这种使用方式是目前最推荐的使用方式先来看看iconfont官网中的说明：

 现在我们把代码写出来，然后进行一下验证，再来解释我自己看了以后疑惑的几个地方

附上代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>icon</title>
  6.     <style type="text/css">
  7.         .icon {
  8.            width: 1em; height: 1em;
  9.            vertical-align: -0.15em;
  10.            fill: currentColor;
  11.            overflow: hidden;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div>
  17.     <svg class="icon" aria-hidden="true">
  18.         <use xlink:href="#icon-dianyingpiao"></use>
  19.     </svg>
  20. </div>
  21. <script src="font_ztktsv718x/iconfont.js"></script>
  22. </body>
  23. </html>

我不认识的地方有以下几点：

1.symbol使用是什么意思？

2.fill: currentColor;是什么意思？

3.支持多色图标了我要验证一下

4.通过什么技巧，支持像字体那样，通过font-size,color来调整样式呢？

5.aria-hidden=”true”是个什么属性？

有问题就可以一个一个解答了：

1.symbol使用是什么意思？

symbol：象征，标识的意思，这个symbol可不是ES6中的symbol，不知道是不是我百度的姿势有问题始终找不到symbol使用的精髓，所以我格式化了一下iconfont.js文件，然后我发现了我熟悉的html标签， 我立刻去百度svg symbol

很庆幸，我找到的第一篇文章就部分解决了我上面的1，2，4的问题，我们来看看这篇文章：https://www.cnblogs.com/liangxuru/p/7159850.html；请认认真真的看看这篇文章。

当我读了文章读到一半的时候，我又回头看了代码，发现，其实这一段可以不用写：

 

 

那为什么官方还要给你这一段代码呢？其实是为了让你自定义的。接下来解决剩下的问题就可以消除我的疑惑了

1.虽然我知道了，fill是svg的一个属性，那么这个currentColor肯定是个关键字，可是这个关键字是指什么呢？

下面是来自MDN的解释：此处参考文章

currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。

你这可以这么理解，CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。

好那我立刻来实践一下：首先我们写好属性如下

 

 既然currentColor代表了当前元素被应用上的color颜色值，那我们就把上面的color值放出来：

 

嗯，实践出真知，那为什么我不直接设置fill的值呢，我想应该是为了方便我们使用图标时设置颜色，因为color是个可继承的属性，即使没有设置，也可以继承父亲的颜色

3.支持多色图标了我要验证一下

 

 验证成功，因为图标是公司机密，我就用马赛克拉。

5.aria-hidden=”true”是个什么属性？

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=“true” 属性。通俗点说就是为屏幕识读设备过滤无关信息。

 

一篇文章会发现我写了三种用法都是为了显示这一个图标：

回顾一下使用部分：

  1. <!-- iconfont.css -->
  2. .icon-dianyingpiao:before {
  3.   content: "\e8ae";
  4. }
  6. <!-- icon.html -->
  7. <span class="iconfont"></span></xmp>
  8. <span class="iconfont icon-dianyingpiao"></span>
  10. <script>
  11. ctx.fillText(\'\ue8ae\', 10, 50);
  12. </script>

高亮的部分都表示上面哪个蓝色的图标的Unicode编码在html，css，js中的不同表示形式。

Unicode是一个字符集，他为每一个字符安一个编号，比如null，你的编号就是0 这个编号在Unicode中叫做”码点”（code point）

  1. U+0000 = null //U+表示紧跟在后面的十六进制数是Unicode的码点。
    U+597D = "好"

现在Unicode已经存了10万多个符号了，他可以从U+0000~U+FFFF…  目前除了Unicode字符集我们还有ASCII字符集、GB2312字符集等。

在html5，JS中使用Unicode字符集，在html5/css/js中使用的时候需要用特殊的符号进行转义，详细的可以狠狠戳这里

html

&#x + 16进制编码  + ；

&# + 10进制编码  + ；
css

\ + 16进制编码
js

\u + 4位16进制编码

\x + 2位16进制编码

关于Unicode的介绍我建议直接读阮大哥的文章，请狠狠的戳这里，还有这里，不过在这里还是要简单的介绍一下（此处的介绍均是参考阮老师的文章）

字符集是书写系统中使用的字母和符号的集合。例如，ASCII字符集、Unicode字符集。字符集中的字符作为一个或多个字节存储在计算机中。每个字节或字节序列代表一个给定的字符。

字符编码是将字符集转换为计算机可以接受的数字系统的数的规则

 

版权声明：本文为sophiaelse原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/sophiaelse/p/13209531.html