svgexport 在 Mac OS X (10.10.3) 上正确渲染字体，但在 Ubuntu 14.04 上不正确答案

【问题标题】：svgexport renders font properly on Mac OS X (10.10.3) but not on Ubuntu 14.04svgexport 在 Mac OS X (10.10.3) 上正确渲染字体，但在 Ubuntu 14.04 上不正确
【发布时间】：2015-06-30 15:43:45
【问题描述】：

<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&lt;>?</tspan>
    <tspan x="100" dy="40">1234567890-=!@#$%^&amp;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&lt;>?</tspan>
    <tspan x="100" dy="40">1234567890-=!@#$%^&amp;s*()_+</tspan>
</text>
</svg>

这是一个 SVG 文件。在 ubuntu 中，渲染看起来像这样：。部分字符渲染错误。

但是在 Mac OS X 中，渲染是这样的：。我使用svgexport 来渲染两者。

据我了解，svgexport 使用 PhantomJS 来渲染 SVG。我怀疑这不是 PhantomJS 中的问题，而是 Ubuntu 中缺少一些用于字体光栅化的库。

仅供参考，两个系统都已经安装了所需的字体。两者都有最新版本的 svgexport。我应该如何解决这个问题？谢谢。

编辑：我在 Ubuntu 上安装了 libfreetype6 和 fontconfig。还是不行。但是，SVG 在两个系统上的 Chrome 上看起来都不错。

【问题讨论】：

您是否尝试过诊断问题？例如，您是否尝试过在 Ubuntu 上的 Chome 中查看 SVG 文件（看看那里的字体渲染是否正常）？
在 Chrome 上一切正常。我已经在 Ubuntu 上安装了 libfreetype6 和 fontconfig。还是不行。

标签： macos ubuntu svg fonts phantomjs

【解决方案1】：

对我来说是这样的：

@font-face {
          font-family:'FreeSans';
          src: url('http://localhost/fonts/FreeSans.ttf') format('truetype');
        }

请注意，附加了一个格式。也许是这样？

【讨论】：