自定义字体未在用作背景图像的 SVG 模式中显示答案

【问题标题】：Custom font not displaying in SVG pattern used as background-image自定义字体未在用作背景图像的 SVG 模式中显示
【发布时间】：2014-09-07 09:18:30
【问题描述】：

我正在使用一种使用自定义字体的 SVG 模式，以便在 HTML 页面上使用该模式作为背景图像。

在 Chrome 和 Safari 中一切正常，但在 Firefox 中开始变得有趣：

当我打开 SVG 文件本身时，Firefox 可以很好地呈现 SVG 和自定义字体文本（到目前为止一切都很好！）；
但是，当同一个 SVG 文件用作 HTML 元素的背景时，Firefox 确实不呈现自定义字体 (!)

我已经花了几个小时试图找出问题所在，欢迎换一双眼睛。

简而言之：

CSS：

@import url(http://fonts.googleapis.com/css?family=Indie+Flower);

body {
    background: url(pattern-google.svg);
}

SVG 文件：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="200">
    <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
    <defs>
        <!-- Geometry -->
        <g>
            <rect id="square" x="0" y="0" width="200" height="200" />
        </g>

        <!-- Patterns with Text -->
        <pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" text-anchor="middle" font-size="20" font-family="Indie Flower, sans-serif" style="font-family: Indie Flower, sans-serif;">
            <rect x="00" y="00" width="40" height="40" fill="transparent" />
            <text x="00" y="00" fill="#777">S</text>
            <text x="40" y="00" fill="#777">S</text>
            <text x="20" y="20" fill="#777">S</text>
            <text x="00" y="40" fill="#777">S</text>
            <text x="40" y="40" fill="#777">S</text>
        </pattern>
    </defs>

    <!-- Graphics -->
    <use xlink:href="#square" transform="translate(0, 0)" fill="url(#pattern)"/>
</svg>

HTML 本身并不重要，但我在下面链接了它。我最终没有生成 jsfiddle，因为我无法在其中托管 SVG 文件。

（在演示之外，这里的实际应用程序是我想使用自定义字体来显示音标。（作为背景图像，以帮助人们学习它们。）在 SVG 中这样做可以省去我每当我对设计进行更改时，都可以导出到位图。）

【问题讨论】：

从 Firefox 46.0.1（或者更早的版本）开始，问题就消失了。

标签： html css firefox svg background-image

【解决方案1】：

您在图像上下文中使用 SVG。 IE。通过 html <img> 标签、SVG <image> 标签或在您的情况下作为背景图像。

在 Firefox 中（并且可能在某些时候在其他 UA 中）图像必须仅包含单个文件。图像文件 (pattern-google.svg) 之外的任何数据都将被忽略。如果您直接显示 SVG，则会加载/使用外部数据。

那你能做什么...

将数据加载为data URI。 IE。 base64 编码 http://fonts.googleapis.com/css?family=Indie+Flower 但在执行此操作之前请阅读最后一段，然后将该数据直接粘贴到 svg 文件本身中。

所以导入看起来像这样......

@import url('data:text/css;base64,whatever the base 64 encoded data looks like...')

但请务必小心，因为http://fonts.googleapis.com/css?family=Indie+Flower 本身具有外部数据，因此数据本身必须被编码为数据 URI。 IE。你必须一直走到兔子洞。并按照我在下面的草图更改该文件。

@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(**convert this file to a data URI too before you convert the whole file to a data URI**) format('woff');
}

完成后，您可以将整个文件编码为数据 URI 并@import。

所以，一步一步地重申......

将http://themes.googleusercontent.com/static/fonts/indieflower/v5/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff 转换为数据URI
将 http://fonts.googleapis.com/css?family=Indie+Flower 替换为具有步骤 1 中数据 URI 的版本
将步骤 2 中的文件转换为数据 URI
@import 步骤 3 中的数据 URI

有很多在线网站会创建数据 URI。

【讨论】：