Question

遇到svg字体的问题。

这是我的index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>

    <img src="sign.svg"></img>

    </body>
</html>

这是我的svg文件

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 47.2 110 20.6" enable-background="new 0 47.2 110 20.6" xml:space="preserve">
<defs>
    <style type="text/css">
        @font-face {
          font-family: 'Indie Flower';
          font-style: normal;
          font-weight: 400;
          src: url('http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6qRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
        }
    </style>
</defs>
<text transform="matrix(1 0 0 1 23.4251 58.5378)" fill="#004888" font-family="'Indie Flower'" font-size="12">My sign</text>
</svg>

在我的Mac上的Safari字体看起来应该是这样的 enter image description here

但在其他地方，字体显示为常规字体 enter image description here

iPhone上的

根本就没有出现。

如果要在常规css中使用此字体，它会在任何地方正确呈现。你能告诉我我做错了吗？

Answer 1

如果您在图片上下文中使用SVG，例如通过<img>标记，它必须在单个文件中完成。

您需要将woff数据从外部文件转换为data URI并将其嵌入SVG文件中。

在Chrome中使用@ font-face在网页上加载svg字体

1 个答案: