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系统字体。为了测试，我将文本的font-family样式更改为其他Linux字体，并且它工作正常。它只是没有使用我的自定义字体。

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

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

Answer 1

您需要使用file_get_contents代替style来加载和指定字体：

script

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

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

1 个答案: