2023年8月1日发(作者：)

字体图标浅析——什么是字体图标？如何⽣成？怎么使⽤？⽬录什么是字体图标？说起字体图标，那就不得不提及 了。相信⼤家都⽤过 Font Awesome 吧！只要我们在项⽬中引⼊ Font Awesome，通过给元素标签设置对应的class，就可以在页⾯上显⽰出图⽚来。是不是很神奇很⽅便呢！要想了解 Font Awesome 为什么能做到这样的效果，我们就需要去了解字体图标。实际上，Font Awesome 就是⼀个字体图标库。字体图标在讲字体图标前，我们要先看⼀下字体-Font。字体-Font说到字体，我们优先想到的场景可能是在编写 word ⽂档时，通过设定不同的字体来让⼀个⽂字拥有不⼀样的“外观”。如下：改变字体，就可以改变⽂字的外观。这是⼤家公认的。那字体是如何让⽂字表现出不同的“外观”的呢？这就需要进⼀步了解字体的⼯作原理了。字体的⼯作原理如果对《》所了解，那你应该知道：在计算机中，所有的数据都是以代码的形式表⽰。所以，⽂字在计算机中实际上是⼀串⼆进制的编码。⾮常粗浅的概况计算机显⽰⽂字的流程：当计算机要显⽰⽂字时，就会拿着⽂字的编码到字体（font）中查找对应的字形（glyph），然后在屏幕中输出查找出来的字形（glyph）。通过对计算机⽂字显⽰流程的了解，我们可以推测出：字体实际是⼀个“编码-字形（glyph）”映射表。所以，只要我们为⽂字编码设计不同的**字形（glyph）**就可以让⽂字表现出来不同的外观了。字体图标的原理Font Awesome 官⽹对⾃⼰有这样⼀段描述：Font Awesome 字体为您提供可缩放⽮量图标,它可以被定制⼤⼩、颜⾊、阴影以及任何可以⽤CSS的样式。Font Awesome 通过这段话明确指出了⾃⼰本⾝也是⼀种字体（font）。其实字体图标是⼀种特殊字体。前⾯我们已经明确了：字体是⼀个“编码-字形（glyph）”映射表，字形（glyph）是单个字符的外观形态。如果我们把**字形（glyph）**设计成想要图标。那么我们就可以像使⽤⽂字⼀样使⽤图标了。字体图标的本质：字体图标是⼀种特殊的字体，这种字体是⼀个“编码-图标字形（glyph）”的映射表。字体图标的优缺点优点：借助字体图标，我们可以如同操作⽂字⼀样操作字体图标。如，颜⾊的切换、⼤⼩的改变。可以将多个图标整合到⼀个字体⽂件中，从⽽减少⽹页的请求次数。字体图标是“雪碧图”的良好替代品。相较于“雪碧图”，字体图标的使⽤更加⽅便、简单、快捷。对字体图标进⾏放⼤不会出现失真、缩⼩不会浪费掉像素点缺点：由于字体图标本质上就是⽂字，所以字体图标不能像图⽚那样有着丰富多彩的颜⾊，它只能是单⾊或者渐变⾊。字体图标不能像图⽚⼀样预览，只能在页⾯上渲染出来后才能看到具体的形状。怎么⽣成字体图标图⽚⽣成字体图标，只⽀持 svg 格式的图⽚。如果原图的格式不是svg，需要先将图⽚转为svg格式。第⼀步：其他图⽚转为 svg 格式图⽚将其他格式的图⽚转为 svg 图⽚的⽅法在有⽹上有许多⽹站提供这个功能。如/cn/此外，我们还可以借助 ps 实现格式的转换。第⼆步：svg 图⽚⽣成为字体图标这⾥推荐两个⽹站IcoMoon 使⽤介绍IcoMoon 是⼀个外国⽹站，可能速度有点慢，不过IcoMoon 有个好处就是不⽤注册也可以直接使⽤。1. ⾸先，进⼊ IcoMoon ⾸页，点击右上⾓的紫⾊按钮“IcoMoon App”，进⼊“项⽬管理”页⾯2. 点击左上⾓的菜单按钮，选择“New Empty Set”，新建⼀个新的图标集合3. 点击新建图标集合(Set)的右上⾓菜单，选择“Import to Set”，上传你的 svg 图⽚4. 点击上传成功的图⽚进⾏选中操作，然后点击底部的浮动菜单栏中的“Generate Font”，进⼊字体图标⽣成页5. 在字体图标⽣成页设置class等（也可以直接使⽤默认的）6. 点击底部的浮动菜单的“Download”按钮，即可⽣成字体图标并下载到本地。Iconfont-阿⾥巴巴⽮量图标库Iconfont 是我们国内的⽹站，是⼀个社区⽹站，在上⾯有许多优质好看的⾮商⽤免费图标。要想使⽤ IconFont，必须要注册⼀个账号。步骤如下：1. 进⼊ Iconfont ⾸页，登录注册。点击右上⾓的“上传”图标进⼊上传页⾯2. 上传 svg 图⽚3. ⿏标浮动到你上传成功的图⽚，在弹出的菜单中点击”购物车“图标选项4. 打开右侧的”购物车“抽屉弹窗，点击底部的”下载代码“按钮，即可⽣成字体图标，并下载成功。字体图标怎么⽤现在我们已经拿到了字体图标源码，接下来就是要在项⽬使⽤字体图标了。字体图标的使⽤只要四步即可：将字体添加到项⽬中通过 CSS 将字体导⼊项⽬,并配置相应的 CSS class，将 CSS 引⽤到项⽬中通过 class 在 html 中添加字体图标其实，在下载好的字体图标⽂件中已经替我们完成了⼆步，我们只需将主要的⽂件复制进项⽬中即可。这⾥的主要⽂件主要有两种，字体⽂件以及css。下⾯以 Iconfont 导出的字体图标为例：我们只需要将和复制到项⽬即可。注意：尽管我们不需要在项⽬中添加⽂件就可以正常使⽤字体图标了。但是为了便于以后的维护以及查找，建议⼀同将复制到项⽬中。接下来，我们只需要在 HTML 中引⼊就可以使⽤这个字体⾥⾯的字体图标了。字体的 CSS 代码的说明⼀般的，我们不需要对字体的 CSS 代码做任何改动。或者应该说，最好不要做改动。因为如果改动不对，就会造成字体图标的失效。但是了解⾥⾯的配置，以及哪些东西可以改动，也是很有必要的。下⾯，我们以 为例。看看⾥⾯到底长什么样⼦。/* *

通过 @font-face

指定字体，也就是注册字体 */@font-face { font-family: "iconfont"; /*

设置字体名 */

/*

*

字体⽂件的位置，如果你的字体⽂件和CSS相对位置发⽣改变，应该同步修正，format

⽤于指定字体⽂件的格式 * src

可添加多个字体⽂件，这是为了保证兼容性。CSS

解析是从上往下解析的，如果前⾯的字体⽂件不被浏览器 *

⽀持，就会往下解析另⼀个字体⽂件，直⾄找到可⽤的字体⽂件。 *

写法如下： * src: url('?#iefix') format('embedded-opentype'), * url('') format('woff'), * url('') format('truetype'), * url('#defineName') format('svg'); */ src: url('?t=63') format('truetype');

}/* *

字体的启⽤ *

当标签含有类 iconfont

时，强制使⽤ iconfont

字体

*/.iconfont { /* * font-family

⽤于声明使⽤ iconfont

字体，font-family

的值必须与 @font-face

属性 font-family

的值保持⼀致。如果对其中⼀ *

个改动了另⼀个也要⼀并修改。⼀般的，不建议修改

*/ font-family: "iconfont" !important;

font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; /*

字体锯齿优化属性，详见：/p/6f022c65775f */ -moz-osx-font-smoothing: grayscale;}/* *

字体图标的启⽤ * content

⽤于声明，要使⽤ iconfont

字体中，编码为 ef67

的字形glyph（字体图标）。iconfont

字体中的字体图标编码可以再

中查询。 *

类名可以改变，不过不建议修改。因为它是与

的值以及 Iconfont

⽹站中的图标名保持⼀致的。修改了将会导致⼀致性遭到破坏，不 *

便于维护 */.icon-aichong02:before { content: "ef67";}通过上⾯的 CSS 说明，我们有了⼤致的理解。同时，我们也可以推断出如何在 HTML 中使⽤字体图标了字体图标在 HTML 中使⽤写法解析添加多个字体⽂件有些时候，我们可能需要在项⽬中添加多个字体⽂件。这时候有两种处理⽅法：1. 多套字体分别单独引⼊2. 将每套字体的css合并到⼀个⽂件中@font-face { font-family: "iconfont"; /*

设置字体名 */ src: url('?t=63') format('truetype');

}@font-face { font-family: "iconfont"; /* Project id */ src: url('?t=80') format('truetype');}.iconfont { font-family: "iconfont" !important;

font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; /*

字体锯齿优化属性，详见：/p/6f022c65775f */ -moz-osx-font-smoothing: grayscale;}.icon-aichong02:before { content: "ef67";}.icon-date:before { content: "e609";}注意：尽管可以添加多个字体⽂件，不过不建议这样做。因为字体⽂件过多，就会增加静态资源的请求次数。应该将所有的字体图标合并⽣成为⼀个字体⽂件。结语以上就是关于字体图标的解析了。其实关于字体的图标的使⽤⽅法，在下载的⽂件中也有案例展⽰出来的。例如 Iconfont 的demo_ ⽂件。在浏览器打开后，你就可以看到上⾯给出了当前字体⽂件的使⽤⽅法。⽽且还给出了三种使⽤⽅法：UnicodeFont classSymbol因为 Font class ⽅法是⽬前使⽤最为⼴泛的的，且⼤多数的UI组件框架也是使⽤这种⽅法，所以本⽂就只讲了 Font class ⽅法。如果对那两种⽐较感兴趣，可以⾃⾏了解。希望这篇⽂章能帮助你。其中可能存在错误点，见谅。参考

