如何在 Illustrator 中使用 SVG“图标字体”?

平面设计 adobe-illustrator 字体 svg 字形
2022-02-22 05:09:22

Trello 使用图标字体,我想弄清楚如何将一些字形引入 Illustrator 项目。诚然,这有点倒退(通常您想将 Illustrator 艺术导入Glyphs)。我正在 Illustrator 中创建一个板模型以用于视频(After Effects)。

这是 Trello 图标字体 SVG 文件的直接链接:https ://d2k1ftgv7pobq7.cloudfront.net/images/fonts/a91174257e439d87d1987b15ad199035/trellicons-regular.svg

4个回答

我想我已经接近答案了(quack quack),但到目前为止它非常难看。

他们的关键是让 SVG 文件的结构与 Illustrator 的预期相匹配。最简单的开始方法是将现有的 illustrator 文件保存为 SVG,然后在文本编辑器中打开结果。

首先,剥离 XML,以便您拥有 SVG 文件的基本“框架”,没有任何内容。这是一个例子。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px"
   height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">


</svg>

在图标字体的 SVG 文件中,字形看起来像这样(至少对于Trello 的 SVG 图标字体):

<glyph unicode="&#xf001;" d="M120 186q0 109 68 240t195.5 247.5t277.5 164.5l-9 -14q-106 73 -168.5 189.5t-62.5 249.5q0 146 72.5 269.5t197 195.5t271.5 72q144 0 268 -71.5t197 -195.5t73 -270q0 -132 -63 -249t-169 -193l-11 20q115 -37 218.5 -115.5t173 -170.5t110.5 -190t41 -179 q0 -78 -71 -138.5t-192 -96t-267.5 -53.5t-309.5 -18t-309.5 18t-267.5 53.5t-192 96t-71 138.5z" />

在粘贴到我们计划导入 Illustrator 的文件之前,我们需要对其进行一些修改。以下是我必须改变的一些事情:

  • 将单词更改glyphpath
  • 您不需要该unicode属性,因此将其更改为id. (我还修改了该值,因此 Illustrator 不会尝试呈现 Unicode,例如"&#xf001;"变成"xf001"。这可能不是必需的)。
  • 将新的路径元素包装在一个g标签中,其 id 与路径的 id 匹配。

您的字形标签现在应该如下所示:

<g id="xf004">
   <path id="xf004" d="M0 190v1300q0 64 30.5 97t89.5 33h1680q59 0 89.5 -33t30.5 -97v-1300q0 -63 -31 -96.5t-89 -33.5h-1680q-58 0 -89 33.5t-31 96.5zM320 510q0 -58 31 -89t89 -31h667q59 0 89.5 31t30.5 89v60q0 58 -30.5 89t-89.5 31h-667q-58 0 -89 -31t-31 -89v-60zM330 1110 q0 -58 28.5 -89t81.5 -31h1070q110 0 110 120v60q0 120 -110 120h-1070q-53 0 -81.5 -31t-28.5 -89v-60z" />
</g>

放在一起,文件将如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px"
   height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">

<g id="xf004">
   <path id="xf004" d="M0 190v1300q0 64 30.5 97t89.5 33h1680q59 0 89.5 -33t30.5 -97v-1300q0 -63 -31 -96.5t-89 -33.5h-1680q-58 0 -89 33.5t-31 96.5zM320 510q0 -58 31 -89t89 -31h667q59 0 89.5 31t30.5 89v60q0 58 -30.5 89t-89.5 31h-667q-58 0 -89 -31t-31 -89v-60zM330 1110 q0 -58 28.5 -89t81.5 -31h1070q110 0 110 120v60q0 120 -110 120h-1070q-53 0 -81.5 -31t-28.5 -89v-60z" />
</g>

</svg>

当然,您需要对要导入的所有字形应用这些步骤,但这就是宏和搜索/替换的用途:)

我认为最直接的解决方案是将字体文件安装到您的操作系统中,然后在 Illustrator 中输入您认为映射到图标的所有字符。

然后您所要做的就是将字体更改为您安装的字体。这就对了。现在你可以对角色做你想做的事了。

我使用我编写的一个小 XSL 转换将 svg 字体转换为 svg 图形。生成的 svg 文件可以在 illustrator 中打开。

这是xsl:

<xsl:stylesheet
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:xs="http://www.w3.org/2001/XMLSchema"
        xpath-default-namespace="http://www.w3.org/2000/svg"
        version="2.0"
        >
    <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
    <xsl:template match="/">
        <svg>
            <xsl:apply-templates/>
        </svg>
    </xsl:template>

    <xsl:template match="glyph">
        <g>
            <path>
                <xsl:attribute name="d" select="@d" />
            </path>
        </g>
    </xsl:template>

    <xsl:template match="text()"/>

</xsl:stylesheet>

这是我已成功用于导入字体并在 Illustrator 中对其进行编辑的过程。

  1. 使用 FontBook 将 ttf (true-type font) 文件导入您的计算机(如果您不想污染您的字体,您可以在以后轻松删除它)
  2. 打开插画家
  3. 选择“窗口->类型-字形”。
  4. 在 Glyphs 窗口的底部,您可以选择刚刚导入的字体。
  5. 创建一个文本框,然后单击 Glyphs 窗口中的一个图标,使字体出现在文本框中。
  6. 通过选择字体然后选择“类型->创建轮廓”将字体转换为形状
  7. 将字体扩大到正确的大小并进行编辑。
  8. 选择新字体中的所有形状,然后通过选择“Window->Pathfinder”,然后选择“Merge”将它们组合成一个形状
  9. 将文件保存为 SVG,然后导入 icomoon.io 或其他允许您创建字体的服务。