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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1167 天前的主题，其中的信息可能已经有所发展或是发生改变。

本来是想写个记事本的，但还没写完，等写完了再一起开源。

风格上像素级模仿的 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
不知道为什么不能直接发

字体

选择器

列出

字符集

3 条回复

codehz

2021-10-17 19:33:23 +08:00 via Android

这种方法似乎不能检查预定义列表之外的字体。。。。
Chrome 貌似提供了访问本地字体列表的 api web.dev/local-fonts

xieqiqiang00

2021-10-17 19:49:04 +08:00

@codehz
这个还没实装，如果有这种 API 我这个的确没有必要使用。
但就算 chrome 实装了 Firefox 或者苹果那边也不可能能用。
计算机中的字体的确只能检测到我内置的列表里的字体，但我这个表只是记录了名字，而且我使用下来效率非常高，内置的 700 多种个字体不到 100 毫秒就能检测完成，与之对比的 360 字体检测 300 种字体要好几秒才能检测完。
而且字体的粗细和字符集判断并不是内置的。

xieqiqiang00

2021-10-17 19:51:37 +08:00

我又多测了几次，实际大概只要 50 多毫秒

检测了 723 种字体，找到了 184 种，耗时 62ms
检测了 723 种字体，找到了 184 种，耗时 54ms
检测了 723 种字体，找到了 184 种，耗时 57ms
检测了 723 种字体，找到了 184 种，耗时 54ms