前端页面 如何使用外部字体,并把字体文件大小缩小?

Question

背景: 最近在做前端页面的时候 发现和设计图写出来的样子不一样，后来发现是字体不一样。
我这边样式font-family 直接没写用的是默认的。两边字体不一样 直接写出来的样式也不一样

请问有没有什么办法可以直接把字体文件进行压缩，或者有没有什么办法可以把字体引用进来？

Answer 1

1. 使用外部字体的技术并不复杂，@font-face 引用字体文件即可
2. 但是由于中文是象形文字，所以中文字库就会很大，通常 5MB～10MB，用在网页里非常不经济
3. 如果只有少数且固定的特殊字体，可以用 字蛛 这样的工具把需要用到的文字提取出来
4. 如果无法事先确定文字内容，建议跟产品和设计协商，不要用特殊字体

Answer 2

如何使用外部字体: @font-face

选择字体,可以参考这个文章: 如何优雅的选择字体(font-family)

把字体文件大小缩小,只能在特定场景下实现,比如,设计稿上只需要"特价"二字是特殊的字体,那这种情况下,字体文件就可以非常小,除此之外,做不到把字体文件大小缩小

Answer 3

有些ui设计时候用的字体，在不同操作系统、不同游览器里面可能就没有那种字体，导致前端画出来的页面和设计稿字体差异很大
一般解决办法就是，把一些字体文件打包引入到项目，然后使用，但是这样有的字体会有侵权的风险
还有一种办法就是运用font-family这个属性，多设置一些字体，如果没有会依次向后查找。

Answer 4

可以使用 fontmin 工具。

6000 字常用中文的思源雅黑，单个字重的字体文件大小我印象中是 2.8MB。苹方是 1.8MB。对中文字体而言，这个体积很小了。如果你用 fontmin 单独处理页面用到的字，或者和 UI 协商使用图片，能把加载体积减小到几十 kb。