CSS3 字体@fontface入门详解

背景

做前端会遇到使用图标的问题，虽然使用图标并不复杂，偶尔遇到需要在插件中添加图标，以及自定义图标的场景。这里深入研究下图标的实现原理，方便日后在复杂场景下搞定图标问题。

什么是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样式。

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