2023年8月1日发(作者：)

字体图标浅析——什么是字体图标？如何⽣成？怎么使⽤？⽬录什么是字体图标？说起字体图标，那就不得不提及 了。相信⼤家都⽤过 Font Awesome 吧！只要我们在项⽬中引⼊ Font Awesome，通过给元素标签设置对应的class，就可以在页⾯上显⽰出图⽚来。是不是很神奇很⽅便呢！要想了解 Font Awesome 为什么能做到这样的效果，我们就需要去了解字体图标。实际上，Font Awesome 就是⼀个字体图标库。字体图标在讲字体图标前，我们要先看⼀下字体-Font。字体-Font说到字体，我们优先想到的场景可能是在编写 word ⽂档时，通过设定不同的字体来让⼀个⽂字拥有不⼀样的“外观”。如下：改变字体，就可以改变⽂字的外观。这是⼤家公认的。那字体是如何让⽂字表现出不同的“外观”的呢？这就需要进⼀步了解字体的⼯作原理了。字体的⼯作原理如果对《》所了解，那你应该知道：在计算机中，所有的数据都是以代码的形式表⽰。所以，⽂字在计算机中实际上是⼀串⼆进制的编码。⾮常粗浅的概况计算机显⽰⽂字的流程：当计算机要显⽰⽂字时，就会拿着⽂字的编码到字体（font）中查找对应的字形（glyph），然后在屏幕中输出查找出来的字形（glyph）。通过对计算机⽂字显⽰流程的了解，我们可以推测出：字体实际是⼀个“编码-字形（glyph）”映射表。所以，只要我们为⽂字编码设计不同的**字形（glyph）**就可以让⽂字表现出来不同的外观了。字体图标的原理Font Awesome 官⽹对⾃⼰有这样⼀段描述：Font Awesome 字体为您提供可缩放⽮量图标,它可以被定制⼤⼩、颜⾊、阴影以及任何可以⽤CSS的样式。Font Awesome 通过这段话明确指出了⾃⼰本⾝也是⼀种字体（font）。其实字体图标是⼀种特殊字体。前⾯我们已经明确了：字体是⼀个“编码-字形（glyph）”映射表，字形（glyph）是单个字符的外观形态。如果我们把**字形（glyph）**设计成想要图标。那么我们就可以像使⽤⽂字⼀样使⽤图标了。字体图标的本质：字体图标是⼀种特殊的字体，这种字体是⼀个“编码-图标字形（glyph）”的映射表。字体图标的优缺点优点：借助字体图标，我们可以如同操作⽂字⼀样操作字体图标。如，颜⾊的切换、⼤⼩的改变。可以将多个图标整合到⼀个字体⽂件中，从⽽减少⽹页的请求次数。字体图标是“雪碧图”的良好替代品。相较于“雪碧图”，字体图标的使⽤更加⽅便、简单、快捷。对字体图标进⾏放⼤不会出现失真、缩⼩不会浪费掉像素点缺点：由于字体图标本质上就是⽂字，所以字体图标不能像图⽚那样有着丰富多彩的颜⾊，它只能是单⾊或者渐变⾊。字体图标不能像图⽚⼀样预览，只能在页⾯上渲染出来后才能看到具体的形状。怎么⽣成字体图标图⽚⽣成字体图标，只⽀持 svg 格式的图⽚。如果原图的格式不是svg，需要先将图⽚转为svg格式。第⼀步：其他图⽚转为 svg 格式图⽚将其他格式的图⽚转为 svg 图⽚的⽅法在有⽹上有许多⽹站提供这个功能。如/cn/此外，我们还可以借助 ps 实现格式的转换。第⼆步：svg 图⽚⽣成为字体图标这⾥推荐两个⽹站IcoMoon 使⽤介绍IcoMoon 是⼀个外国⽹站，可能速度有点慢，不过IcoMoon 有个好处就是不⽤注册也可以直接使⽤。1. ⾸先，进⼊ IcoMoon ⾸页，点击右上⾓的紫⾊按钮“IcoMoon App”，进⼊“项⽬管理”页⾯2. 点击左上⾓的菜单按钮，选择“New Empty Set”，新建⼀个新的图标集合3. 点击新建图标集合(Set)的右上⾓菜单，选择“Import to Set”，上传你的 svg 图⽚4. 点击上传成功的图⽚进⾏选中操作，然后点击底部的浮动菜单栏中的“Generate Font”，进⼊字体图标⽣成页5. 在字体图标⽣成页设置class等（也可以直接使⽤默认的）6. 点击底部的浮动菜单的“Download”按钮，即可⽣成字体图标并下载到本地。Iconfont-阿⾥巴巴⽮量图标库Iconfont 是我们国内的⽹站，是⼀个社区⽹站，在上⾯有许多优质好看的⾮商⽤免费图标。要想使⽤ IconFont，必须要注册⼀个账号。步骤如下：1. 进⼊ Iconfont ⾸页，登录注册。点击右上⾓的“上传”图标进⼊上传页⾯2. 上传 svg 图⽚3. ⿏标浮动到你上传成功的图⽚，在弹出的菜单中点击”购物车“图标选项4. 打开右侧的”购物车“抽屉弹窗，点击底部的”下载代码“按钮，即可⽣成字体图标，并下载成功。字体图标怎么⽤现在我们已经拿到了字体图标源码，接下来就是要在项⽬使⽤字体图标了。字体图标的使⽤只要四步即可：将字体添加到项⽬中通过 CSS 将字体导⼊项⽬,并配置相应的 CSS class，将 CSS 引⽤到项⽬中通过 class 在 html 中添加字体图标其实，在下载好的字体图标⽂件中已经替我们完成了⼆步，我们只需将主要的⽂件复制进项⽬中即可。这⾥的主要⽂件主要有两种，字体⽂件以及css。下⾯以 Iconfont 导出的字体图标为例：我们只需要将和复制到项⽬即可。注意：尽管我们不需要在项⽬中添加⽂件就可以正常使⽤字体图标了。但是为了便于以后的维护以及查找，建议⼀同将复制到项⽬中。接下来，我们只需要在 HTML 中引⼊就可以使⽤这个字体⾥⾯的字体图标了。字体的 CSS 代码的说明⼀般的，我们不需要对字体的 CSS 代码做任何改动。或者应该说，最好不要做改动。因为如果改动不对，就会造成字体图标的失效。但是了解⾥⾯的配置，以及哪些东西可以改动，也是很有必要的。下⾯，我们以 为例。看看⾥⾯到底长什么样⼦。/* *

通过 @font-face

指定字体，也就是注册字体 */@font-face { font-family: "iconfont"; /*

设置字体名 */

/*

*

字体⽂件的位置，如果你的字体⽂件和CSS相对位置发⽣改变，应该同步修正，format

⽤于指定字体⽂件的格式 * src

可添加多个字体⽂件，这是为了保证兼容性。CSS

解析是从上往下解析的，如果前⾯的字体⽂件不被浏览器 *

⽀持，就会往下解析另⼀个字体⽂件，直⾄找到可⽤的字体⽂件。 *

写法如下： * src: url('?#iefix') format('embedded-opentype'), * url('') format('woff'), * url('') format('truetype'), * url('#defineName') format('svg'); */ src: url('?t=63') format('truetype');

}/* *

字体的启⽤ *

当标签含有类 iconfont

时，强制使⽤ iconfont

字体

*/.iconfont { /* * font-family

⽤于声明使⽤ iconfont

字体，font-family

的值必须与 @font-face

属性 font-family

的值保持⼀致。如果对其中⼀ *

个改动了另⼀个也要⼀并修改。⼀般的，不建议修改

*/ font-family: "iconfont" !important;

font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; /*

字体锯齿优化属性，详见：/p/6f022c65775f */ -moz-osx-font-smoothing: grayscale;}/* *

字体图标的启⽤ * content

⽤于声明，要使⽤ iconfont

字体中，编码为 ef67

的字形glyph（字体图标）。iconfont

字体中的字体图标编码可以再

中查询。 *

类名可以改变，不过不建议修改。因为它是与

的值以及 Iconfont

⽹站中的图标名保持⼀致的。修改了将会导致⼀致性遭到破坏，不 *

便于维护 */.icon-aichong02:before { content: "ef67";}通过上⾯的 CSS 说明，我们有了⼤致的理解。同时，我们也可以推断出如何在 HTML 中使⽤字体图标了字体图标在 HTML 中使⽤写法解析添加多个字体⽂件有些时候，我们可能需要在项⽬中添加多个字体⽂件。这时候有两种处理⽅法：1. 多套字体分别单独引⼊2. 将每套字体的css合并到⼀个⽂件中@font-face { font-family: "iconfont"; /*

设置字体名 */ src: url('?t=63') format('truetype');

}@font-face { font-family: "iconfont"; /* Project id */ src: url('?t=80') format('truetype');}.iconfont { font-family: "iconfont" !important;

font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; /*

字体锯齿优化属性，详见：/p/6f022c65775f */ -moz-osx-font-smoothing: grayscale;}.icon-aichong02:before { content: "ef67";}.icon-date:before { content: "e609";}注意：尽管可以添加多个字体⽂件，不过不建议这样做。因为字体⽂件过多，就会增加静态资源的请求次数。应该将所有的字体图标合并⽣成为⼀个字体⽂件。结语以上就是关于字体图标的解析了。其实关于字体的图标的使⽤⽅法，在下载的⽂件中也有案例展⽰出来的。例如 Iconfont 的demo_ ⽂件。在浏览器打开后，你就可以看到上⾯给出了当前字体⽂件的使⽤⽅法。⽽且还给出了三种使⽤⽅法：UnicodeFont classSymbol因为 Font class ⽅法是⽬前使⽤最为⼴泛的的，且⼤多数的UI组件框架也是使⽤这种⽅法，所以本⽂就只讲了 Font class ⽅法。如果对那两种⽐较感兴趣，可以⾃⾏了解。希望这篇⽂章能帮助你。其中可能存在错误点，见谅。参考