svg 字体无法在 Chrome 中使用 @font-face 加载到网页上
fen*_*sss 3 html css fonts svg
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 中使用此字体，它会在各处正确渲染。你能建议我我做错了什么吗？
出于安全原因，嵌入的 svg 图像必须是独立图像。您需要通过将所有外部资源（在我们的例子中是字体定义）嵌入其中来使 svg 成为“独立”。要将字体嵌入到 svg 文件中，请按照下列步骤操作：
1. 生成内嵌字体url为base64
下载您想要在扩展名下使用的字体文件.ttf。我们需要嵌入数据 URI 方案。
将此字体文件上传到任何在线数据 URI 转换器，为了简单起见，我使用dopiaza.org 数据 URI 生成器（或者您可以使用任何文件到 Base64 转换器工具，只要您遵循相同的数据 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>
就这样。