将天气字形转换为 SVG 文件
Converting weather glyphs into SVG files
我正在尝试在 Inkscape 中使用 these excellent weather glyphs，而不是作为浏览器中的字体。有什么方法可以将它们转换成我可以导入的常规 SVG 文件吗？
非常感谢，
亚历克斯
TL;DNR
- 从下面的 link 中在您的系统上安装 'Weather Icons' 字体。
- 保存下面的svg文件。
- 在 Inkspace 中打开它，现在您可以将所有字形复制并粘贴为文本或 select 文本框并单击路径 > 对象到路径，然后取消组合直到您拥有单独的字形 select编辑。您现在可以根据需要操作它们。
获取字体
最好的办法是从该项目的网站 page 下载字体并将它们安装到您的系统中。您无需指定正在使用的操作系统，但在大多数情况下，只需双击字体文件即可，系统可能会询问您是否要安装该字体。在此之后，您可以在接受它们的程序中使用这些字体系统范围（在我的例子中，我在从项目页面解压缩下载后安装了 weather-icons-master/font/ 文件夹中的 .ttf 文件；我是 运行 Ubuntu 值得信赖 14.04)
在 Inkscape 中，您可以创建一个文本框，按 Ctrl+U，键入您想要的字形的 unicode，然后按 Enter，如果您将字体更改为 'Weather Icons'，您将看到天气字形.例如，在文本框内，Ctrl+U，然后是 f00d，然后回车将产生 'wi-day-sunny' 字形（link 提供的第一个字形）。
将字体变成路径
在您的问题中，您提到了将字体转换为可以导入的 'regular SVG' 文件。我假设您指的是路径和路径组。
要将字体变成路径 select 文本区域并单击路径 > 对象到路径。
如果您有多个字形，您可以将它们取消组合，直到您找到单个字形，然后您可以根据需要修改、导出和进一步操作。
如何在 Inkscape 中使用 SVG 图标字体 'Cheat Sheets'
我之前在使用 Font Awesome 时遇到过这个问题，现在正在看这个问题：我不想为我想在资产管道中使用的所有字形手动键入 Unicode。这是获取特定字体系列提供的所有图标字体列表的半自动化方法。 警告：为此我将在文本编辑器 (Atom) 中使用正则表达式查找和替换
- 在您的系统上安装您想要的字体。
- 在 Inkscape 中，通过转到扩展 > 文本 > Lorem Ipsum 创建一些虚拟文本（我使用的是 Inkscape 0.91 r）。一段加上几句话就可以了。或者您可以创建一个流动文本框并粘贴您想要的任何文本，我们将很快替换它。
- 突出显示文本框中的所有文本，并将字体更改为所需的字体并放大字体（对于天气图标，我选择了 40，这似乎有效）。
- 保存并退出 Inkscape。
- 在文本编辑器中打开 Inkscape svg (xml) 文件。
- 删除
<flowPara></flowPara> 标签之间的虚拟文本
- 从您的浏览器中，复制列出所有字形的字体页面的页面源代码（link 上面提供的）
- 使用正则表达式，查找：
^((?!\&#x[0-9a-f]*;?<\/).)*$ 替换：无
- 使用正则表达式，查找：
^(.*)(&#x[0-9a-f]*)(.*)$ 替换：;
- 使用正则表达式，查找：
\n 替换：无
- 您现在应该有一行文本，其中包含该字体中以分号分隔的字形的所有 unicode 代码，您可以将其粘贴到您打开的 svg 文件中的
<flowPara></flowPara> 之间，重新保存并在 Inkscape 中打开。
- 您可能需要调整字体或流动文本框的大小，但现在所有字形都集中在一处。
这对我来说既适用于天气字形，也适用于 Font Awesome。
SVG作弊Sheet代码（'Weather Icons'字体）
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 744.09448819 1052.3622047"
height="297mm"
width="210mm">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<flowRoot
style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="flowRoot4136"
xml:space="preserve"><flowRegion
id="flowRegion4138"><rect
y="17.991203"
x="19.104477"
height="1023.4542"
width="715.05328"
id="rect4140" /></flowRegion><flowPara
style="font-size:50px;-inkscape-font-specification:'Weather Icons';font-family:'Weather Icons';font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal"
id="flowPara4142"></flowPara></flowRoot> <flowRoot
style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:10px;line-height:125%;letter-spacing:0px;word-spacing:0px"
id="flowRoot4148"
xml:space="preserve"><flowRegion
id="flowRegion4150"><rect
y="612.95923"
x="122.8145"
height="379.36035"
width="84.605545"
id="rect4152" /></flowRegion><flowPara
id="flowPara4154"></flowPara></flowRoot> </g>
</svg>
我最终使用了method outlined by Gabi at Helpful Sheep。这是我用来将 .svg 文件拆分成一大堆单独的 .svg 文件的代码，这些文件按顺序编号：
import sys
if len(sys.argv) < 2:
print 'Usage: python {} webfont-file.svg'.format(sys.argv[0])
sys.exit()
with open(sys.argv[1], 'r') as r:
lines = r.read().split('\n')
glyphs = [x for x in lines if '<glyph' in x]
# for every glyph element in the file
for i in range(0, len(glyphs)):
with open(str(i + 1).rjust(3, '0') + '.svg', 'w') as w:
w.write('<?xml version="1.0" standalone="no"?>\n')
w.write('<svg width="1500px" height="1500px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n')
# replace 'glyph' with 'path' and flip vertically
w.write(glyphs[i].replace('<glyph', '<path transform="scale(1, -1) translate(0, -1500)"') + '\n')
w.write('</svg>')
最大的问题是没有标记单个 SVG，所以我不得不去手动识别哪些是我想要的。在盲目地浏览文件一段时间后，我认为使用地图会更简单一些，所以我制作了上面程序的一个版本，将所有内容转储到一个长行中的 SVG，这样我就可以恢复文件是什么：
import sys
if len(sys.argv) < 2:
print 'Usage: python {} webfont-file.svg'.format(sys.argv[0])
sys.exit()
with open(sys.argv[1], 'r') as r:
lines = r.read().split('\n')
glyphs = [x for x in lines if '<glyph' in x]
# for every glyph element in the file
with open(str(1).rjust(3, '0') + '.svg', 'w') as w:
w.write('<?xml version="1.0" standalone="no"?>\n')
w.write('<svg width="1500px" height="1500px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n')
for i in range(0, len(glyphs)):
# replace 'glyph' with 'path' and flip vertically
x = 3000 * i
w.write(glyphs[i].replace('<glyph', '<path transform="scale(1, -1) translate({}, -1500)"'.format(x)) + '\n')
w.write('</svg>')
我正在尝试在 Inkscape 中使用 these excellent weather glyphs，而不是作为浏览器中的字体。有什么方法可以将它们转换成我可以导入的常规 SVG 文件吗？
非常感谢， 亚历克斯
TL;DNR
- 从下面的 link 中在您的系统上安装 'Weather Icons' 字体。
- 保存下面的svg文件。
- 在 Inkspace 中打开它，现在您可以将所有字形复制并粘贴为文本或 select 文本框并单击路径 > 对象到路径，然后取消组合直到您拥有单独的字形 select编辑。您现在可以根据需要操作它们。
获取字体
最好的办法是从该项目的网站 page 下载字体并将它们安装到您的系统中。您无需指定正在使用的操作系统，但在大多数情况下，只需双击字体文件即可，系统可能会询问您是否要安装该字体。在此之后，您可以在接受它们的程序中使用这些字体系统范围（在我的例子中，我在从项目页面解压缩下载后安装了 weather-icons-master/font/ 文件夹中的 .ttf 文件；我是 运行 Ubuntu 值得信赖 14.04)
在 Inkscape 中，您可以创建一个文本框，按 Ctrl+U，键入您想要的字形的 unicode，然后按 Enter，如果您将字体更改为 'Weather Icons'，您将看到天气字形.例如，在文本框内，Ctrl+U，然后是 f00d，然后回车将产生 'wi-day-sunny' 字形（link 提供的第一个字形）。
将字体变成路径
在您的问题中，您提到了将字体转换为可以导入的 'regular SVG' 文件。我假设您指的是路径和路径组。
要将字体变成路径 select 文本区域并单击路径 > 对象到路径。
如果您有多个字形，您可以将它们取消组合，直到您找到单个字形，然后您可以根据需要修改、导出和进一步操作。
如何在 Inkscape 中使用 SVG 图标字体 'Cheat Sheets'
我之前在使用 Font Awesome 时遇到过这个问题，现在正在看这个问题：我不想为我想在资产管道中使用的所有字形手动键入 Unicode。这是获取特定字体系列提供的所有图标字体列表的半自动化方法。 警告：为此我将在文本编辑器 (Atom) 中使用正则表达式查找和替换
- 在您的系统上安装您想要的字体。
- 在 Inkscape 中，通过转到扩展 > 文本 > Lorem Ipsum 创建一些虚拟文本（我使用的是 Inkscape 0.91 r）。一段加上几句话就可以了。或者您可以创建一个流动文本框并粘贴您想要的任何文本，我们将很快替换它。
- 突出显示文本框中的所有文本，并将字体更改为所需的字体并放大字体（对于天气图标，我选择了 40，这似乎有效）。
- 保存并退出 Inkscape。
- 在文本编辑器中打开 Inkscape svg (xml) 文件。
- 删除
<flowPara></flowPara>标签之间的虚拟文本 - 从您的浏览器中，复制列出所有字形的字体页面的页面源代码（link 上面提供的）
- 使用正则表达式，查找：
^((?!\&#x[0-9a-f]*;?<\/).)*$替换：无 - 使用正则表达式，查找：
^(.*)(&#x[0-9a-f]*)(.*)$替换：; - 使用正则表达式，查找：
\n替换：无 - 您现在应该有一行文本，其中包含该字体中以分号分隔的字形的所有 unicode 代码，您可以将其粘贴到您打开的 svg 文件中的
<flowPara></flowPara>之间，重新保存并在 Inkscape 中打开。 - 您可能需要调整字体或流动文本框的大小，但现在所有字形都集中在一处。
这对我来说既适用于天气字形，也适用于 Font Awesome。
SVG作弊Sheet代码（'Weather Icons'字体）
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 744.09448819 1052.3622047"
height="297mm"
width="210mm">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<flowRoot
style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="flowRoot4136"
xml:space="preserve"><flowRegion
id="flowRegion4138"><rect
y="17.991203"
x="19.104477"
height="1023.4542"
width="715.05328"
id="rect4140" /></flowRegion><flowPara
style="font-size:50px;-inkscape-font-specification:'Weather Icons';font-family:'Weather Icons';font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal"
id="flowPara4142"></flowPara></flowRoot> <flowRoot
style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:10px;line-height:125%;letter-spacing:0px;word-spacing:0px"
id="flowRoot4148"
xml:space="preserve"><flowRegion
id="flowRegion4150"><rect
y="612.95923"
x="122.8145"
height="379.36035"
width="84.605545"
id="rect4152" /></flowRegion><flowPara
id="flowPara4154"></flowPara></flowRoot> </g>
</svg>
我最终使用了method outlined by Gabi at Helpful Sheep。这是我用来将 .svg 文件拆分成一大堆单独的 .svg 文件的代码，这些文件按顺序编号：
import sys
if len(sys.argv) < 2:
print 'Usage: python {} webfont-file.svg'.format(sys.argv[0])
sys.exit()
with open(sys.argv[1], 'r') as r:
lines = r.read().split('\n')
glyphs = [x for x in lines if '<glyph' in x]
# for every glyph element in the file
for i in range(0, len(glyphs)):
with open(str(i + 1).rjust(3, '0') + '.svg', 'w') as w:
w.write('<?xml version="1.0" standalone="no"?>\n')
w.write('<svg width="1500px" height="1500px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n')
# replace 'glyph' with 'path' and flip vertically
w.write(glyphs[i].replace('<glyph', '<path transform="scale(1, -1) translate(0, -1500)"') + '\n')
w.write('</svg>')
最大的问题是没有标记单个 SVG，所以我不得不去手动识别哪些是我想要的。在盲目地浏览文件一段时间后，我认为使用地图会更简单一些，所以我制作了上面程序的一个版本，将所有内容转储到一个长行中的 SVG，这样我就可以恢复文件是什么：
import sys
if len(sys.argv) < 2:
print 'Usage: python {} webfont-file.svg'.format(sys.argv[0])
sys.exit()
with open(sys.argv[1], 'r') as r:
lines = r.read().split('\n')
glyphs = [x for x in lines if '<glyph' in x]
# for every glyph element in the file
with open(str(1).rjust(3, '0') + '.svg', 'w') as w:
w.write('<?xml version="1.0" standalone="no"?>\n')
w.write('<svg width="1500px" height="1500px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n')
for i in range(0, len(glyphs)):
# replace 'glyph' with 'path' and flip vertically
x = 3000 * i
w.write(glyphs[i].replace('<glyph', '<path transform="scale(1, -1) translate({}, -1500)"'.format(x)) + '\n')
w.write('</svg>')