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

问题描述：

我正在使用带有来自Google的自定义字体的svg，但我自己托管它.这是 SVG文件，其中包含以下代码:

I'm using an svg with custom fonts from google, but i'm hosting it myself. Here's the SVG file with the following code:

<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标记将其显示在主网站上

I'm using the img tag to display it on the main website

<img src="logo.svg">

在台式机浏览器，甚至在Android Chrome等移动浏览器上，它的显示效果都很好.但它根本不会在iOS 7 Chrome或Android中显示.关于如何在自定义字体上修改该部分的SVG文件代码的任何线索?谢谢！

It is displaying fine on desktop browsers and even on mobile browsers like Android Chrome. But it is not displaying at all in iOS 7 Chrome or Android. Any clue to how I can amend the SVG file code for the part on the custom fonts? Thanks!

答

我受够了尝试使字体在所有设备/浏览器中都能在SVG中正常工作的方法，因此我对周围的工作有所帮助，可以访问到原始的.ai文件(.eps即可).

我的步骤包括:
-在Adobe Illustrator中打开原始矢量文件.
-选择您的文字图层.选择多个时按住Shift.我发现更容易通过 Layers (图层)面板选择多层，您可以在 Window (窗口)下的Menu(菜单)中找到该面板.
-然后转到菜单选项类型，然后选择创建轮廓.

这样，我们不必依赖调用字体，因为您的文本现在只是矢量形状.现在剩下的就是保存您的SVG:
-选择所有载体.
-转到菜单选项对象，然后选择画板>适合选定的画.
-现在转到文件，然后选择导出选择... .
-应该会弹出一个屏幕导出对话框.在.您的资产上方的左侧，点击上方的画板标签
-在右侧，选择要保存的位置.
-重要步骤:将格式选择为 * SVG .
-最后，点击右下角的导出画板.

这就是全部，所有内容将在所有设备和浏览器上完全正确显示！

I got fed up with trying to make the fonts to properly work in my SVG across all devices/browsers, so with my work around it helped that I have access to the original .ai file (.eps is fine).

My steps included:
- Open the original vector file in Adobe Illustrator.
- Select your text layers. Hold shift when selecting more than one. I find it easier do select multi layers through the Layers panel, which you can find in Menu under Window.
- Then, go to menu option Type and select Create Outlines.

This way we do not have to rely on calling fonts because your text is now just a vector shape. Now all that is left is to save your SVG:
- Select all your vectors.
- Go to menu option Object and select Artboards > Fit to Selected Art.
- Now go to File and select Export Selection....
- A Export for Screens dialog should pop up. On left side above .your Asset(s), click on the Artboards tab above
- On the right side, choose where you want to save.
- IMPORTANT STEP: select your format as *SVG.
- Lastly, click Export Artboard at bottom right.

That's all there is too it, and everything will appear exactly as it should across all devices and browsers!

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

相关推荐