在 SVG 中为 iOS Chrome 和 Safari 显示自定义字体答案

【问题标题】：Displaying custom fonts in SVG for iOS Chrome and Safari在 SVG 中为 iOS Chrome 和 Safari 显示自定义字体
【发布时间】：2020-06-10 19:50:35
【问题描述】：

我正在使用来自谷歌的自定义字体的 svg，但我自己托管它。这是the SVG file，代码如下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="430" height="590">

  <defs>
    <style type="text/css"><![CDATA[
      @font-face {
        font-family: 'Fjalla';
        src: url('http://build-podcast.com/fonts/fjalla.eot');
        src: url('http://build-podcast.com/fonts/fjalla.eot?#iefix') format('embedded-opentype'),
          url('http://build-podcast.com/fonts/fjalla.woff') format('woff'),
          url('http://build-podcast.com/fonts/fjalla.ttf') format('truetype'),
          url('http://build-podcast.com/fonts/fjalla.svg#fjalla') format('svg');
        font-weight: normal;
        font-style: normal;
      }
      text { font-family: Fjalla, sans-serif; font-weight: bold; fill: #4b5568; }
      ]]>
    </style>
  </defs>

  <g id="logo">
    <text x="135" y="60" font-size="210" transform="rotate(45)">/</text>
    <text x="115" y="363" font-size="210" transform="rotate(-45)">\</text>
    <text x="15" y="341" font-size="200">build</text>
    <text x="15" y="475" font-size="127">podcast</text>
    <text x="21" y="540" font-size="36">screencasts on tech tools</text>
  </g>

</svg>

我正在使用img 标签在main website 上显示它

<img src="logo.svg">

它在桌面浏览器甚至 Android Chrome 等移动浏览器上都能正常显示。但它在 iOS 7 Chrome 或 Android 中根本不显示。关于如何修改自定义字体部分的 SVG 文件代码的任何线索？谢谢！

【问题讨论】：

为简单起见，我已将其转换为路径，它适用于所有桌面和移动浏览器。不过，这是一种解决方法。

标签： ios svg webfonts

【解决方案1】：

我厌倦了试图让字体在我的 SVG 中在所有设备/浏览器中正常工作，因此通过我的工作帮助我访问了原始 .ai 文件（.eps 很好）。

我的步骤包括：
- 在 Adobe Illustrator 中打开原始矢量文件。
- 选择您的文本图层。选择多个时按住 shift。我发现通过 Layers 面板选择多层更容易，您可以在 Window 下的 Menu 中找到该面板。
- 然后，转到菜单选项 Type 并选择 Create Outlines。

这样我们就不必依赖调用字体，因为您的文本现在只是一个矢量形状。现在剩下的就是保存您的 SVG：
- 选择所有向量。
- 转到菜单选项对象并选择 画板 > 适合所选艺术。
- 现在转到 File 并选择 Export Selection...。
- 应该会弹出 Export for Screens 对话框。在您的资产上方的左侧，点击上方的画板标签
- 在右侧，选择要保存的位置。
- 重要步骤： 选择您的格式为 *SVG。
- 最后，点击右下角的Export Artboard。

仅此而已，一切都将在所有设备和浏览器中完全按照应有的方式显示！

【讨论】：

【解决方案2】：

我们最近在 SVG 图像中显示自定义字体时遇到了同样的问题。在实施此修复之前，文本不会在某些设备上的 iOS 中显示。经过大量调试并尝试不同的方法来解决它，我们最终得到了 CSS Font Fallback 解决方案。这是我们解决与您描述的相同问题的唯一方法。

以下是我们的实现方式：

首先我们使用 Adobe Illustrator 提取字符的形状，如下所示：

<font horiz-adv-x="2048">
<font-face font-family="RobotoCondensed-Light" units-per-em="2048" underline-position="-150" underline-thickness="100"/>
<missing-glyph horiz-adv-x="434"/>
<glyph unicode=" " horiz-adv-x="434"/>
<glyph unicode="&quot;" horiz-adv-x="549" d="M217,1341l-36,-261l-68,0l2,254l0,226l102,0M442,1341l-36,-261l-68,0l2,258l0,222l102,0z"/>
<glyph unicode="," horiz-adv-x="346" d="M246,19l-100,-277l-77,0l56,280l0,168l121,0z"/>
<glyph unicode="-" horiz-adv-x="497" d="M445,568l-399,0l0,104l399,0z"/>
<glyph unicode="." horiz-adv-x="440" d="M276,0l-130,0l0,166l130,0z"/>
<glyph unicode="0" horiz-adv-x="978" d="M867,564C867,376 834,232 767,131C700,30 607,-21 490,-21C372,-21 279,30 212,131C144,232 110,377 110,564l0,326C110,1077 144,1221 211,1324C278,1426 370,1477 488,1477C606,1477 699,1426 766,1324C833,1222 867,1077 867,890M747,911C747,1059 725,1173 681,1252C636,1331 572,1371 488,1371C405,1371 341,1331 297,1252C253,1172 231,1058 231,911l0,-366C231,398 253,285 298,204C343,123 407,83 490,83C573,83 637,123 681,204C725,284 747,398 747,545z"/>
<!-- ...... Complete characterset ...... -->
</font>

然后我们使用 CSS 定义字体：

<defs>
<style type="text/css">
    <![CDATA[
    @font-face {
    font-family: 'RobotoCondensed-Light-Fallback';
    font-style: normal;
    font-weight: 300;
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRg............7yEuAS1Fmtsgn2C3mGC7pcSzGaItVzpDHKXKRoB2nd8b5m1ni67q0DVvtWpxe61sF59tcm+qiK+1YY21P2oWNdkPaA1Nv0meNl0KL0HwqtAmtRKFDaA9/APTVpT1K/YclSp7tiAGxtzbsEoOZYV9u9g8VM0kokz6M/klEI+HecECMVpoFhuIDsL5bmwAAAVSQKFMAAA==) format('woff');
    }
    ]]>
</style>
</defs>

一旦我们将字体命名为“RobotoCondensed-Light-Fallback”，奇迹就发生了，然后：

<text style="font-family:RobotoCondensed-Light,RobotoCondensed-Light-Fallback,Arial,sans-serif; font-weight: 300" font-size="36">Text</text>

发生的情况是 iOS 使用 <font-face> 而所有其他浏览器都使用后备字体。

希望这会有所帮助！

为了您的信息，我们在 SVG 中使用了这个定义。

<?xml version="1.0" encoding="utf-8"?>
<!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="270px" height="303px" viewBox="0 0 270 303" enable-background="new 0 0 270 303" preserveAspectRatio="xMidYMid meet" xml:space="preserve">

【讨论】：

我正在使用 google 字体，并将 base64 编码的字体数据添加到 svg 中。它在浏览器上加载正常，但是当我在 Adobe Illustrator 中打开该 svg 时，字体丢失。有什么帮助吗？

【解决方案3】：

FWIW，双分辨率的 Tiny PNG 优化的 PNG 可能会waaay 小于文本转换为曲线的重文本 SVG。

对于一个带有大约 50 个 2 到 6 个字的标签的轮廓 SVG，我得到了大约 400k，但导出为 PNG，通过 Tiny PNG 运行它并得到 70k。

因此，如果您只需要用于视网膜屏幕的东西，请考虑使用 PNG 路线：

【讨论】：