V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xieqiqiang00
V2EX  ›  JavaScript

[有趣的半成品]网页字体与样式选择器

  •  
  •   xieqiqiang00 · 2021-10-17 17:54:40 +08:00 · 866 次点击
    这是一个创建于 893 天前的主题,其中的信息可能已经有所发展或是发生改变。
    本来是想写个记事本的,但还没写完,等写完了再一起开源。

    风格上像素级模仿的 Windows 的字体选择器

    这个字体选择器可以实现:
    列出计算机中安装的字体
    检查某个字体是否有粗体或细字体(如果不支持就不会在字形中列出)
    检测字体支持哪些字符集

    https://z3.ax1x.com/2021/10/17/5tQDYV.png
    https://z3.ax1x.com/2021/10/17/5tQrWT.png
    https://z3.ax1x.com/2021/10/17/5tQBF0.png

    体验 demo:
    aHR0cHM6Ly9jZjEzMGZjMS5ub3RlcGFkLTZ6dS5wYWdlcy5kZXY=

    bit 点 ly/3jclMjo
    不知道为什么不能直接发
    codehz
        1
    codehz  
       2021-10-17 19:33:23 +08:00 via Android
    这种方法似乎不能检查预定义列表之外的字体。。。。
    Chrome 貌似提供了访问本地字体列表的 api web.dev/local-fonts
    xieqiqiang00
        2
    xieqiqiang00  
    OP
       2021-10-17 19:49:04 +08:00
    @codehz
    这个还没实装,如果有这种 API 我这个的确没有必要使用。
    但就算 chrome 实装了 Firefox 或者苹果那边也不可能能用。
    计算机中的字体的确只能检测到我内置的列表里的字体,但我这个表只是记录了名字,而且我使用下来效率非常高,内置的 700 多种个字体不到 100 毫秒就能检测完成,与之对比的 360 字体检测 300 种字体要好几秒才能检测完。
    而且字体的粗细和字符集判断并不是内置的。
    xieqiqiang00
        3
    xieqiqiang00  
    OP
       2021-10-17 19:51:37 +08:00
    我又多测了几次,实际大概只要 50 多毫秒

    检测了 723 种字体,找到了 184 种,耗时 62ms
    检测了 723 种字体,找到了 184 种,耗时 54ms
    检测了 723 种字体,找到了 184 种,耗时 57ms
    检测了 723 种字体,找到了 184 种,耗时 54ms
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3479 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 10:56 · PVG 18:56 · LAX 03:56 · JFK 06:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.