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

• 

  綿雲飴里 木毛之星 圈内名人 木毛认可 饼☆ 最后由 綿雲飴里 编辑
  
  

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

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

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

  AliSans

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

  AliSans-Time.zip • ver.1

  Iosevka

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

  Iosevka-Time-2.zip • ver.2

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

  Libertine

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

  Libertine-Time.zip • ver.1

  Montserrat

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

  MontserratTime.zip • ver.2

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

  Segment Digit

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

  SegmentDigit.zip • ver.1

  Unifont𛋬𛃶

  
  覆盖统一码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

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

  WaltDisney-Time.zip • ver.1

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

  DaLian.zip • ver.2

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

  让我考虑考虑。

  ---

  …

  ---

  【哔哩专栏备份】

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

  
  背景色块显示该字符占据的宽度

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

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

  
  截自我的trello，我几个月前就想解决这问题了

  数字

  实际上数字和茴香豆差不多，有4种写法（没算上斜杠〇）

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

  
  茴字写法，字体都是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／旧式数字
  把阿拉伯数字当作高低参差的小写拉丁字母来书写。可以想象哈利波特那味儿。

  
  左李宁右救世，字体都是Biolinum

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

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

  
  微软提供的范图，左比例右表格，字体都是Miramonte

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

  
  W3C提供的斜杠零范图

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

  冒号

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

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

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

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

  
  此为旧金山粗体，看上去仿佛冒号被拉上去了

  这个具体用到的是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:"【字体名】"}
  } /*虾米*/
  

  等等。

  ---

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

  回复 引用 1

  1 条回复 最后回复

  ---