遇到了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浏览器时,字体看起来像应该的样子:
![enter image description here](https://istack.dev59.com/IYag3.webp)
但在其他地方,字体看起来像普通字体:
![enter image description here](https://istack.dev59.com/PA0Zx.webp)
在iPhone上根本不显示。
如果将此字体用作常规CSS中的字体,则可以在所有位置正确呈现。请问我做错了什么?
url('http://....svg') format(''svg')
这样,但是我无法测试,因为我找不到在线的 SVG 文件 :( - Pierre Granger而不是
<text font-family="Indie Flower"`,但这并不能解决你的问题:( - Pierre Granger