V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Ricky123
V2EX  ›  问与答

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

  •  1
     
  •   Ricky123 · 2014-05-17 10:08:18 +08:00 · 10743 次点击
    这是一个创建于 3842 天前的主题,其中的信息可能已经有所发展或是发生改变。
    看了小米的产盘宣传页http://www.mi.com/mipad的字体还不错,比较细
    也想自己用用

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

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

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

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

    当然自己也摸索了一会,感觉有点麻烦的样子
    26 条回复    2017-02-17 19:18:29 +08:00
    andyhu
        1
    andyhu  
       2014-05-17 10:11:59 +08:00   ❤️ 1
    http://www.zhaozi.cn/ 楼主试下这个看看
    andyhu
        2
    andyhu  
       2014-05-17 10:21:39 +08:00
    抱歉看错了,之前cufon流行的时候有过这样想法,想弄一个api生成一些字符的特殊字体。如果换做字体文件的话就不太清楚了
    Ricky123
        3
    Ricky123  
    OP
       2014-05-17 10:28:49 +08:00
    @andyhu 字体倒是有,主要是中文字体全字库的话都会很大,5MB以上,不适合作为webfont

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

    另外现在看到太多网页都是微软雅黑,审美疲劳了。。
    Ellison
        4
    Ellison  
       2014-05-17 11:18:51 +08:00 via Android
    关注下,感觉挺赞的做法
    Shieffan
        5
    Shieffan  
       2014-05-17 11:22:04 +08:00 via iPhone
    不知道有没有现成的工具做这个。如果能做成nginx的module就好了,返回页面前提取文字内容并加入生成字体文件,多好
    Shieffan
        6
    Shieffan  
       2014-05-17 11:32:08 +08:00   ❤️ 1
    ChiChou
        7
    ChiChou  
       2014-05-17 11:39:44 +08:00   ❤️ 1
    原理是用工具生成字体的subset,这里有Google的一个工具:
    https://code.google.com/p/sfntly/
    Ricky123
        8
    Ricky123  
    OP
       2014-05-17 11:42:29 +08:00
    @Shieffan 字库倒不是最关键的,主要是现在如果是中文全字库的话,都特别大

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

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

    so 如果有小米的前端能分享一下怎么实现的就太好了 :)
    jsonline
        9
    jsonline  
       2014-05-17 11:53:20 +08:00 via Android
    我觉得不如用图片来的方便
    andyhu
        10
    andyhu  
       2014-05-17 11:55:28 +08:00   ❤️ 1
    Shieffan
        11
    Shieffan  
       2014-05-17 12:04:48 +08:00 via iPhone   ❤️ 1
    @Ricky123 嗯,我的意思就是这个。分析页面文字,从字库提取所需要文字并生成字体文件,就大大减小了文件大小。你看我发的那个链接,就是这种原理,g
    Showfom
        12
    Showfom  
       2014-05-17 12:12:18 +08:00 via iPhone
    @sivan 这问题得请教你
    Ricky123
        13
    Ricky123  
    OP
       2014-05-17 12:20:27 +08:00
    @Shieffan 赞 我试试
    Ricky123
        14
    Ricky123  
    OP
       2014-05-17 12:30:14 +08:00
    @jsonline 追求响应式字体,哈哈
    Ricky123
        15
    Ricky123  
    OP
       2014-05-17 12:30:40 +08:00
    @ChiChou 已用,还不错。
    Perry
        16
    Perry  
       2014-05-17 12:34:59 +08:00   ❤️ 2
    http://justfont.com/ 就是先分析页面文字再生成字体文件的
    Shieffan
        17
    Shieffan  
       2014-05-17 12:52:11 +08:00 via iPhone
    这东西版权问题不好解决呀,如果方正跟华文推出相关付费服务的话,应该会比较有前途吧?
    lemonda
        18
    lemonda  
       2014-05-17 13:18:06 +08:00
    既然已经有中文 webfont 技术,真不知道字体商为什么不提供服务做为对现有授权方式的补充:
    sparanoid
        19
    sparanoid  
    MOD
       2014-05-17 14:12:41 +08:00   ❤️ 1
    learnshare
        20
    learnshare  
       2014-05-17 14:43:51 +08:00
    版权是个大问题
    Sivan
        21
    Sivan  
       2014-05-17 19:31:50 +08:00 via iPhone   ❤️ 2
    这个是跟方正合作的。我们自己通过方正的接口生成页面所需的文件字体,再转 base64。据方正的人说小米是跟方正合作的大网站里首家用这个技术的。
    Sivan
        22
    Sivan  
       2014-05-17 19:34:26 +08:00 via iPhone   ❤️ 2
    @learnshare
    @lemonda
    @Shieffan 方正是有这个服务的,小米的网站、banner、海报等都是用的方正授权字体。
    Ricky123
        23
    Ricky123  
    OP
       2014-05-17 20:44:05 +08:00
    @Sivan 赞!给力

    我就说那字体挺好看的
    感觉不错。
    lemonda
        24
    lemonda  
       2014-05-17 21:14:33 +08:00
    @Sivan
    好极。
    在做就好,早日开放公共服务更佳,不妄我到处嚷嚷。
    Daniel65536
        25
    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
        26
    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 转其他网络字体的工具。
    应该没有禁止挖坟的规定吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1044 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:27 · PVG 03:27 · LAX 11:27 · JFK 14:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.