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 图像必须是独立图像。 您需要通过嵌入所有外部 Assets 来使 svg 成为“独立的”(在我们的例子中是字体定义)。 要将字体嵌入到 svg 文件中，请按照下列步骤操作:
1。将嵌入的字体 url 生成为 base64
在.ttf下下载你要使用的字体文件扩大。
我们需要嵌入为 data URI scheme .
将此字体文件上传到任何在线数据 URI 转换器，
我正在使用 dopiaza.org data URI generator为简单起见(或者您可以使用任何文件到 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>
仅此而已。
关于css - svg 字体未在 Chrome 中使用 @font-face 加载到网页上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29494271/