前端工程师-字体图标-使用（iconfont为例）

时间  2021-04-10 标签 css html html5 web chrome canvas 浏览器 app svg 字体

前言

字体图标的使用已经很是普遍了，在本片中讲解两种使用方式：css

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

1.html标签中使用html5

2.js中使用web

3.canvas中使用chrome

B.官方推荐：symbol使用canvas

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

首先必作

1.下载图标下载好后，你们能够看到这个文件夹；app

 

 打开之后（太友好了，所有给你写好）：svg

 

 

2.将下载的文件放进须要的项目中字体

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

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

 

此处引用张鑫旭：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.html标签中使用

在标签中使用也是咱们最多见使用的方式

 2.js中使用

 

 这里附上代码：能够直接考过去验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这里的href路径要记得换成本身的路径 -->
    <link rel="stylesheet" type="text/css" href="font_ztktsv718x/iconfont.css">
</head>
<body>
<script>  
    function createIconContent(text){ let span = document.getElementById('IconContent'); if(!span){ span = document.createElement("span"); p = document.createElement("p"); p.innerText = "我是用js动态生成标签写入Unicode编码显示出来的图标：" span.id = 'IconContent';
　　　　　　　//这里的className要记得换成font-face中的font-family后起的名字 span.className = "iconfont"; // span.style.display = 'none';
 document.body.appendChild(p); document.body.appendChild(span); } span.innerText = text; }
　　//这里的编码在 createIconContent('\ue8ae'); // \u指定为Unicode编码
</script>
</body>
</html>

说明：Unicode编码能够在iconfont.css文件中找到

 3.canvas中使用

 这里附上代码：能够直接考过去验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 别忘记换路径哈 -->
    <link rel="stylesheet" type="text/css" href="font_ztktsv718x/iconfont.css">
</head>
<body>
<div>
    <p>我是用canvas画出来的字体图标:</p>
    <canvas id="canvas" width="1000" height="500"></canvas>
</div>

<script>
    var width = 120; // 圆角矩形的宽度
    var height = 80; // 圆角矩形的高度
    var x = 400; var y = 300; var radius = 50; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = '#1ABFFF';      //样式1
    ctx.font = '48px iconfont';  // !!!设置字体， 字体能够随意
    // 绘制内容
    ctx.fillText('\ue8ae', 10, 50); ctx.stroke(); </script>
</body>
</html> 

将来推荐：symbol使用方式

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

 如今咱们把代码写出来，而后进行一下验证，再来解释我本身看了之后疑惑的几个地方

附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>icon</title>
    <style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
    </style>
</head>
<body>
<div>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-dianyingpiao"></use>
    </svg>
</div>
<script src="font_ztktsv718x/iconfont.js"></script>
</body>
</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” 属性。通俗点说就是为屏幕识读设备过滤无关信息。

附加题外话：

 

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

回顾一下使用部分：

<!-- iconfont.css --> .icon-dianyingpiao:before { content: "\e8ae"; } <!-- icon.html -->
<span class="iconfont">&#xe8ae;</span></xmp>
<span class="iconfont icon-dianyingpiao"></span>

<script> ctx.fillText('\ue8ae', 10, 50); </script>

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

1.简单说说Unicode？

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

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

如今Unicode已经存了10万多个符号了，他能够从U+0000~U+FFFF...  目前除了Unicode字符集咱们还有ASCII字符集、GB2312字符集等。

2.html5，css，js使用的字符集Unicode与字符编码UTF-8

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

html

&#x + 16进制编码  + ；

&# + 10进制编码  + ；
css

\ + 16进制编码
js

\u + 4位16进制编码

\x + 2位16进制编码

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

字符集和编码？

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

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

联系我们 沪ICP备13005482号-10