ios - 在 iOS Chrome 和 Safari 的 SVG 中显示自定义字体

Question

我正在使用带有来自谷歌的自定义字体的 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 文件代码的任何线索？谢谢!

Answer 1

我受够了尝试让字体在我的 SVG 中在所有设备/浏览器中正常工作，所以通过我的工作，我可以访问原始的 .ai 文件(.eps 很好)。

我的步骤包括:
- 在Adobe Illustrator 中打开原始矢量文件。
- 选择你的文字图层。选择多个时按住 shift 键。我发现通过 Layers 面板选择多层更容易，您可以在 Window 下的菜单中找到它。
- 然后，转到菜单选项类型并选择创建大纲。

这样我们就不必依赖于调用字体，因为您的文本现在只是一个矢量形状。现在剩下的就是保存您的 SVG:
- 选择所有向量。
- 转到菜单选项对象，然后选择画板>适合所选艺术。
- 现在转到文件并选择导出选择...。
- 应弹出一个屏幕导出对话框。在 .your Asset(s) 上方的左侧，单击上方的 Artboards 选项卡
- 在右侧，选择您要保存的位置。
- 重要步骤:选择格式为 *SVG。
- 最后，点击右下角的导出画板。

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