CSS3 字体@fontface入门详解

小鱼儿 2023-06-04 15:58 6阅读 0赞

## 背景 ##

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

## 什么是font字体 ##

最早接触的字体是word里面使用到各种字体，这些字体属于 操作系统所有。C:\\Windows\\Fonts目录下看到很多ttf字体的文件。如果有宋体的ttf在word中才能使用，如果没有则不能使用。不同语言的操作系统字体差别很大，所以日文操作系统的word如果放到中文操作系统时就要看字体是否存在。

我们使用fontforge打开仿宋的ttf文件，可以看到其实所有的汉字都是图形，而字体文件就是unicode作为索引的字形表。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

> 字体文件其实就是一个以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的索引位置对应添加按钮的图形。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]

## 参考连接 ##

https://my.oschina.net/codingDog/blog/1618232

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: /images/20230601/198af777b0bf4800acea679e90bf4852.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/471f4a3fbfc64297929b39b3d3fcf1a6.png