Flex - Flash Builder设计视图未正确显示嵌入字体

时间:2010-12-13 05:17:50

标签: flash flex flex4 flash-builder halo

工具:Air 2,Flex SDK 4.1,Flash Builder, Halo 组件集(根本不使用Spark)

字体在运行应用时完美运行,但在设计视图中则无效。这有效地使设计视图 WORTHLESS ,因为如果不知道真实尺寸是什么(它根据字体改变......)就无法正确定位组件或标签。

...

CSS包含在根组件中,如下所示:

<fx:Style source="style.css"/>

CSS文件:

/* CSS file */
@namespace mx "library://ns.adobe.com/flex/mx";

global {
    font-family:Segoe;
    font-size:14;
    color:#FFFFFF;
}

mx|Application, mx|VBox, mx|HBox, mx|Canvas {
    font-family:Segoe;
    background-color:#660000;
    border-color:#222277;
    color:#FFFFFF;
}

mx|Button {
    font-family:Segoe;
    fill-colors:#660000, #660000, #660000, #660000;
    color:#FFFFFF;
}
...

有趣的是(或者很忙?),当我尝试将样式标记粘贴到子组件(低于顶级容器)时,我在子组件编辑器视图中收到一堆警告,指出不支持CSS类型选择器。 。(样式表中的所有组件)。
但是,当执行应用程序时,它们可以正常工作。咦?

这就是我在 root 级别容器中嵌入字体的方式:

 [Embed(source="/assets/segoepr.ttf", fontName="Segoe", mimeType="application/x-font-truetype", embedAsCFF='false')]
 public static const font:Class;

 [Embed(source="/assets/segoeprb.ttf", fontName="Segoe", mimeType="application/x-font-truetype", fontWeight="bold", embedAsCFF='false')]
 public static const font2:Class;

那么,有没有办法让嵌入字体在设计视图中工作或者什么?

2 个答案:

答案 0 :(得分:0)

我不知道这是否有帮助,但值得一试。如果使用css,则不需要使用Embed Meta标记嵌入字体。尝试删除字体类嵌入并在css文件中添加嵌入。使用Flex中的设计视图可以更好地工作。

// using system font
@font-face {
    src: local("Myriad Web Pro");
    fontFamily: myFontFamily;
    advancedAntiAliasing: true;
}

// using url to font file
@font-face {
    src: url("../assets/MyriadWebPro.ttf");
    fontFamily: myFontFamily;
    advancedAntiAliasing: true;
}

在设计视图中试用此代码:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        @font-face {
            src: url("Arial Bold.ttf");
            fontFamily: "Arial Bold";
            embedAsCff: true;
        }


        s|Application
        {
            color: #000000;
            fontFamily: "Arial Bold";
            font-size: 48;
        }

    </fx:Style>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Label text="This is the first label" width="488"  x="43" y="39" height="54"/>
    <s:Label text="This is the second label" width="488"  x="45" y="129" height="54" rotation="-4"/>
    <s:Label text="This is the third label" width="488"  x="43" y="208" height="54"/>

</s:Application>

答案 1 :(得分:0)

默认情况下,标签和文本区域似乎需要字体Verdana,如果我们不嵌入它,设计视图不会考虑任何其他嵌入字体。

请嵌入Verdana字体,您应该能够在设计视图中看到标签和文字区域。

@font-face {
    src: local("Verdana");
    font-family: verdana;
    font-weight: normal;
}

希望这有帮助。