小米产品页的中文字体怎么做的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3845 天前的主题，其中的信息可能已经有所发展或是发生改变。

看了小米的产盘宣传页http://www.mi.com/mipad的字体还不错，比较细
也想自己用用

一看发现font-family: FZLTXHK; 这个是方正兰亭纤黑？

css看到@font-face将字体转为base64了，大小296k，应该只包含网页要显示的字库

so，想请教一下，要完成看到自己喜欢的中文字体-->提取字库--->转为base64

有什么有效的工具和方法？

当然自己也摸索了一会，感觉有点麻烦的样子

中文字体

font

base64

26 条回复 • 2017-02-17 19:18:29 +08:00

andyhu

2014-05-17 10:11:59 +08:00

http://www.zhaozi.cn/ 楼主试下这个看看

andyhu

2014-05-17 10:21:39 +08:00

抱歉看错了，之前cufon流行的时候有过这样想法，想弄一个api生成一些字符的特殊字体。如果换做字体文件的话就不太清楚了

Ricky123

2014-05-17 10:28:49 +08:00

@andyhu 字体倒是有，主要是中文字体全字库的话都会很大，5MB以上，不适合作为webfont

不过看到小米的是把字库中需要的字给提取出来了，感觉很赞

另外现在看到太多网页都是微软雅黑，审美疲劳了。。

Ellison

2014-05-17 11:18:51 +08:00 via Android

关注下，感觉挺赞的做法

Shieffan

2014-05-17 11:22:04 +08:00 via iPhone

不知道有没有现成的工具做这个。如果能做成nginx的module就好了，返回页面前提取文字内容并加入生成字体文件，多好

Shieffan

2014-05-17 11:32:08 +08:00

发现一个服务，http://www.youziku.com/webfont/UsingMethod?fontID=46615

ChiChou

2014-05-17 11:39:44 +08:00

原理是用工具生成字体的subset，这里有Google的一个工具：
https://code.google.com/p/sfntly/

Ricky123

2014-05-17 11:42:29 +08:00

@Shieffan 字库倒不是最关键的，主要是现在如果是中文全字库的话，都特别大

想法是有如果很好的字库，能抽离出你要用的字体（做宣传，展示页）

当然用字体而不是图片的原因，是因为响应式嘛。图片显示文字的话，文字大小固定。在不同终端看都一样大小。

so 如果有小米的前端能分享一下怎么实现的就太好了 :)

jsonline

2014-05-17 11:53:20 +08:00 via Android

我觉得不如用图片来的方便

andyhu

2014-05-17 11:55:28 +08:00

试试这个
https://github.com/smilingpoplar/font-extractor

Shieffan

2014-05-17 12:04:48 +08:00 via iPhone

@Ricky123 嗯，我的意思就是这个。分析页面文字，从字库提取所需要文字并生成字体文件，就大大减小了文件大小。你看我发的那个链接，就是这种原理，g

Showfom

2014-05-17 12:12:18 +08:00 via iPhone

@sivan 这问题得请教你

Ricky123

2014-05-17 12:20:27 +08:00

@Shieffan 赞我试试

Ricky123

2014-05-17 12:30:14 +08:00

@jsonline 追求响应式字体，哈哈

Ricky123

2014-05-17 12:30:40 +08:00

@ChiChou 已用，还不错。

Perry

2014-05-17 12:34:59 +08:00

http://justfont.com/ 就是先分析页面文字再生成字体文件的

Shieffan

2014-05-17 12:52:11 +08:00 via iPhone

这东西版权问题不好解决呀，如果方正跟华文推出相关付费服务的话，应该会比较有前途吧？

lemonda

2014-05-17 13:18:06 +08:00

既然已经有中文 webfont 技术，真不知道字体商为什么不提供服务做为对现有授权方式的补充：

sparanoid

MOD

2014-05-17 14:12:41 +08:00

Dynamic subsetting:

http://blog.fonts.com/2014/04/15/faster-is-better-especially-when-working-with-large-non-latin-fonts-on-your-site/

Fonts.com 幾年前就在做這件事了

learnshare

2014-05-17 14:43:51 +08:00

版权是个大问题

Sivan

2014-05-17 19:31:50 +08:00 via iPhone

这个是跟方正合作的。我们自己通过方正的接口生成页面所需的文件字体，再转 base64。据方正的人说小米是跟方正合作的大网站里首家用这个技术的。

Sivan

2014-05-17 19:34:26 +08:00 via iPhone

@learnshare
@lemonda
@Shieffan 方正是有这个服务的，小米的网站、banner、海报等都是用的方正授权字体。

Ricky123

2014-05-17 20:44:05 +08:00

@Sivan 赞！给力

我就说那字体挺好看的
感觉不错。

lemonda

2014-05-17 21:14:33 +08:00

@Sivan
好极。
在做就好，早日开放公共服务更佳，不妄我到处嚷嚷。

Daniel65536

2014-06-09 00:51:31 +08:00 via iPad

http://bbs.themex.net/showthread.php?t=16898215

这个话题在themex上也被讨论过，在win上的工具链里头，最关键的就是使用FontShrinker字体子集生成程序，这个程序可以方便地生成一个只含有特定文字的字库，这个程序提供了非常方便的GUI

……至于命令行工具倒是有不少基于python或者其他语言的……不过都挺麻烦要涉及到fontforge之类的库……

希望这里木有禁止挖坟的规则……

tlday

2017-02-17 19:18:29 +08:00

https://github.com/fonttools/fonttools
前面的朋友说的东西在我这里都有各种问题，最后用这个达成目的，发在这里说不定对后来的人有用。
我要把一个 Mac 下提取出来的 otf 字体（ 12M ）拿出一个可用的子集，直接把 otf 后缀名改成 ttf ，然后用这个工具提取了所有数字和大小写字母以及 6 个中文字，最后得到一个 19K 的 ttf 字体，测试在 Android 手机上可用。不知道过程中有没有侵权之类的。。。另外 npm 那边有很多 ttf 转其他网络字体的工具。
应该没有禁止挖坟的规定吧。