Chrome浏览器中使用@font-face加载网页时，SVG字体无法加载

Question

Chrome浏览器中使用@font-face加载网页时，SVG字体无法加载

3

遇到了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浏览器时，字体看起来像应该的样子：

但在其他地方，字体看起来像普通字体：

在iPhone上根本不显示。

如果将此字体用作常规CSS中的字体，则可以在所有位置正确呈现。请问我做错了什么？

- fen1ksss

sign.svg的保存内容类型是否正确，并且sign.svg是位置吗？ - Cas Bloem

如果CSS可以工作，为什么要使用SVG呢？ - Pierre Granger

@Pierre Granger，我想使用Illustrator创建一个标志设计。 - fen1ksss

也许你需要为字体导入一个 SVG 文件，像 url('http://....svg') format(''svg') 这样，但是我无法测试，因为我找不到在线的 SVG 文件 :( - Pierre Granger

只有一件事：在http://www.w3.org/TR/SVG/fonts.html中，他们使用`<text style="font-family:'Indie Flower'"...而不是<text font-family="Indie Flower"`，但这并不能解决你的问题:( - Pierre Granger

显示剩余3条评论

3个回答

1

如果您在图像上下文中使用SVG，例如通过<img>标签，它必须在单个文件中完整。您需要将外部文件中的woff数据转换为data URI并嵌入SVG文件中。

- Robert Longson

谢谢，它几乎在任何地方都可以运行。最后一件事，它还是无法在 iPhone 上渲染，有什么建议吗？ - fen1ksss

0

将整个字体作为base64嵌入SVG中，如@ThangLeQuoc所述，可以正常工作，但它肯定会增加文件大小（最终大小= SVG大小+字体大小），如果您对每个SVG文件都这样做，您将浪费很多空间。最好的解决方案是使用URL。

Google通过URL提供了许多字体，但您也可以上传自定义字体并在SVG中使用链接。网站应返回包含字体详细信息的CSS样式文本文件（您可以打开此URL作为参考，以查看其外观）。

要使用托管字体而不是使用本地嵌入字体，您只需要使用@import url()，如下面的代码：

<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Monoton:400,400i,700,700i");
.st10{font-family:'Monoton';}
.st11{font-size:36px;}
</style>

现在已经导入了名为“Monoton”的字体文件，可以以不同的样式使用它。

- Mehrdad995

1

这适用于内联的SVG，但不适用于加载外部SVG的<img>元素。您将看到一个备用字体。 - herrstrietzel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ThangLeQuoc · Accepted Answer

为了安全起见，嵌入式svg图像必须是独立的图像。您需要通过将所有外部资源（在我们的情况下是字体定义）嵌入到其中来使svg“独立”。
要将字体嵌入到svg文件中，请按照以下步骤操作：

1. 将嵌入的字体URL生成为base64

下载您想使用的字体文件，扩展名为.ttf。我们需要将它作为数据URI方案进行嵌入。
将此字体文件上传到任何在线数据URI转换器中，我使用dopiaza.org数据URI生成器是为了简单（或者您可以使用任何文件到Base64转换器工具，只要遵循相同的数据URI生成模式）。

上传字体文件到转换器中。确保选中了使用base64编码。由于我们正在嵌入字体，所以选择明确指定mime类型并将mime类型设置为application/font-woff

点击生成数据URI并让工具执行任务，它应该向您呈现以下数据URI格式：
data:<mime-type>;base64,<the_encoded_font_as_base64_content>

在我们的情况下，使用字体作为Mime-Type，它将是：

data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....

2. 在SVG文件中声明嵌入字体

编辑使用该字体的SVG文件。在<style>标签内声明@font-face。将生成的数据URI链接放置在src: url("<generated_data_uri>")之前。

<svg>
    <defs>
        <style>
            @font-face {
                font-family: Inter;
                src: url("data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....")
            }
        </style>
    </defs>

    <!-- The rest of your SVG content goes here -->
</svg>

And that's all.