😶「防回退空白字体」a prevent fallback blank font

[wsph123]

一个防止字体回退到系统默认字体的空白字体，可以让未匹配字型呈空白显示。

是个看起来很简单、但困扰我好长时间没解决的问题，把之前脑补的方案实现了下~

覆盖了常用中日韩英数字符号，遇到未匹配字符欢迎反馈 #1

顺便如果有什么更理想的方案能达到类似效果求推荐😭

安装

npm i blank-font

import 'blank-font'

或

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/blank-font@0.0.1/blank.font.css">

使用

.have-font-el{
    font-family: '某个字型不全的自定义字体名', blank;
}

使用例

https://lab.magiconch.com/eva-title/

GitHub

https://github.com/itorr/blank-font

[i0error]

@font-face 的 font-display: block 不可以嘛

[i0error]

噢我误会了。get

[wsph123]

@i0error 对的，font-display 只会影响加载期间的字体现实行为，我希望设定的是在加载完成之后展示期间的行为。

Adobe 其实也有 block font 和 not default 项目，但是一个空白字不占宽度、一个会显示成 X 方框，不符合我的需求。

于是最后只能自己做了，我的这个给中文字体定义了大体正确的宽度（虽然是空白字体🤧

[byzod]

没有。不过有轮子
https://github.com/adobe-fonts/adobe-notdef

只是想看效果可以用 BabelMap

[wsph123]

@byzod
这就是我上面提到的 not default ，实测如图，会把所有文字显示成 X 方框


BabelMap 看起来很方便诶，可以用在 Windows 上做字体的简单预览🤔