自定義字體在

，我與使用自定義字體，以便使用該圖案作爲背景圖像在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

自定義字體在

回答

相關問題