在iOS中使用SVG顯示自定義字體Chrome和Safari

我使用的是自定義字體從谷歌svg，但我自己託管它。下面是the SVG file用下面的代碼：在iOS中使用SVG顯示自定義字體Chrome和Safari

<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文件代碼的線索？謝謝！

來源

2013-10-07 Sayanee

爲了簡單起見，我已將其轉換爲路徑，它適用於所有桌面和移動瀏覽器。這是一個工作，雖然。 – Sayanee

我們最近有同樣的問題，在SVG圖像中顯示自定義字體。在實施此修復之前，文本不會在某些設備上的iOS中顯示。經過很多調試並嘗試不同的方式來解決它，我們最終得到了一個CSS Font Fallback解決方案。這是我們解決同樣問題的唯一方法。

下面是我們如何實現它：

首先，我們提取使用Adobe Illustrator這樣的字符的形狀：

<defs> 
<style type="text/css"> 
    <![CDATA[ 
    @font-face { 
    font-family: 'RobotoCondensed-Light-Fallback'; 
    font-style: normal; 
    font-weight: 300; 
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRg............7yEuAS1Fmtsgn2C3mGC7pcSzGaItVzpDHKXKRoB2nd8b5m1ni67q0DVvtWpxe61sF59tcm+qiK+1YY21P2oWNdkPaA1Nv0meNl0KL0HwqtAmtRKFDaA9/APTVpT1K/YclSp7tiAGxtzbsEoOZYV9u9g8VM0kokz6M/klEI+HecECMVpoFhuIDsL5bmwAAAVSQKFMAAA==) format('woff'); 
    } 
    ]]> 
</style> 
</defs>

：

<font horiz-adv-x="2048"> 
<font-face font-family="RobotoCondensed-Light" units-per-em="2048" underline-position="-150" underline-thickness="100"/> 
<missing-glyph horiz-adv-x="434"/> 
<glyph unicode=" " horiz-adv-x="434"/> 
<glyph unicode="&quot;" horiz-adv-x="549" d="M217,1341l-36,-261l-68,0l2,254l0,226l102,0M442,1341l-36,-261l-68,0l2,258l0,222l102,0z"/> 
<glyph unicode="," horiz-adv-x="346" d="M246,19l-100,-277l-77,0l56,280l0,168l121,0z"/> 
<glyph unicode="-" horiz-adv-x="497" d="M445,568l-399,0l0,104l399,0z"/> 
<glyph unicode="." horiz-adv-x="440" d="M276,0l-130,0l0,166l130,0z"/> 
<glyph unicode="0" horiz-adv-x="978" d="M867,564C867,376 834,232 767,131C700,30 607,-21 490,-21C372,-21 279,30 212,131C144,232 110,377 110,564l0,326C110,1077 144,1221 211,1324C278,1426 370,1477 488,1477C606,1477 699,1426 766,1324C833,1222 867,1077 867,890M747,911C747,1059 725,1173 681,1252C636,1331 572,1371 488,1371C405,1371 341,1331 297,1252C253,1172 231,1058 231,911l0,-366C231,398 253,285 298,204C343,123 407,83 490,83C573,83 637,123 681,204C725,284 747,398 747,545z"/> 
<!-- ...... Complete characterset ...... --> 
</font>

然後，我們使用CSS定義的字體

一旦我們命名字體「RobotoCondensed-Light-Fallback」，然後：

<text style="font-family:RobotoCondensed-Light,RobotoCondensed-Light-Fallback,Arial,sans-serif; font-weight: 300" font-size="36">Text</text>

會發生什麼情況是iOS使用<font-face>而所有其他瀏覽器都使用備用字體。

希望這會有所幫助！

對於您的信息，我們在SVG中使用了這個定義。

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="270px" height="303px" viewBox="0 0 270 303" enable-background="new 0 0 270 303" preserveAspectRatio="xMidYMid meet" xml:space="preserve">

來源

2015-03-12 15:22:12

在iOS中使用SVG顯示自定義字體Chrome和Safari

回答

相關問題