V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
wsph123
V2EX  ›  分享创造

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

  •  
  •   wsph123 ·
    itorr · 2022-11-28 18:34:32 +08:00 · 2171 次点击
    这是一个创建于 708 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    安装

    npm i blank-font
    
    import 'blank-font'
    

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/blank.font.css">
    

    使用

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

    使用例

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

    GitHub

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

    5 条回复    2022-11-28 23:23:40 +08:00
    i0error
        1
    i0error  
       2022-11-28 20:54:40 +08:00
    @font-face 的 font-display: block 不可以嘛
    i0error
        2
    i0error  
       2022-11-28 20:55:22 +08:00
    噢我误会了。get
    wsph123
        3
    wsph123  
    OP
       2022-11-28 22:01:51 +08:00
    @i0error 对的,font-display 只会影响加载期间的字体现实行为,我希望设定的是在加载完成之后展示期间的行为。

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

    于是最后只能自己做了,我的这个给中文字体定义了大体正确的宽度(虽然是空白字体🤧
    byzod
        4
    byzod  
       2022-11-28 23:13:50 +08:00
    没有。不过有轮子
    https://github.com/adobe-fonts/adobe-notdef

    只是想看效果可以用 BabelMap
    wsph123
        5
    wsph123  
    OP
       2022-11-28 23:23:40 +08:00
    @byzod
    这就是我上面提到的 not default ,实测如图,会把所有文字显示成 X 方框


    BabelMap 看起来很方便诶,可以用在 Windows 上做字体的简单预览🤔
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1401 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:44 · PVG 07:44 · LAX 15:44 · JFK 18:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.