无法使用 @font-face 在 SVG 文件上使用字体
Cannot use @font-face to use font on a SVG file
我尝试在我的 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 上看到相同的字体。
我在浏览器上查看了自定义字体的路径,它们都可用。请大家多多指教
您需要使用 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>
这应该可以正常工作(只要字体路径正确)。
我尝试在我的 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 上看到相同的字体。
我在浏览器上查看了自定义字体的路径,它们都可用。请大家多多指教
您需要使用 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>
这应该可以正常工作(只要字体路径正确)。