如何在不购买 Illustrator 的情况下在 Web 上创建 SVG 以获得良好的排版?

平面设计 向量 排版 svg 网络字体 字距调整
2022-02-12 08:50:19

我有一个网络字体,我想使用 SVG 而不是 HTML 来显示它。这样做的原因是我想显示大的印刷精美的文本,而且我看不到任何方法来获得我需要的 HTML/CSS 呈现文本的字距控制。

我拥有该字体(或者它是免费的),并且很容易将它显示为位图并完成它 - 但它非常大,我试图让整个页面加载到一半以下其次,所以我相信 SVG 是我的答案。

我拥有 Photoshop,但对 Illustrator 没有任何预算。不过,我想我可以在短期内使用试用版——如果能够在一个月后进行编辑和更改,那就太好了。是否有任何矢量工具可以满足我的需求,只需从文本创建 SVG,以便我可以手动调整字距以在网络上显示?

4个回答

Inkscape 当然会将字体转换为路径(选择,然后 Shift-Ctrl-C)。

标准保存格式是 SVG——“Inkscape”(扩展)SVG 或“普通”SVG。

它还有一个 SVG 字体编辑器。

顺便说一句 - 我假设这个 CSS 对你没有好处:

<span style="letter-spacing: 5px">Kerning</span>

试试 Kern.js。它基于 Lettering.js(两个 jQuery 插件):

http://www.kernjs.com/

http://letteringjs.com/

这有望在不牺牲 SEO 和可访问性的情况下为您提供字距控制。

更新:

我刚刚发现了 kerning.js,它可能比 Kern.js 提供更多的控制:

http://endtwist.github.com/kerning.js/

同样基于 Lettering.js。

试试 Inkscape - 它是 Illustrator 的开源替代品。我自己用的不多,但它最初是作为 SVG 编辑器的,因此将文本转换为路径并保存为 SVG 应该很容易。

http://inkscape.org/

Inkscape 实际上在 SVG 方面比 Illy 更好。Illy 在保存为 SVG 时会做一些有趣的事情,基本上不遵守 SVG 规范。将 Illy 用于 AI,但如果您考虑到 SVG 合规性,Inkscape 是更好的选择。