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

【问题标题】：svg fonts are not loading on a webpage using @font-face in Chromesvg 字体未在 Chrome 中使用 @font-face 加载到网页上
【发布时间】：2015-06-12 04:59:50
【问题描述】：

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 中使用此字体，它会在任何地方正确呈现。你能告诉我我做错了什么吗？

【问题讨论】：

sign.svg 是否保存在正确的内容类型中，并且 sign.svg 是位置？
如果 css 有效，为什么要使用 SVG？
@Pierre Granger，我想使用 Illustrator 创建一个标识
@Cas Bloem，我不确定内容类型，您可以从我的问题中的 svg 文件中查看所有信息。是的 sign.svg 是一个文件。
也许你需要为你的字体导入一个svg文件，比如url('http://....svg') format(''svg')，但我无法测试，因为我在网上找不到svg文件:(

标签： css html svg fonts

【解决方案1】：

出于安全原因，嵌入的 svg 图像必须是独立图像。 您需要通过嵌入所有外部资源（在我们的例子中是字体定义）来使 svg 成为“独立”的。要将字体嵌入到 svg 文件中，请按照下列步骤操作：

1。将嵌入的字体 url 生成为 base64

在.ttf 扩展名下下载您要使用的字体文件。我们需要嵌入为data URI scheme。
将此字体文件上传到任何在线数据 URI 转换器，为简单起见，我使用dopiaza.org data URI generator（或者您可以使用任何文件到 Base64 转换器工具，只要您遵循相同的 data-uri 生成模式）。

将字体文件上传到转换器。确保选中Use base64 encoding。由于我们要嵌入字体，所以选择 Explicitly specified mime type 并将mime类型为application/font-woff

点击 Generate Data URI 并让工具完成工作，它应该为您提供以下数据 URI 格式：
data:<mime-type>;base64,<the_encoded_font_as_base64_content>

在我们使用字体作为 Mime-Type 的例子中，它将是：

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

2。在我们的 SVG 文件中声明嵌入的字体

编辑使用该字体的 SVG 文件。在标签内声明@font-face。把上面生成的data-uri URL放在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>

仅此而已。

【讨论】：

这行得通，但让人们感到困惑的是，许多图像查看器只会显示默认字体。 4kb 的 mu 图像也有 150kb 大，因此在使用时需要考虑。

【解决方案2】：

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

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

【讨论】：

谢谢，它几乎可以在任何地方使用。最后一件事，它仍然无法在 iPhone 上渲染，有什么建议吗？