跳转到主要内容

在线检查和预览工具

适合谁看:拿到一个字体文件,想快速看看它有哪些字、哪些排版功能、可变轴怎么用,又不想装软件的人。

常用的网页工具

工具 官网说明 适合做什么
Wakamai Fondue 回答「我的字体能做什么?」 看字体支持的 OpenType 功能、可变轴、字符集,并生成对应的 CSS 代码[1]
FontDrop! 拖入字体即可查看 浏览全部字形、查看字体信息和度量数据[2]
Dinamo Font Gauntlet 用于校样、生成和制作字体动画 测试可变字体在不同轴数值下的效果[3]

用法都差不多:打开网页,把字体文件拖进去。

使用时注意

  • 商业字体要小心:把字体拖进网页之前,看看工具是否说明字体只在本机浏览器处理、不会上传。不确定时,用本地工具更稳妥,比如 fontTools,见《fontTools 入门:查看、修改、转格式》。
  • 中文字体文件大:几 MB 到几十 MB 的中文字体,网页工具加载和渲染全部字形会比较慢,耐心等待或只看需要的部分。
  • 工具结果仅供参考:最终效果要放到实际排版环境里测试。

浏览器自带的开发者工具

网页上的字体出问题时,先用浏览器的开发者工具看「实际用了哪款字体」[4]:

  • Firefox:检查器里有「字体」面板,可以看到元素实际使用的字体,还能调整可变字体的轴数值;
  • Chrome(Edge 与之类似):在「元素」面板的「计算样式」(Computed)底部有「Rendered Fonts」,列出这个元素实际用到的字体和字形数量[5]。列出这个元素实际用到的字体和字形数量。

常见的网页字体问题和排查顺序见《字体没生效?一套排查顺序》。

系统自带的预览

  • macOS:双击字体文件会用「字体册」打开预览;
  • Windows:双击字体文件会打开预览窗口,可以看到字体名称和样例文字。

整理大量字体的工具见《字体管理器:安装、预览和整理字体》。

参考资料(5)

参考资料

    Wakamai Fondue,Roel Nieskens FontDrop! Font Gauntlet,Dinamo Firefox 开发者工具:查看和编辑字体(英文),Mozilla DevTools answers - What font is that?,Google Chrome