您现在还未登录!

登录/注册后可体验更多内容。如未找到验证邮件,请查看垃圾箱或"点击右上角头像"-->"编辑资料"重新发送。

QQ手机/电脑邮箱无法在移动端注册/验证,使用网页版即可。请使用非国产浏览器(建议Chrome/Firefox)登录。

PS:密码找回重做中,请点击此处来找回。点击边栏前往其余页面。

试制包含bilibili网页全部矢量图标的字体


  • 木毛之星 圈内名人 木毛认可 饼☆

    我低估了标题的难度。
    b站图标很早就用了网页字体,把网页字体下载来转换成ttf,解决——但,
    前阵子都准备好了,但今天留个心眼检查了下发现b站又改版了,更新了更多的网页字体,名称还都是“iconfont”(同名字体同时挂网页,调用会撞车)我发现这些“iconfont”还各不相同,让我撤回研究下怎么办。 解决。

    ‍我没在作品里求三连的习惯,是因为我的自我定位是原料供应厂(“武器商”,给视频作者供应图素材),做的视频一般是“用我画的素材可以duang~出这个效果!”的宣传(虽然没几人用……)
    对求三连没啥意见,但不能忍的是有些人做的高清视频,求三连图却是模糊的截屏:b站图标用的网页字体,是矢量,易转为清晰大图——也许是不知道或不会用?
    那这就是我“武器商”的工作了。
    请转发,让模糊三连的视频制作者看到。
    顺带一提b站某些数字字体是“Material Design Icons”,免费的。
    而某些中文字体是“锐字逼格青春粗黑体简”,有版权不可分享,但b站居然把整个中文字体(六千多字)挂上网页了,REEJI-BigYoung-BoldGB2.0.woff2,不难找。……不过找到也没法用于商业作品。
    2020-1-10 18-28-41.png

    下载与更新

    (b站经常会改版,我会不定期检查b站更新到这里)

    现在b站网页一共挂了1个“bilifont”,1个“vanfont”(嗯?),4个不同的“iconfont”,考虑字体调用关系,我只合并同名的。
    合并难点是某些同一图标字码点不同,我看见b站也确实是同时加载,搞不懂b站怎么解决撞车问题,或者是直接抛弃这些字码点?
    按字体里记录的创建时间(修改时间一般不实)判断,b站是在某个时段几乎抛弃了2017-12-27创建的iconfont,在2018年后进行了分批修改,所以我放弃17年以前的图标,将18年之后每批图标合并为一个字体。
    检查发现b站也是用 fontello.com 创建的图标字体,Generated by svg2ttf from Fontello project. “iconfont”其实是默认名称,会与其他网站“iconfont”撞车,所以改名为“bilicon”。

    • bilifont.ttf 疑似2019-11-5创建。
      包含图标见本文底部。

    • vanfont.ttf 疑似2019-10-18创建。
      vanfont.png
      锯齿只是预览,字体仍然是矢量的。

    • bilicon.ttf 2018创建的多个“bilifont”合并。
      bilicon.png
      其中U+E6F3-E6F6、U+E722是b站2018年到现在删除不用的5个图标。

    如何使用

    这些图标对应字符都位于私用区,所以需要字体软件帮忙,如果你没有字体管理软件,那么我有个推荐:字体预览和预载软件NexusFont,以及对该软件汉化和美化
    bilifont.png
    你可以打开该软件的“字符映射”然后双击所需字符来选择复制。当然,别忘了设定为字体,不然显示为空白或者别的。


Log in to reply
 

更多本版内容

友情链接

中文InmWiki 中文饼Wiki InmTieba 例区Discord afdian “bilibili” TIS v2mm | 自由职业者社区