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

2024-03-30

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>

In Safari on my Mac font looks as it should enter image description here

but everywhere else the font appear as a regular one enter image description here

在 iPhone 上根本不会出现。

如果在常规 CSS 中使用此字体，它会在各处正确渲染。你能建议我我做错了什么吗？

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

1.生成base64嵌入字体url

下载您要使用的字体文件.ttf扩大。我们需要将嵌入式作为数据 URI 方案 https://en.wikipedia.org/wiki/Data_URI_scheme.
将此字体文件上传到任何在线 Data URI 转换器，我在用着dopiaza.org 数据 URI 生成器 https://dopiaza.org/tools/datauri/index.php为简单起见（或者您可以使用任何文件到 Base64 转换器工具，只要您遵循相同的 data-uri 生成模式）。

将字体文件上传到转换器。确保Use base64 encoding已检查。由于我们要嵌入字体，所以选择显式指定 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 文件。在标签内声明@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>

就这样。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)