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

debugcn 发表于 Dev

还

我试图在我的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字体，并且效果很好。它只是不使用我的自定义字体。

我的自定义字体是Thai字体，由fontsquirrel.com生成。我正在尝试这样做，以确保所有客户端在我的SVG上都能看到相同的字体。

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

阿尔瓦罗·蒙托罗（Alvaro Montoro）

您需要使用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>

那应该工作正常（只要字体的路径正确）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。