背景
做前端会遇到使用图标的问题,虽然使用图标并不复杂,偶尔遇到需要在插件中添加图标,以及自定义图标的场景。这里深入研究下图标的实现原理,方便日后在复杂场景下搞定图标问题。
什么是font字体
最早接触的字体是word里面使用到各种字体,这些字体属于 操作系统所有。C:\Windows\Fonts目录下看到很多ttf字体的文件。如果有宋体的ttf在word中才能使用,如果没有则不能使用。不同语言的操作系统字体差别很大,所以日文操作系统的word如果放到中文操作系统时就要看字体是否存在。
我们使用fontforge打开仿宋的ttf文件,可以看到其实所有的汉字都是图形,而字体文件就是unicode作为索引的字形表。
字体文件其实就是一个以unicode作为索引的字形表。双击里面的某个字形,你可以对它进行编辑,也能猜得出来每个字形其实就是一个矢量图,因此ttf文件所表示的字库也叫矢量字库,说到这个再稍微提及一下另一种字库——点阵字库,两者最大的区别就是点阵字库可以在Console Mode(命令行模式)下被渲染出来,而矢量字库必须在Graphics Mode(图形模式)中被渲染。比如早期没有图形接口的dos系统或者某些linux终端,这些字体的索引需要靠固化到硬件驱动上点阵字库,因为早期的计算机只支持英文,这也是后来“汉卡”的由来。
@fontface
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。而CSS3之后可以用@fontface定义喜欢的字体。
- font-family定义字代名称
- src 定义字体文件位置
- format(truetype) 指的就是文件类型ttf
.ttf,.otf,.eot,不同类型的文件内容是一样的,目的是用来支持不同的浏览器。
参考连接:
https://blog.csdn.net/robocop_mao/article/details/47323911
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
使用字体图标的方法
通过fontface语法导入了字体文件,字体文件是unicode索引的字体图形库。使用字体图标就是通过字体图形的索引找到字体图形的过程。
html端
代码如下,不要想得过于神秘,就是普通的两个css样式。
<span class="icon iconfont icon-tianjiayonghu"></span>
css端
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
这里有个伪类,content代表添加的内容,\e600是图标图片的索引。也就是把添加好友图片替换显示到前端页面。而上面两个class仅仅是控制了图片显示的样式。
.icon-tianjiayonghu:before {
content: "\e600";
}
上面是font-class的方式,使用比较直观。
下图是ttf字体文件打开的样式,可以看到 0xe600的索引位置对应添加按钮的图形。
参考连接
https://my.oschina.net/codingDog/blog/1618232