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

概述我正在使用带有谷歌自定义字体的svg,但我自己托管它.这是 the SVG file,代码如下： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="430" height="590"> <defs> <style type="text/css"><![CDATA[ @font-face { 我正在使用带有谷歌自定义字体的svg,但我自己托管它.这是 the SVG file,代码如下：

<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文件代码的任何线索？谢谢！

解决方法 我们最近遇到了在SVG图像中显示自定义字体的问题.在实施此修复程序之前,某些设备上的文本不会显示在iOS中.经过大量的调试并尝试不同的方法来解决它之后,我们最终得到了CSS字体后备解决方案.这是我们解决您描述的同一问题的唯一方法.

以下是我们实施它的方式：

首先,我们使用Adobe Illustrator提取字符的形状,如下所示：

<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,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,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定义了字体：

<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>

一旦我们将字体命名为“RobotoCondensed-light-Fallback”然后：

<text  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">

总结

以上是内存溢出为你收集整理的在SVG for iOS Chrome和Safari中显示自定义字体全部内容，希望文章能够帮你解决在SVG for iOS Chrome和Safari中显示自定义字体所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。