您现在还未登录!

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

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

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

修改与自制字体:更好地显示时间/比分


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

    修改与自制字体:更好地显示时间/比分 - 哔哩专栏 的字体下载部分。

    我修改了一些时间专用字体。有些是商业字体不能分享,因此下面发布的都是开源或免费字体。

    先提一下,对CSS而言,所有字体都分类为五种通用字族:serif、sans-serif、cursive、fantasy、monospace。我顺利凑齐了这五种如下。

    AliSans

    AliSans-Time.png
    免费的无衬线(sans-serif)比例字体。此即阿里巴巴英文标志字体。压缩包里有两个字体,常规和Italic版,如图。
    原是包含各种字重的字族,我仅仅改了其中两个(Regular、Italic)
    数字在小字号下显示不错,没特点不显眼恰好是优点,可替换网页播放器的时间字体。
    具体用法和编辑了哪些我都附在压缩包内文档里。AlibabaSans版权申明比较怪,所以改了名称。

    AliSans-Time.zip • ver.1

    Iosevka

    Iosevka-Time.png
    开源的无衬线等宽(monospace)编程字体。压缩包里有两个字体,常规和salt版,如图。
    salt/Stylistic Alternates/轮替风格,由Adobe登记,不是盐。
    原是包含各种字重、斜体、Slab衬线、变体的字族,我仅仅改了其中一个(Regular),如果有人需要我可以将其他也改了。
    具体用法和编辑了哪些(比如为什么1个Regular变成2个)我都附在压缩包内文档里。

    Iosevka-Time-2.zip • ver.2

    2019-12-14 版本2:将全角冒号挪移到比号。

    Libertine

    Libertine-Time.png
    开源的衬线(serif)比例+救世数字字体——与上面基本相反。该字体最常见的用途是维基百科标志。压缩包里有两个字体,常规和smcp版,如图。
    smcp/Small Caps/小型大写字母,推荐阅读 从设计的角度谈谈 iPhone 命名为什么用了 Small Caps - 少数派 的评论。
    原是包含各种字重、斜体、变体的字族,我仅仅改了其中一个(Regular),如果有人需要我可以将其他也改了。
    具体用法和编辑了哪些(比如为什么1个Regular变……)我都附在压缩包内文档里。我甚至重写了OT脚本。

    Libertine-Time.zip • ver.1

    Montserrat

    MontserratTime.png
    开源的无衬线比例字体。很适合搭配雅黑,巨大奶子网(mega․nz)默认字体,饼维基待用字体。压缩包里有两个字体,常规和Alternates版,如图。
    原是包含各种字重、斜体……的字族,我仅仅改了其中两个(Regular、Alternates Regular),如果有人需要我可以将其他也改了。
    具体用法和编辑了哪些我都附在压缩包内文档里。我应该还会做个搭配雅黑粗体的粗体罢。

    MontserratTime.zip • ver.2

    2019-12-20 版本2:将字体名改为MontserratTime以避免冲突,追加一对粗体,针对搭配雅黑又扩展了一对字体,现在可以当作软件默认字体了(需按文档修改注册表让中文显示为雅黑)

    Segment Digit

    SegmentDigit.png
    以开放字体许可证(OFL)发布的装饰(fantasy)字体。这是我做的第一个彩色字体,如图。压缩包里有两个字体,彩色和普通(mono)版。
    原是BabelStone发布的统一码13.0符号字体,我注意到其中液晶数字不错,提出并扩展为一个正式字体。而彩色五角星也是我自绘的。
    为了匹配液晶风格无视英文缺乏可识别性,与上面字体不同,不可能用于默认字体正是装饰字体的特点:专门美术用途。
    同时包含了一些其他字体缺乏的符号,如电源启动符号、半星评级符号、六种知识共享(Creative Commons)许可协议符号、算筹和画正字符号……具体用法和编辑了哪些我都附在压缩包内文档里。按OFL申明起了自己的名称。
    字体显示彩色需要视窗版本高于8.1❤为了可能不支持的苹果系统用户单独做了mono版,虽然没有彩色但至少可以用。

    SegmentDigit.zip • ver.1

    Unifont𛋬𛃶

    Unifont.png
    覆盖统一码BMP区域所有码位的开源像素字体,拯救叉烧包字符的最后希望(Unifont is only suitable as a font of last resort.)虽然有65536个字符但字体体积不大。顺带一提另一字体Unifont Upper还在试图覆盖统一码SMP区域,不过缺西夏文。
    虽然看上去丑了些,但不需修改,本身默认按时间显示的。
    发行说明:Unifont - Summary [Savannah] - gnu.org 一般统一码更新后该字体就会更新。

    GNU Unifont Glyphs - Unifoundry

    Walt Disney

    WaltDisney-Time.png
    对个人使用免费的书法(cursive)字体。这(不)是迪士尼英文标志字体。压缩包里只有一个字体,如图。
    原是2001年的老字体,虽有不规矩的地方,但我改动很少。如图小字,不必怀疑该字体免费的真实性。
    发布这个与近期大连城市徽标获奖作品疑抄袭迪士尼_澎湃新闻没有任何关系。具体用法和编辑了哪些我都附在压缩包内文档里。

    WaltDisney-Time.zip • ver.1

    DaLian.png
    字体名改为DaLian。本字体并非彩色字体。可惜按叶根友字体版权不能嵌入字符“大连”,否则更完美了。
    发现[_]其实没做,自己改画了个笔画贴近的。补画了个风格相似的[º]并挪移了一些符号。增加一个隐藏字符[.notdef]。

    DaLian.zip • ver.2

    Ubuntu、Fira、Zilla-Slab、Roboto、OpenSans、……

    让我考虑考虑。



    【哔哩专栏备份】

    是否有人在看视频、做视频时遇到下图上边这样的问题?

    1859-9-6-03-52-51.gif
    背景色块显示该字符占据的宽度

    如果你感觉到奇怪,是否希望改成上图下边的形式?

    那么概括下这几个月来的发现。

    2019-12-12 18-32-50.png
    截自我的trello,我几个月前就想解决这问题了

    数字

    实际上数字和茴香豆差不多,有4种写法(没算上斜杠〇)

    CSS Fonts Module Level 3 # 6.7. Numerical formatting: the font-variant-numeric property(英文)
    OT字体功能 # 数字样式 | 微软文档(微软机翻)

    numberstyles.png
    茴字写法,字体都是Libertine

    有两种样式<numeric-figure-values>:李宁lnum)和 旧式(onum)写法肯定有差异,
    有两种间距<numeric-spacing-values>:比例(pnum)和 表格(tnum)写法可能有差异,
    2样式和2间距可以乘出4种写法;
    还有一种特殊写法:斜杠零(zero

    上文括号里的缩写是OpenType(以下简称OT)的feature tags。一些优良的OT字体会同时包含4\5种数字但默认只显示1种,需要手动在软件OT特性开关里调用其他未映射的几种。
    Feature tags - Typography | 微软文档(目前是英文)功能标签?特征类型?我不懂翻译。

    lnum/lining-nums/标准数字
    阿拉伯数字本来高度一致的写法。

    onum/oldstyle-nums/旧式数字
    把阿拉伯数字当作高低参差的小写拉丁字母来书写。可以想象哈利波特那味儿。

    old-style-numerals.png
    左李宁右救世,字体都是Biolinum

    pnum/proportional-nums/比例数字
    每个数字占据宽度不同,就像手写的间距。

    tnum/tabular-nums/表格数字
    每个数字占据宽度相等以便垂直对齐,方便财务比较。有时1字会加上脚部写法撑胖。等宽字体必定表格数字不含比例数,反之不然。

    opentype-proportional-tabular-figures.gif
    微软提供的范图,左比例右表格,字体都是Miramonte

    zero/slashed-zero/斜杠零
    零+斜杠以强调字母O不是数字0,通常用于财务和编程。编程字体默认是表格数+斜杠零。

    zero.png
    W3C提供的斜杠零范图

    显然时间字体两种样式和斜杠零都无所谓,但间距只能选表格,否则用作计时整段数字就会抖来抖去。

    冒号

    可能看完上文的人会选择等宽字体,但只是等宽还不行(有些等宽字体出于编程用途区分字符会故意做得不好看,何况冒号也没必要与数字等宽)

    冒号一般放置在基线上,与小写对齐,所以就不能同时与数字(常与大写差不多高)垂直居中对齐。时间、比分等需要整体垂直居中,由于没有专门的居中冒号,过去排版者会特意手调。

    虽然没居中冒号,但有居中星号:[∗]U+2217算术星号,与[*]默认星号不同在于与数字对齐。
    找到一个[∶]U+2236比号“RATIO”。相当于居中冒号,就是左右间距可能太宽了,显示比分倒没问题。

    这属于排版技术,所以可由字体解决。比较先进的OT字体如苹果表(Apple Watch)启用的字体旧金山(SanFrancisco),可以就上下文判断是否数字自动替换成居中冒号。我做个例图演示下。

    SF.gif
    此为旧金山粗体,看上去仿佛冒号被拉上去了

    这个具体用到的是OT高级排版功能:calt/Contextual Alternates/上下文语境替代

    calt是由Adobe登记的feature tag。顺带一提OT字体格式由Microsoft和Adobe共同开发。

    试着反编译旧金山字体这段calt脚本,发现也很简单:

    group @0_9 [zero one two three four five six seven eight nine]
     {} /*注:穷举一遍数字,组团。*/
    
    lookup SingleSubstitution {
      sub colon -> colon.1;
    ……
      } /*注:「colon.1」是个未映射的大写对齐冒号。*/
    
    lookup ChainingContext {
      subtable "table1 {
        context (@0_9) colon (@0_9);
        sub 0 SingleSubstitution;
      } /*注:只要上下文出现「@0_9 冒号 @0_9」这种组合就按SingleSubstitution替换冒号。*/
    

    也就是任意字体加个colon.1和这个脚本就解决哩——

    并不。虽然苹果的系统肯定支持,但许多老软件,尤其非专业排版软件支持有限或不支持OT高级排版。没办法,只能固定成ttf字体,即直接用colon.1代替colon放弃与小写对齐(旧式数字可以例外,因为我觉得相当于英文小写)

    实际上我制作了些专门用于显示时间的字体。没有OT特性的。

    下载

    向上看。

    运用

    安装字体后做视频(比如给音乐MV加个进度条)直接调用就可以。

    对一般人也有用。假设你有装Stylus之类调整网页外观的用户样式管理器,可以加一条样式将播放器的时间字体修改了,如:

    @-moz-document domain("bilibili.com") {
    span[name="time_textarea"] {font-family:"【字体名】"}
    } /*b站*/
    
    @-moz-document domain("xiami.com") {
    .handle {font-family:"【字体名】"}
    } /*虾米*/
    

    等等。


    如果上文有问题或遗漏请评论告诉我😌


Log in to reply
 

更多本版内容

友情链接

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