<svg version="1.1" id="Layer_1"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="600px" height="600px" viewbox="0 0 600 600">
<style type="text/css" >
<![CDATA[
@font-face {
font-family: uGillSansLocal;
src: local('Gill Sans');
}
@font-face {
font-family: uGillSansURL;
src: url('./GillSans.ttf');
}
]]>
</style>
<rect id="Border" x="0" y="0" stroke="#000000" fill="#FFFFFF" width="600" height="600"/>
<text x="100" y="30" font-size="32px" font-family="uGillSansLocal">
<tspan>uGillSans local</tspan>
<tspan x="100" dy="40">qwertyuiop[]\asdfghjkl;'</tspan>
<tspan x="100" dy="40">zxcvbnm,./QWERTYUIOP[]|</tspan>
<tspan x="100" dy="40">ASDFGHJKL:"ZXCVBNM<>?</tspan>
<tspan x="100" dy="40">1234567890-=!@#$%^&s*()_+</tspan>
</text>
<text x="100" y="300" font-size="32px" font-family="uGillSansURL">
<tspan>uGillSans url</tspan>
<tspan x="100" dy="40">qwertyuiop[]\asdfghjkl;'</tspan>
<tspan x="100" dy="40">zxcvbnm,./QWERTYUIOP[]|</tspan>
<tspan x="100" dy="40">ASDFGHJKL:"ZXCVBNM<>?</tspan>
<tspan x="100" dy="40">1234567890-=!@#$%^&s*()_+</tspan>
</text>
</svg>
这是一个 SVG 文件。在 ubuntu 中,渲染看起来像这样:。某些字符呈现错误。
但是在 Mac OS X 中,渲染是这样的: 。我使用 svgexport 来渲染两者。
据我了解,svgexport 使用 PhantomJS 来渲染 SVG。我怀疑这在 PhantomJS 中不是问题,而是在 Ubuntu 中缺少一些用于字体光栅化的库。
仅供引用,两个系统都已经安装了所需的字体。两者都有最新版本的 svgexport。我应该如何解决这个问题?谢谢。
编辑:我在 Ubuntu 上安装了 libfreetype6 和 fontconfig。还是不行。但是,SVG 在两个系统上的 Chrome 上看起来都不错。
最佳答案
对我来说,它是这样工作的:
@font-face {
font-family:'FreeSans';
src: url('http://localhost/fonts/FreeSans.ttf') format('truetype');
}
请注意,附加了一个格式。也许是这样?
关于macos - svgexport 在 Mac OS X (10.10.3) 上正确渲染字体,但在 Ubuntu 14.04 上不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31142758/