Javascript 幻影可以'；t呈现斜体和粗体，但Chrome可以

我通过phantomJS（左侧）将普通SVG渲染为PDF， 但结果与Chrome中显示的SVG不同

我使用了一种叫做“AlexBrush”的字体，这是一种真正的字体，只有规则的样式，我猜粗体和斜体的效果只是被chrome“模拟”的

如何使phantomJS像chrome一样正确渲染

这是我的测试SVG的一部分，由fabricJS生成：

<g transform="translate(509.4 276.56) scale(3.89 3.89)">
    <text font-family="AbrilFatface" font-size="42" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" >
        <tspan x="-131.5" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">i</tspan>
        <tspan x="-122.01" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">t</tspan>
        <tspan x="-109.53" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;"> </tspan>
        <tspan x="-101.22" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">i</tspan>
        <tspan x="-91.73" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">s</tspan>
        <tspan x="-76.65" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;"> </tspan>
        <tspan x="-68.33" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">a</tspan>
        <tspan x="-51.03" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;"> </tspan>
        <tspan x="-42.71" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">l</tspan>
        <tspan x="-32.51" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">a</tspan>
        <tspan x="-15.2" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">z</tspan>
        <tspan x="1.01" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">y</tspan>
        <tspan x="16.55" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;"> </tspan>
        <tspan x="24.87" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">f</tspan>
        <tspan x="35.03" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">o</tspan>
        <tspan x="46.83" y="13.23" font-family="AlexBrush" font-weight="bold" style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">x</tspan>
    </text>
</g>

我
T
我
s
A.
L
A.
Z
Y
F
o
x

---

更新：所以这种“模拟”风格被称为“人造”粗体。 然而，我仍然不知道如何让PhantomJ和chrome做同样的事情

---

你能用fabricjs画布发布一个简单的代码片段、字体中的文本和toSVG按钮吗？YABIP=PhantomJS中的另一个bug。PhantomJS的功能与Chrome不同。如果你想在PhantomJS中将屏幕呈现为PNG或JPG，它可能会正确呈现。你能用fabricjs画布、字体中的文本和toSVG按钮发布一个简单的片段吗？YABIP=PhantomJS中的另一个bug。PhantomJS的功能与Chrome不同。如果在PhantomJS中将屏幕渲染为PNG或JPG，则可能会正确渲染。