”尽管囿于现实漩涡,心中却仍是此间少年”。 ​​​​

那高高的天空呐
那高高的天空呐

应用场景

比如说今天产品一开心,告诉你要用苹方字体了,why?好好的为什么改字体,没事,我改.长得帅总要承认他人感受不到的痛楚.
有时候,我们想给网站的 Logo、标题、活动页等的中文自定义字体,我们可以使用 @font-face 引入 Web 字体,但是完整的中文字体库都是 8M 10M ,加载性能非常差,所以我们提取部分我们使用到的字体,这样可以把字体文件变成几十kb或者跟小。fontsquirrel是网上找的,千篇一律,效果还差.Fontmin字蛛就屌炸天了

fontsquirrel

这是一个国外的网站,不翻墙,也过的去fontsquirrel
这个网站能帮你转换字体格式,给他一个ttf格式,他能还你一个eot,svg,woff,woff2.这样子你就不怕只有一个ttf而导致面对个别野鸡浏览器不兼容的问题了,具体看他的配置把,想要啥要啥.而且压缩好他会帮你自动生成一个css引用字体,看起来还好,但是很鸡肋,只能帮你转换字体格式,压缩,引用之类的功能,向自动截取你需要的字体存入字体文件里就办不到了,他呢大概长下面这样

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
font-family: "xxx";
src: url("/fonts/xxx.eot"); /* IE9 */
src: url("/fonts/xxx.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("/fonts/xxx.woff") format("woff"), /* chrome, firefox */
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url("/fonts/xxx.ttf") format("truetype"),
url("/fonts/xxx.svg#xxx") format("svg"); /* iOS 4.1- */
font-style: normal;
font-weight: normal;
}

Fontmin

首先推官网Fontmin,这位老哥就厉害了,有终端版和应用版2种版本.

Fontmin终端版通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。也可以通过应用版手动添加需要的字体.

  • 终端版
    1
    npm i -g fontmin

执行上述代码就能安装,具体使用请点击官网,说的可详细了

  • 应用版
    下载地址,我用的是window版的,可方便
    window版
    window版

可以很清晰的看到,左上写需要用到的字,坐下拉入字体,右边是效果,点生成会截取你输入的字且帮你生成各种格式的字体,怕自己输麻烦就用终端版的,全自动懂什么意思不

字蜘

首先送上官网字蛛,全中文了,文档也很详细,字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

愿你历经红尘,依旧能笑看人生~~~