如何将.svg文件转换为字体？

Can anybody help me to convert .svg files to a font file? or is there a way to do it on the fly?

任何人都可以帮我将.svg文件转换为字体文件吗?或者有没有办法在飞行中做到这一点?

4 个解决方案

#1

I found two relevant answers here on Stack Overflow:

我在Stack Overflow上找到了两个相关的答案:

1. Creating icon fonts with vector software (i.e. inkscape) and fontforge?

使用矢量软件(即inkscape)和fontforge创建图标字体?

2. Tools to convert svg to ttf [closed]

将svg转换为ttf的工具[关闭]

Unfortunately, neither is really a coding answer, which is what I had really hoped for (a command line utility for scripted conversion or perhaps an API with which somebody could write such a thing).

不幸的是,这两者都不是真正的编码答案,这是我真正希望的(脚本转换的命令行实用程序,或者也许是某人可以编写这样的东西的API)。

Still, I got what I was looking for by combining those two answers.

尽管如此,通过结合这两个答案,我得到了我想要的东西。

Clean up SVG

_{^{(This step might be optional.)}} Open up your SVG in the free software program InkScape. Copy the existing SVG and create a new project from the FontForge Glyph template. Paste into that template, standardize the look, size, and position, and save as PLAIN SVG, one file per character ("glyph").

(此步骤可能是可选的。)在*软件程序InkScape中打开SVG。复制现有SVG并从FontForge Glyph模板创建一个新项目。粘贴到该模板中,标准化外观,大小和位置,并保存为PLAIN SVG,每个字符一个文件(“字形”)。

Convert SVG to font

Then, either use the free software program FontForge directly (as directed in the first answer, creating icon fonts with vector software) or else use the free IcoMoon online service (as directed in the second answer, tools to convert svg to ttf). I did the latter.

然后,直接使用免费软件程序FontForge(如第一个答案中所述,使用矢量软件创建图标字体)或者使用免费的IcoMoon在线服务(如第二个答案中所述,将svg转换为ttf的工具)。我做了后者。

Using IcoMoon

IcoMoon is a rather straightforward tool. Click the purple Import Icons button on the top of the page to import each of your custom SVG glyphs. Then click "Get Info" on the set's preferences so you can name the set and give it some metadata. Use the "Edit" tool (the pencil icon) and click on each glyph to get the sizing and spacing just right.

IcoMoon是一个相当简单的工具。单击页面顶部的紫色“导入图标”按钮以导入每个自定义SVG字形。然后在设置的首选项上单击“获取信息”,这样您就可以为该组命名并为其提供一些元数据。使用“编辑”工具(铅笔图标)并单击每个字形以获得尺寸和间距恰到好处。

When you're done, select all of the glyphs you want in the font and then press the "Generate Font" button at the bottom of the page. On the resulting screen, you can then map each glyph to a unicode character. On the right side, you can type or paste a character, or on the left side, you can enter its hexadecimal code. A program like GNOME Character Map (for Linux) or Windows Character Map or Mac OS Character Palette may help you find appropriate codes for your glyphs.

完成后,选择字体中所需的所有字形,然后按页面底部的“生成字体”按钮。在结果屏幕上,您可以将每个字形映射到unicode字符。在右侧,您可以键入或粘贴一个字符,或者在左侧,您可以输入其十六进制代码。像GNOME字符映射(适用于Linux)或Windows字符映射或Mac OS字符调色板等程序可以帮助您找到适合您的字形的代码。

Now press the "Preferences" button at the top of the screen (or the gear at the bottom right) and finalize the name and metadata of your new font and press the "Download" at the lower right. You'll get a Fontname.zip file that contains a bunch of usage suggestions as well as the font files themselves.

现在按屏幕顶部的“首选项”按钮(或右下角的齿轮)并最终确定新字体的名称和元数据,然后按右下角的“下载”。您将获得一个Fontname.zip文件,其中包含一堆使用建议以及字体文件本身。

Iterate

I found the sizing and spacing was really hard to get right (I was making letters). I kept iterating on IcoMoon, installing the font, and comparing my letters to letters in a similar font (using a word processor). Sizing was easy to get right, but spacing was not so easy (and I wasn't even messing with ligatures or kerning!). Don't forget that some systems require flushing the font cache after installing a new font (on Linux, that's fc-cache from Fontconfig)

我发现尺寸和间距很难正确(我正在写信)。我一直在迭代IcoMoon,安装字体,并将我的字母与字母相似(使用文字处理器)。尺寸调整很容易,但间距不是那么容易(我甚至没有弄乱连字或字距!)。不要忘记一些系统需要在安装新字体后刷新字体缓存(在Linux上,这是来自Fontconfig的fc-cache)

Validate the font

You may also want to validate your font. Font Squirrel is an online service that lets you do that, offering corrections as well as usage tips. I think IcoMoon already does this, so perhaps that's only of use for FontForge creations.

您可能还想验证您的字体。 Font Squirrel是一项在线服务,可让您这样做,提供更正和使用技巧。我认为IcoMoon已经这样做了,所以也许这只是用于FontForge创作。

#2

There are multiple online tools that allow you to upload SVG files and use those as icons for creating an icon font. Personally, I prefer the Icomoon App.

有多个在线工具允许您上传SVG文件并将其用作图标来创建图标字体。就个人而言,我更喜欢Icomoon App。

The Icomoon App allows you to do each of the following :

Icomoon应用程序允许您执行以下各项操作:

• Get one or more icons from several popular icon fonts

从几种流行的图标字体中获取一个或多个图标

• Upload other fonts, which may be icon fonts but also regular fonts

上传其他字体,可能是图标字体,也可以是常规字体

• Upload SVG files to use as icons

上传SVG文件以用作图标

• Combine any number of icons from any number of available fonts

从任意数量的可用字体中组合任意数量的图标

• Set the UNICODE hex value for whichever characters you need

为您需要的任何字符设置UNICODE十六进制值

• Export and/or save the font set you create

导出和/或保存您创建的字体集

#3

You can also try SVGtoFont. It provides all popular font format (woff, woff2,ttf and eot), css(SASS & LESS) and demo HTML File.

您也可以尝试SVGtoFont。它提供所有流行的字体格式(woff,woff2,ttf和eot),css(SASS&LESS)和演示HTML文件。

#4

As others wrote, it is possible to import svg shapes into fontforge and some font designers work this way.

正如其他人写的那样,可以将svg形状导入到fontforge中,并且某些字体设计师可以这样工作。

However, shapes (outlines) are only one part of a modern smart font, so that won't be sufficient in itself. You also need to work on metadata, kerning, hinting, etc. That's a lot of definitely not-fun, hard, but necessary stuff, while would-be font designers usually dream about ego-rewarding artistic drawing and not much else.

但是,形状(轮廓)只是现代智能字体的一部分,因此本身就不够。你还需要处理元数据,字距调整,暗示等等。这很多都是非常有趣,很难但很有必要的东西,而成为字体的设计师通常会梦想自我奖励艺术绘画,而不是其他。

That's one reason svg fonts never caught up as a format, they're missing too many parts to be useful to render text.

这就是svg字体永远不会成为格式的一个原因,它们缺少太多的部分来渲染文本。