前端页面 如何使用外部字体,并把字体文件大小缩小?
背景: 最近在做前端页面的时候 发现和设计图写出来的样子不一样，后来发现是字体不一样。
我这边样式font-family 直接没写用的是默认的。两边字体不一样 直接写出来的样式也不一样
请问有没有什么办法可以直接把字体文件进行压缩，或者有没有什么办法可以把字体引用进来？
回答：
- 使用外部字体的技术并不复杂，
@font-face引用字体文件即可 - 但是由于中文是象形文字，所以中文字库就会很大，通常 5MB～10MB，用在网页里非常不经济
- 如果只有少数且固定的特殊字体，可以用 字蛛 这样的工具把需要用到的文字提取出来
- 如果无法事先确定文字内容，建议跟产品和设计协商，不要用特殊字体
回答：
如何使用外部字体: @font-face
选择字体,可以参考这个文章: 如何优雅的选择字体(font-family)
把字体文件大小缩小,只能在特定场景下实现,比如,设计稿上只需要"特价"二字是特殊的字体,那这种情况下,字体文件就可以非常小,除此之外,做不到把字体文件大小缩小
回答：
有些ui设计时候用的字体，在不同操作系统、不同游览器里面可能就没有那种字体，导致前端画出来的页面和设计稿字体差异很大
一般解决办法就是，把一些字体文件打包引入到项目，然后使用，但是这样有的字体会有侵权的风险
还有一种办法就是运用font-family这个属性，多设置一些字体，如果没有会依次向后查找。
回答：
可以使用 fontmin 工具。
6000 字常用中文的思源雅黑，单个字重的字体文件大小我印象中是 2.8MB。苹方是 1.8MB。对中文字体而言，这个体积很小了。如果你用 fontmin 单独处理页面用到的字，或者和 UI 协商使用图片，能把加载体积减小到几十 kb。
以上是 前端页面 如何使用外部字体,并把字体文件大小缩小? 的全部内容， 来源链接： utcz.com/p/934194.html
