将文字转换为 SVG
使用 <text> 元素的 SVG,得看它被打开的地方有没有那款字体。把文字转成路径数据,这层依赖就消失了:形状随文件一起走,因此在每个浏览器、编辑器和切割机中显示都完全一致——而且没有任何网络字体请求。
将文字转换为 SVG你会拿到什么
每个字形一条路径,带上你设定的填充规则、填充和描边,并可选择为每个字形赋予各自的 id,以便在 CSS 或 JavaScript 中单独定位到某个字母。若想让整个单词只有一条路径,就改用轮廓焊接——切割机或图标系统通常更偏爱这种形式。
正确的整形,而不只是查字形
文字由 HarfBuzz 整形,这正是浏览器自己使用的引擎,因此字偶距和连字都会生效,复杂文种也表现正常:阿拉伯字母相连,印度系字丛重排。可变字体轴和 OpenType 特性同样开放,所以可以在转曲之前先调好字重或某个风格集。
使用你自己的字体
目录收录了 1,900+ 个开源字族,你也可以直接拖入自己的 TTF 或 OTF。上传的字体在标签页内读取,绝不会被发送到任何地方——这也意味着有商业授权的字体始终留在你的机器上。
常见问题
- 为什么不干脆把文字留作 <text>?
- 因为它不会两次呈现出同样的样子。缺失的字体会被悄悄替换,而网络字体会多出一次请求和一瞬未套样式的文字。路径是固定的几何——只要文件是标志、图标,或要送去机器加工,这份功夫就值得。
- 文字还能被搜索或被无障碍读取吗?
- 转曲之后就不能了。请把文案放进标记中的 aria-label 或 title 元素,并保留一份可编辑的源文件以备日后修改。
- 可以使用我自己有授权的字体吗?
- 可以——上传 TTF 或 OTF。它在浏览器里解析,文件绝不会离开你的机器。请确认授权允许为你打算的用途转曲。