openlaszlo - 使用嵌入字体时，OpenLaszlo 字体渲染对于 3.x 和 5.0 不一致

Question

我正在将自定义字体应用于文本字段，这在我的 Openlaszlo 3.3 中运行良好，但在较新的版本（5.0）中，字体被应用并且样式也被应用，但我看到字母之间的空间更多。但这在旧版本中没有发生。

我检查了两个版本中的对象，发现唯一显着的区别是行高。

知道为什么会这样吗？如何删除这些空格是可能的？

3.3 截图

5.0 截图

Answer 1

您看到的效果与 Flash 如何处理嵌入的 TTF 字体的方式有关：使用这些字体的文本完全由 Flash Player 呈现。尤其是从 Flash Player 8 到 9 的变化为文本渲染带来了许多改进（对嵌入字体更好的抗锯齿，最后是修改字母的能力）。

您看到的呈现文本的差异可能是由 Flash Player 9 及更高版本中更好的抗锯齿造成的。OpenLaszlo SWF9+ 文本和输入文本组件使用该设置flash.text.AntiAliasType.ADVANCED作为默认设置。

这是OpenLaszlo 开发邮件列表中的讨论，提到了您所看到的效果：

字体渲染应该尽可能高质量——我认为没有人会想要在 FP9 中进行旧式渲染。没有其他方法可以修复此错误吗？

我们不会在运行时获得完整的字体渲染一致性。使用设备字体时已经不一致。每个浏览器/播放器/操作系统的变体都不同，Flash 与 DHTML 也不同。

据我所知，没有用于修改该设置的官方 API。我创建了一个小型应用程序，您可以在其中测试修改该属性如何影响文本呈现。前两个文本项使用 Flash Player 的默认字体，因此消除锯齿设置不会影响渲染。以下 4 个文本项均使用嵌入的 TTF 字体，您可以根据antiAliasingType设置看到差异。

要编译应用程序，请下载以下字体并将它们放入应用程序文件夹：

http://svn.openlaszlo.org/openlaszlo/trunk/laszlo-explorer/fonts/ariosob.ttf
https://github.com/w0ng/googlefontdirectory/raw/master/fonts/Amaranth-Regular.ttf

<canvas height="600">

    <font name="amaranth" style="plain" src="Amaranth-Regular.ttf" />
    <font name="arioso" src="ariosob.ttf" />

    <class name="mytext" extends="text">
        <passthrough when="$as3">
            import flash.text.AntiAliasType;
        </passthrough>
        <attribute name="antialias" type="string" value="advanced" />
        <handler name="oninit">
            this.onantialias.sendEvent();
        </handler>
        <handler name="onantialias">
            var t = this.getDisplayObject().textfield;
            if ( this.antialias == 'normal' ) {
                t.antiAliasType = flash.text.AntiAliasType.NORMAL;
            } else {
                t.antiAliasType = flash.text.AntiAliasType.ADVANCED;
            }
        </handler>
        <method name="toogleAntialias">
            if ( this.antialias == 'normal' ) this.setAttribute( 'antialias', 'advanced' );
            else this.setAttribute( 'antialias', 'normal' );
        </method>
    </class>

    <view>
        <simplelayout axis="y" spacing="10" />
        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="true" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="advanced"
                    fontsize="25">Default font (no embedded TTF)</mytext>
        </view>
        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="false" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="normal"
                    fontsize="25">Default font (no embedded TTF)</mytext>
        </view>

        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="true" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="advanced"
                    font="amaranth" fontsize="25">Amaranth Regular</mytext>
        </view>
        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="false" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="normal"
                    font="amaranth" fontsize="25">Amaranth Regular</mytext>
        </view>

        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="true" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="advanced"
                    font="arioso" fontsize="25">Amaranth Regular</mytext>
        </view>
        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="false" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="normal"
                    font="arioso" fontsize="25">Amaranth Regular</mytext>
        </view>
    </view>

</canvas>

结果可能不会在所有操作系统中保持一致，因为操作系统将使用不同的方法来优化文本呈现。上面的截图是在 Linux 上拍摄的。