html - 无法使用 @font-face 在 SVG 文件上使用字体

Question

我尝试在我的 SVG 文件上使用自定义字体但失败了。我在普通的 HTML/CSS 网页上试过了，效果很好。但是当涉及到 SVG 时，我尝试了网站上建议的方法，但没有用。

<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="500" height="500"
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<script type="text/css">
<![CDATA[
    @font-face {font-family: "waffle_regularregular";src:url('/font/waffleregular-webfont.eot');src: url('/font/waffleregular-webfont.eot?#iefix') format('embedded-opentype'),url('/font/waffleregular-webfont.woff2') format('woff2'),url('/font/waffleregular-webfont.woff') format('woff'),url('/font/waffleregular-webfont.ttf') format('truetype'),url('/font/waffleregular-webfont.svg#waffle_regularregular') format('svg');font-weight: normal;font-style: normal;}
]]>
</script>
<script type="text/css">
<![CDATA[
    text {font-family: "waffle_regularregular"}
]]>
</script>
</defs>
<text x="250" y="250" style="text-anchor:middle;font-size:30px;fill:white">ทดสอบ test ព័ត៌មានតាមថ្ងៃ 日本語 中文</text>

每次我在 Chrome 和 Firefox 上打开它时，他们都会选择 Linux 系统字体来显示。为了测试，我将文本的字体系列样式更改为其他 Linux 字体，并且效果很好。它只是不使用我的自定义字体。

我的自定义字体是泰语字体，由 fontsquirrel.com 生成。我试图这样做以确保所有客户在我的 SVG 上看到相同的字体。

我在浏览器上检查了自定义字体的路径，它们都可用。请提出建议。

Answer 1

您需要使用style 而不是script 来加载和指定字体:

<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="500" height="500"
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
    @font-face {font-family: "waffle_regularregular";src:url('/font/waffleregular-webfont.eot');src: url('/font/waffleregular-webfont.eot?#iefix') format('embedded-opentype'),url('/font/waffleregular-webfont.woff2') format('woff2'),url('/font/waffleregular-webfont.woff') format('woff'),url('/font/waffleregular-webfont.ttf') format('truetype'),url('/font/waffleregular-webfont.svg#waffle_regularregular') format('svg');font-weight: normal;font-style: normal;}
]]>
</style>
<style type="text/css">
<![CDATA[
    text {font-family: "waffle_regularregular"}
]]>
</style>
</defs>
<text x="250" y="250" style="text-anchor:middle;font-size:30px;fill:white">ทดสอบ test ព័ត៌មានតាមថ្ងៃ 日本語 中文</text>
</svg>

这应该可以正常工作(只要字体路径正确)。