SVG `text` 和小型、可缩放、无障碍的排版设计

假设您使用自定义字体设计了一些东西，而且设计稍微有点花哨。 也许某个单词的位置位于另一个单词下方升部之间。 某些文本的字距调整到与同一个单词的宽度相匹配。

我们可能会告诉从印刷转向网页的平面设计师避免这种做法。 它过于讲究。 太多难以调整、不可缩放的绝对定位。 来自不同字体渲染行为的风险太大。

但使用内联 SVG，我们可以做到，而且可以做得很好。

SVG <text>

这里最大的“技巧”是 SVG 有一个 <text> 元素，它正是文本。 不是文本的轮廓，只是普通的可选择、无障碍的网页文本。

<svg xmlns="http://www.w3.org/2000/svg"
     width="800px" height="300px" viewBox="0 0 800 300">

  <text x="25" y="55" 
        font-family="'Lucida Grande', sans-serif" 
        font-size="32">

    Regular ol' text here. Hi.

  </text>

</svg>

看。

<text> 很乐意使用自定义字体

在您的网站上使用 @font-face 和自定义字体？ 没问题。 该 SVG 很乐意使用它们。 这适用于内联 SVG，您可以在其中使用 CSS 设置 font-family

<text class="hook">Some Cool Text Yeah.</text>

.hook {
  font-family: "proxima-nova", sans-serif;
}

但它甚至适用于 SVG 作为 <img>（或 background-image，大概）也是如此，只要 font-family 引用了正确名称的自定义字体即可。

<text x="25" y="55" 
        font-family="'proxima-nova', sans-serif" 
        font-size="32">

使用设计软件

我还没有测试过很多不同的软件，但 Adobe Illustrator 可以“另存为”SVG。 当您使用文本元素进行设计时，您会在 .svg 文件中获得 <text>。

您可能需要进行一些手动调整才能删除或调整字体属性/样式。

这样做的好处是它消除了使用 CSS 进行定位的繁琐任务，并允许您直接在擅长此任务的软件中进行操作。 然后，实际定位将通过该矩阵转换来完成。

完美缩放

如果您尝试仅使用 HTML/CSS 复制这样的设计，不仅定位会很麻烦，而且它也不可缩放。 像 font-size: 41px; top: 37px; left: 81px; 这样的代码仅在一种大小下有效。 也许您可以使用 vw 单位和百分比等来进行操作，但这在 SVG 中要容易得多。

在 SVG 中，您设置的字体大小是相对于 SVG 本身的大小，而不是整个文档的大小。 因此，如果您调整 SVG 的大小（它可以很容易地是流体宽度），您的排版设计将保持完好无损。

流体宽度的一种设置

<div class="ad-wrapper">
  <svg class="ad">
    <text ... />
    <text ... />
    <text ... />
  </svg>
</div>

/*div*/.ad-wrapper {
  height: 0;
  padding-top: 100%;
  position: relative;
}
/*svg*/.ad {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

使用您在网络上拥有的字体进行设计

如果您可以在本地软件中使用您也通过 @font-face 可用的字体进行操作，那么此工作流程最有效。 例如，如果您使用 Open Sans，您可以从 Font Squirrel 下载桌面版副本，然后通过 Google Fonts 在网络上使用它。

我认为 Typekit 的 桌面同步功能 使此工作流程非常不错。 当您选择字体时，您可以将它们添加到套件中以在网络上使用，并通过 Creative Cloud 工具在本地同步。

然后它们将在 Illustrator 中可用。

它有点奇怪，因为 font-family 名称会略有不同。 例如，您可能会从 Illustrator 中获得以下内容

<text font-family="'MarketOT'">Example</text>

但在网络上，它需要像这样

<text font-family="ff-market-web, cursive">Example</text>

但嘿，这只是工作的一部分。 也许有充分的理由这样做。 也许有一天他们可以同步这些东西。

何时使用

如果您在网站上的其他地方使用相同的自定义字体，那么这是一个明智之举，您可以根据需要使用 <text> 驱动的设计。 如果使用的字体没有在其他地方使用，那么只为一个图形包含整个自定义字体可能是一项艰巨的任务。 或者也许不是。 您需要自己权衡利弊。

在我的示例中，我使用了来自 Typekit 的 Proxima Nova 和 FF Market，该套件大小约为 115K。 如果网站的其他部分也使用这些字体，那么这并不算太糟糕。 但随后我将示例转换为轮廓（这意味着 <text> 已移除，并改用 <path> 来绘制字母形状），文件大小从令人难以置信的 4K 膨胀到令人难以置信的 260K（大于整个字体，尽管已解压缩）。

我确信在某些情况下，轮廓是有意义的，有时甚至视网膜光栅图形也能正常工作，假设您采取了所有必要的无障碍步骤（至少要有一个好的 alt 标签）。

演示

这是一个演示，展示了所有功能，包括缩放、可选择性和自定义字体。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 带有 <text> 元素的 SVG 示例。