编写 SDF 字体指南
Source: Hacker News
背景
早在 2024 年，我就开始尝试使用带符号距离场（SDF）来渲染字体，目标是在一次渲染中实现描边和阴影。 我为一款游戏和一个地图生成器做了一个原型，但我从未彻底弄清楚为什么有些方法能够成功，而另一些则会失败。 那段时间的笔记后来在 Google 搜索 “sdf fonts” 时位居前列 [1]，这促使我决定写一篇系统的指南。
我收集了 22 页日记式的记录，描述了我尝试过的各种方法，还有一页未完成的 “概览” 页面，试图涵盖多个 SDF 字体库（msdfgen、stb_truetype、tiny‑sdf 等）。 该概览包含了代码片段、示意图以及每个库输出的截图。
Sketch of distance fields, created with Excalidraw [2]
首次概览尝试
原本的范围证明太大。我大部分时间都花在 msdfgen 上，缺乏对其他库的足够了解，无法写出连贯的指南。因此，我决定缩小重点。
重新设计 2 – 聚焦 msdfgen
我将指南限制在 msdfgen，同时仍然讨论诸如图集大小、抗锯齿宽度、着色器导数和平滑函数等权衡。为了说明这些概念，我创建了几张示意图：
重新设计 2 的示意图，使用 Excalidraw 创建 [3]
我还进行了大量测试，以比较不同图集大小的影响，捕获了许多截图并记录了使用的命令。然而，重复我在早期博客文章中已经记录的相同测试工作（一 和 二）感觉有些冗余，于是我转而采用了其他方法。
重新设计 3 – 使用 JavaScript 和 GPU 实现的“操作指南”页面
新的方向是先展示概念，然后提供两种实现方式：
- CPU 渲染 使用 JavaScript。
- GPU 渲染 使用片段着色器。
我将图表刷新为更简洁的风格：
来自重新设计 3 的手绘 SVG 图表
虽然页面在推进，但仍显得过于技术化——充斥着 shell 命令和低层代码，只有我自己会觉得有用。
Redesign 4 – 概念聚焦页面
我去掉了实现细节，将指南的重点放在：
- 使用 SDF 字体可以实现的视觉效果。
- SDF 在底层是如何工作的。
- 使用 SDF 创建这些效果的实用建议。
之前写的代码密集内容已移至另一个未完善的页面。我还添加了过去一年我的活动时间线：
过去一年中的工作，使用 Cal‑heatmap 生成 [4]
最终结果
在经过多次设计迭代后，我终于对页面感到满意。它现在作为一个简明、概念驱动的 SDF 字体指南，配有清晰的示意图和实用的建议，同时为需要的用户保留实现细节。
我希望搜索引擎最终能将用户引导至这个更有价值的资源。