CSS 如何将 .svg 文件转换为字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13278707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert .svg files to a font?
提问by Shoaib Ud-Din
Can anybody help me to convert .svg files to a font file? or is there a way to do it on the fly?
有人可以帮我将 .svg 文件转换为字体文件吗？或者有没有办法在飞行中做到这一点？
回答by Adam Katz
I found two relevant answers here on Stack Overflow:
我在 Stack Overflow 上找到了两个相关的答案：
- Creating icon fonts with vector software (i.e. inkscape) and fontforge?
- Tools to convert svg to ttf [closed]
Unfortunately, neither is really a codinganswer, 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
清理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
将SVG转换为字体
Then, either use the free software program FontForgedirectly (as directed in the first answer, creating icon fonts with vector software) or else use the free IcoMoononline service (as directed in the second answer, tools to convert svg to ttf). I did the latter.
然后，要么直接使用免费软件程序FontForge（如第一个答案中所述，使用矢量软件创建图标字体）要么使用免费的IcoMoon在线服务（如第二个答案中所述，将 svg 转换为 ttf 的工具）。我做了后者。
Using IcoMoon
使用 IcoMoon
IcoMoon is a rather straightforward tool. Click the purple Import Iconsbutton 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 Mapor Mac OS Character Palettemay help you find appropriate codes for your glyphs.
完成后，选择字体中所需的所有字形，然后按页面底部的“生成字体”按钮。在生成的屏幕上，您可以将每个字形映射到一个 unicode 字符。在右侧，您可以键入或粘贴一个字符，或者在左侧，您可以输入其十六进制代码。像GNOME Character Map（用于 Linux）或Windows Character Map或Mac OS Character Palette 之类的程序可以帮助您为您的字形找到合适的代码。
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 ligaturesor kerning!). Don't forget that some systems require flushing the font cache after installing a new font (on Linux, that's fc-cachefrom Fontconfig)
我发现尺寸和间距真的很难正确（我正在制作字母）。我一直在 IcoMoon 上迭代，安装字体，并将我的字母与类似字体的字母进行比较（使用文字处理器）。调整大小很容易，但间距不是那么容易（我什至没有搞乱连字或字距调整！）。不要忘记某些系统需要在安装新字体后刷新字体缓存（在 Linux 上，fc-cache来自Fontconfig）
Validate the font
验证字体
You may also want to validate your font. Font Squirrelis 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 创作有用。
回答by John Slegers
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
- Combine any number of icons from any number of available fonts
- Set the UNICODE hex value for whichever characters you need
- Export and/or save the font set you create
- 从几种流行的图标字体中获取一个或多个图标
- 上传其他字体，可以是图标字体也可以是普通字体
- 上传 SVG 文件以用作图标
- 从任意数量的可用字体中组合任意数量的图标
- 为您需要的任何字符设置 UNICODE 十六进制值
- 导出和/或保存您创建的字体集
回答by nim
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 字体从未成为一种格式的原因之一，它们缺少太多对呈现文本有用的部分。
