自定义字体在

，我与使用自定义字体，以便使用该图案作为背景图像在HTML页面中的SVG图形工作作为背景图像SVG图形不显示。自定义字体在

一切都呈现精致的Chrome和Safari浏览器，但它开始在Firefox中获得搞笑：

火狐呈现SVG与自定义字体的文字就好了一起，当我打开SVG文件本身（到目前为止好！）;
不过，Firefox没有不呈现自定义字体了，当同一SVG文件作为背景，以一个HTML元素（！）

我花了几个小时试图找出问题和新鲜的一双眼睛会受到欢迎。

这是我在很短得：

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中这样做可以省去我的麻烦随时在设计中进行更改以导出到位图。）

感谢您的帮助。

来源

2014-07-16 Fabien Snauwaert

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

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

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

所以，你能做些什么......

加载数据作为data URI。即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。即你必须一路走下兔子洞。按照我在下面勾画的那样更改该文件。

@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
与步骤1
有数据URI一个版本替换http://fonts.googleapis.com/css?family=Indie+Flower转换文件步骤2到来自步骤a的数据URI
@import数据URI 3

有很多ö在线的f站点将创建数据URI。

来源

2014-07-16 21:11:09

自定义字体在

回答

相关问题