美文网首页
如何精简字体包

如何精简字体包

作者: 超人不是凹凸曼 | 来源:发表于2019-07-14 10:35 被阅读0次

一、为什么要精简字体包

当设计师用到非系统字体时,工程师就犯难了:

「中文字体包太大了,动辄好几MB,安装包变大了,会影响用户安装的。」

「英文字体包虽然小一些,也有几十KB。一般小程序上百KB,加了字体包后加载会慢很多的。」

因为字体包的容量问题,通常工程师会说服设计师「就用系统默认的字体」吧。设计师心有不甘,还是这个字体好看啊,但也没办法,只好从了。

不是没有办法。

一种方法是用图片。这个方法仅适用于文字固定,数量不多,工作量不太大的情况。这种方法的局限性是不太通用,比如用特殊字体来显示价格,价格多少是不确定的,用图片就行不通了。

更通用的方法是精简字体包。字体包之所以容量大,是因为包含了非常多的字符。你只需要把用得着的字符挑出来,把用不着的字符去掉,就能大幅减少字体包的容量,让工程师可以接受。

今天我就给大家介绍一个如何精简字体包的方法。简单方便,设计师自己就能搞定,把精简后的字体包发给工程师,倍儿有成就感。

二、如何精简字体包

1、安装 Fontmin

推荐使用 Fontmin 。对工程师来说,功能够强大。对设计师来说,操作够友好。

2、用 Fontmin 生成精简字体包

操作步骤

操作步骤很简单:

  • 把需要用到文字写在左上角的「文本片段」区域;
  • 把 ttf 格式的字体文件拖到左下角的输入框;
  • 点击「生成」按钮;
  • 搞定!

点击「生成」按钮后,瞬间就生成好精简字体包了。

生成的结果

以中文字体「造字工房黄金时代-Light」为例,精简前有4.6MB,精简后只有5KB。

以英文字体「Core Sans D 35 Regular」为例,精简前有60kb,精简后只有4KB。

你可能会好奇,我导入的是一个 ttf 格式字体,怎么会导出6个不同格式的文件呢?

ttf 格式是最常用的字体格式,但为了兼容各种浏览器,工程师也许会用到 eot、woff 和 svg 格式,再加上 css 文件来告诉工程师怎么调用。设计师只需要把文件夹打包,发给工程师就行了。

3、字体不是 ttf 格式怎么办?

Cloud Convert 可以帮你把 otf、eot、svg、woff 格式转为 ttf 格式。

字体转化1

操作步骤如下(以 otf 格式为例):

  • 上传 otf 文件;
  • 转成 ttf 格式(大约一分钟);
  • 下载转好的 ttf 格式;
字体转化2 字体转化3

转成 ttf 格式后,就可以按照前面介绍的步骤,用 Fontmin 生成精简字体包了。

相关文章

  • 如何精简字体包

    一、为什么要精简字体包 当设计师用到非系统字体时,工程师就犯难了: 「中文字体包太大了,动辄好几MB,安装包变大了...

  • iOS 导入字体包,使用自定义字体

    项目开发中,我们会遇到使用特定字体的需求,现在我们来学习一下,如何使用导入字体包中的字体。 1、下载字体包!(自己...

  • 精简字体文件

    使用自定义字体,可以丰富页面的显示效果。用作主题的字体可以动态下载,但是框架性的字体,内置字体文件还是最好的方案,...

  • CSS如何引入字体包

    之前网站上使用了微软雅黑和平方字体,被告侵权。思源字体和平方字体差不多。而且是开源的。所以要把所有字体更换一下。 ...

  • 可爱的粗体手绘风格Mac字体包

    可爱的粗体手绘风格Mac字体包安装教程可爱的粗体手绘风格Mac字体包- Mac下载 可爱的粗体手绘风格Mac字体包...

  • swift 添加字体包到项目

    下载字体包,并添加字体包到项目中。并且点击该字体,确保target是项目本身。image.png 检查你的字体文件...

  • 正版字体素材包:The Celebration Bundle

    今天为大家推荐正版字体素材包:The Celebration Bundle,该英文字体素材包共有30款精美的字体,...

  • 现代手工脚本字体包Amanda Santiago for mac

    现代手工脚本字体包Amanda Santiago for mac是一组包含了五种字体的字体包,需要安装在mac电脑...

  • Unity字体精简-FontPruner or FontSubs

    最近一直在搞Unity客户端的优化,发现了冷加载界面的字体只用到了指定的文字,但是字体文件很大,内存消耗也很大,必...

  • iOS打印导入的字体名称

    在iOS中,使用字体,不是使用字体包的名称,而是需要导入包体在iOS中对应的名称,打印字体名称如下: 对字体的使用

网友评论

      本文标题:如何精简字体包

      本文链接:https://www.haomeiwen.com/subject/kznykctx.html