V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
forsigner
V2EX  ›  程序员

设计师再也不敢说我们程序员做的界面丑了

  •  8
     
  •   forsigner · 2016-03-11 11:09:30 +08:00 · 12392 次点击
    这是一个创建于 3158 天前的主题,其中的信息可能已经有所发展或是发生改变。

    标题党了来了,哈哈

    有时候,我们想给网站的 Logo 、 Slogan 、标题、活动页等的中文自定义字体,我们可以使用 @font-face 引入 Web 字体,但是完整的中文字体库都是 8M 10M 吓死人。

    百度的 Fontmin,解决了提取部分字体的问题,他可以在 10M 的字体文件提取文字,然后把文件变成几 KB 。

    我们可以通过 Fontmin cli 或者 [Fontmin App],但是必须写脚本或者要安装,不是很方便。

    我基于 Fontmin 写了 Web App ,叫 Web-Fontmin,可以方便地提取字体,然后下载对应的 Web font 和 Style ,欢迎吐槽建议 Star 。

    Github: Web-Fontmin -- 字体子集化,在线提取你需要的字体。
    Preview: http://fontmin.forsigner.com/

    Screenshot:

    page-1
    page-2

    典型应用场景: (如自定义 blog 的 title 字体)

    fexo

    第 1 条附言  ·  2016-03-11 12:06:51 +08:00
    漂亮的免费字体下载:
    http://www.sentyfont.com/download.htm
    81 条回复    2018-09-05 10:12:31 +08:00
    likezun
        1
    likezun  
       2016-03-11 11:21:47 +08:00
    支持 ie6 吗?
    forsigner
        2
    forsigner  
    OP
       2016-03-11 11:26:25 +08:00
    @likezun 支持的
    ![imag]( )

    图片来之 font-spider
    aivier
        3
    aivier  
       2016-03-11 11:27:37 +08:00
    Adobe Typekit

    根据网页内容从服务器上获取对应的只包含网页内字符的字体
    jasperchou
        4
    jasperchou  
       2016-03-11 11:29:27 +08:00
    字体总算不是一块大石头了。。。。
    sobigfish
        5
    sobigfish  
       2016-03-11 11:43:26 +08:00
    但关键是用那么多个性的字体的同时有授权么 -。-
    finab
        6
    finab  
       2016-03-11 11:45:09 +08:00
    👍!以前贼羡慕英文能随意的使用各种字体。
    aksoft
        7
    aksoft  
       2016-03-11 11:45:15 +08:00   ❤️ 1
    还是丑。。。
    aksoft
        8
    aksoft  
       2016-03-11 11:46:19 +08:00
    不过可以。。我喜欢
    IOfeng
        9
    IOfeng  
       2016-03-11 11:48:55 +08:00
    66666
    allenhu
        10
    allenhu  
       2016-03-11 11:50:13 +08:00 via Android
    标题党
    iTakeo
        11
    iTakeo  
       2016-03-11 11:56:43 +08:00 via iPhone
    字体没有版权的用不了
    forsigner
        12
    forsigner  
    OP
       2016-03-11 12:07:22 +08:00
    @allenhu 你对了
    forsigner
        13
    forsigner  
    OP
       2016-03-11 12:07:51 +08:00
    @aivier 有免费,这个不错: http://www.sentyfont.com/download.htm
    magicolor
        14
    magicolor  
       2016-03-11 12:08:07 +08:00
    嗯 …… 还是丑 …… 布局还是不太讲究
    forsigner
        15
    forsigner  
    OP
       2016-03-11 12:08:43 +08:00
    @sobigfish 不商用的没事的吧...
    tabris17
        16
    tabris17  
       2016-03-11 12:11:41 +08:00
    能否打乱字体和编码的对应顺序?这样就可以做一个字体加密了
    realpg
        17
    realpg  
       2016-03-11 12:23:26 +08:00
    @forsigner 谁告诉你不商用就免费的……
    wawehi
        18
    wawehi  
       2016-03-11 12:29:34 +08:00
    字体上传了,下载按钮在哪儿啊?
    rubyvector
        19
    rubyvector  
       2016-03-11 12:42:32 +08:00
    挺好的东西
    auzeonfung
        20
    auzeonfung  
       2016-03-11 12:54:02 +08:00
    arens
        21
    arens  
       2016-03-11 13:13:14 +08:00
    之前用过阿里的 iconfont 的一个插件,和你的是一个意思,只包你想要特殊处理字体的字库,但这样只能用作个别地方吧,可以全文都用字库吗?
    swen
        22
    swen  
       2016-03-11 13:28:27 +08:00
    有一款插件叫 font-spider 蛮好用~可惜现在没更新了~
    forsigner
        23
    forsigner  
    OP
       2016-03-11 14:06:14 +08:00
    @realpg 我错了...
    m939594960
        24
    m939594960  
       2016-03-11 14:14:19 +08:00
    http://www.youziku.com/ 支持所有浏览器啊
    songkaiape
        25
    songkaiape  
       2016-03-11 14:15:57 +08:00
    页面做的很好看,另外问下,前端开发一般用哪些开发工具?
    bfl008
        26
    bfl008  
       2016-03-11 14:17:34 +08:00
    不丑,是丑爆了。
    zzutmebwd
        27
    zzutmebwd  
       2016-03-11 14:19:09 +08:00
    http://www.youziku.com/ 很多年前就有这个了吧
    plqws
        28
    plqws  
       2016-03-11 14:19:42 +08:00
    什么时候设计丑不丑和字体有那么大关系了?幽灵按钮配合草书字体真的是丑出 GN-Z11 星系
    forsigner
        29
    forsigner  
    OP
       2016-03-11 14:20:21 +08:00
    @wawehi 是因为我 Nginx 忘记设置 client_max_body_size ,爆上传文件过大,现在可以了再试试,谢谢提醒哈,
    Justineo
        30
    Justineo  
       2016-03-11 14:21:38 +08:00
    新蒂那些字体里有些免费下载的也有需要付费使用的。
    forsigner
        31
    forsigner  
    OP
       2016-03-11 14:22:18 +08:00
    @bfl008 瞎说什么大实话~
    Justineo
        32
    Justineo  
       2016-03-11 14:23:49 +08:00
    @swen 字蛛底层用的就是 fontmin 。
    zwpaper
        33
    zwpaper  
       2016-03-11 14:40:01 +08:00
    看到下面那个主题就感觉肯定是 lz ,拉上去一看果然是。

    真是合口味 XD
    TangMonk
        34
    TangMonk  
       2016-03-11 14:48:13 +08:00
    好看!
    forsigner
        35
    forsigner  
    OP
       2016-03-11 15:00:17 +08:00
    @finab 现在还得羡慕
    lwbjing
        36
    lwbjing  
       2016-03-11 15:00:18 +08:00
    赖斯... 之前自己拼的太累...
    forsigner
        37
    forsigner  
    OP
       2016-03-11 15:00:53 +08:00
    @aksoft 丑的可以接受 haha~
    forsigner
        38
    forsigner  
    OP
       2016-03-11 15:01:26 +08:00
    @tabris17 不知道字体加密有什么用
    dilidili
        39
    dilidili  
       2016-03-11 15:02:21 +08:00
    有木有去看过腾讯的字蛛?
    xcc3641
        40
    xcc3641  
       2016-03-11 15:02:21 +08:00
    又出精品 赞!
    forsigner
        41
    forsigner  
    OP
       2016-03-11 15:02:44 +08:00
    @songkaiape 看看 npmjs.org 流行什么就对了
    xcc3641
        42
    xcc3641  
       2016-03-11 15:03:24 +08:00
    手机下 好像格式出问题了
    v1024
        43
    v1024  
       2016-03-11 15:07:48 +08:00
    那么,你这个轮子有什么优势?

    http://font-spider.org/
    sciooga
        44
    sciooga  
       2016-03-11 15:23:07 +08:00
    我一般直接用 Fontmin 的客户端 http://ecomfe.github.io/fontmin/
    特别需要单独编辑字体的时候百度还有一个轮子 http://font.baidu.com/editor/

    当然,楼主干得漂亮
    forsigner
        45
    forsigner  
    OP
       2016-03-11 15:54:19 +08:00
    @dilidili 字蛛也是提取字体,提取 html 文件中出现过的字体,但是网页内容一般是动态输出内容,字蛛局限太大,还不如直接用 Fontmin 来得快和方便
    forsigner
        46
    forsigner  
    OP
       2016-03-11 15:57:01 +08:00
    @v1024 font-spider 只是对 fontmin 的基础上加了一点功能,作用是提取文件中出现过的文字,用 gulp-fontmin 可以非常容易是完成 font-spider 的功能的,我只是写了一个 fontmin 在线版工具而已。
    hqs123
        47
    hqs123  
       2016-03-11 15:59:17 +08:00
    好文艺感觉(*^__^*)
    laosb
        48
    laosb  
       2016-03-11 16:19:12 +08:00
    标题党。一个字体不能决定设计。
    LeoDev
        49
    LeoDev  
       2016-03-11 16:40:27 +08:00
    兄台我极其想盗用你的首页( http://fontmin.forsigner.com/) 😳
    forsigner
        50
    forsigner  
    OP
       2016-03-11 16:53:11 +08:00
    @LeoDev 可以啊
    forsigner
        51
    forsigner  
    OP
       2016-03-11 16:54:01 +08:00
    @laosb 对的 但是标题党下也有干货的
    forsigner
        52
    forsigner  
    OP
       2016-03-11 16:55:08 +08:00
    @hqs123 活捉一个文艺女程序媛
    forsigner
        53
    forsigner  
    OP
       2016-03-11 16:55:57 +08:00
    @sciooga 百度那个功能强大复杂,适合发烧友玩家
    xiaobubobo
        54
    xiaobubobo  
       2016-03-11 16:56:27 +08:00
    动手能力不错,但是乱用字体还是丑,好的设计师没那么多花里胡哨的字体。
    fhefh
        55
    fhefh  
       2016-03-11 17:08:32 +08:00
    nice~~ mark
    wweir
        56
    wweir  
       2016-03-11 17:26:23 +08:00
    最讨厌这些作死的乱用字体。阅读就是阅读,我在认认真真的阅读,结果你来个漫画体之类的。还有一些强制宋体的网页更是恶心,导致我现在电脑都是不装宋体
    evannan
        57
    evannan  
       2016-03-11 17:29:18 +08:00   ❤️ 1
    丑不丑是审美问题,不然再好的素材都能用成 X... 哈哈~
    tabris17
        58
    tabris17  
       2016-03-11 17:35:09 +08:00
    @forsigner 防审查
    LeoDev
        59
    LeoDev  
       2016-03-11 17:36:50 +08:00
    @forsigner
    谢谢哈~
    forsigner
        60
    forsigner  
    OP
       2016-03-11 17:39:50 +08:00
    @wweir 别激动~ 乱用字体大家都讨厌啊,我帖子里说了,主要应用场景在 Logo 、 Slogan 、标题等地方
    chousb
        61
    chousb  
       2016-03-11 17:43:34 +08:00
    果然很漂亮
    forsigner
        62
    forsigner  
    OP
       2016-03-11 17:52:37 +08:00
    @tabris17 这个应该不行,每个文字对应唯一 Unicode
    forsigner
        63
    forsigner  
    OP
       2016-03-11 18:15:13 +08:00
    @evannan 对的,一般来说设计师的什么决定了他的设计功力
    forsigner
        64
    forsigner  
    OP
       2016-03-11 18:17:22 +08:00
    @xcc3641 这个工具在手机没法用的,就懒得兼容了
    tabris17
        65
    tabris17  
       2016-03-11 18:50:11 +08:00
    @forsigner 是唯一的,只是映射顺序打乱
    unboy
        66
    unboy  
       2016-03-11 19:34:52 +08:00
    恩,这个很棒!
    litianyou
        67
    litianyou  
       2016-03-11 20:50:15 +08:00
    难道你们不知道有一个网站叫做“有字库”吗?
    貌似这个是国内第一个
    forsigner
        68
    forsigner  
    OP
       2016-03-11 21:23:36 +08:00
    @jasperchou 形象生动
    forsigner
        69
    forsigner  
    OP
       2016-03-11 21:34:08 +08:00
    @zwpaper 其实我做 web-fontmin 就是为了让 fexo 主题使用者可以方便的修改博客名称字体,默认中文字体太难看了
    toono
        70
    toono  
       2016-03-11 22:24:11 +08:00
    很棒
    forsigner
        71
    forsigner  
    OP
       2016-03-11 23:08:25 +08:00 via iPad
    @tabris17 这会导致字体错乱吧,明明是这个字却显示为其他字
    sneezry
        72
    sneezry  
       2016-03-11 23:15:59 +08:00
    中文字体真没几个是开源的,所以一直不敢随便用 Orz
    forsigner
        73
    forsigner  
    OP
       2016-03-12 09:36:47 +08:00
    @sneezry 这个确实蛋疼
    livia313
        74
    livia313  
       2016-03-12 09:53:45 +08:00
    第一张图好好看
    Lattez
        75
    Lattez  
       2016-03-12 10:43:59 +08:00
    好用!赞一个
    tabris17
        76
    tabris17  
       2016-03-12 18:37:44 +08:00
    @forsigner 要的就是这个目的。虽然说对 SEO 不友好,但是可以防拷贝和防审查
    forsigner
        77
    forsigner  
    OP
       2016-03-12 19:36:35 +08:00
    @livia313 也就是说第二张不好看...
    forsigner
        78
    forsigner  
    OP
       2016-03-12 19:37:07 +08:00
    @Lattez thx~
    forsigner
        79
    forsigner  
    OP
       2016-03-12 19:39:42 +08:00
    @tabris17 百度的 fontEditor 应该可以做到这个,楼上有人提到
    Mavious
        80
    Mavious  
       2016-03-17 06:26:44 +08:00 via Android
    方正晶黑,采取笔画拼接技术的黑体,体积狠小狠小哦。
    ningcool
        81
    ningcool  
       2018-09-05 10:12:31 +08:00
    网站打不开了?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2739 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 14:40 · PVG 22:40 · LAX 07:40 · JFK 10:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.