在TabBar控件的fontFamily 和fontWeight 样式学习。

示例：

代码：


<?
xml version="1.0" encoding="utf-8"
?>


<!--
 http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-control-in-flex/ 
-->


<
mx:Application 
xmlns:mx
="http://www.adobe.com/2006/mxml"

        layout
="vertical"

        verticalAlign
="middle"

        backgroundColor
="white"
>

    
<
mx:Style
>

        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }
    
</
mx:Style
>

    
<
mx:VBox 
id
="vBox"

            verticalGap
="0"

            width
="320"

            height
="200"
>

        
<
mx:TabBar 
id
="tabBar"

                dataProvider
="
{viewStack}
"

                fontFamily
="EmbeddedBase02"

                width
="100%"
 
/>

        
<
mx:ViewStack 
id
="viewStack"

                width
="100%"

                height
="100%"

                backgroundColor
="white"
>

            
<
mx:VBox 
label
="One"
>

                
<
mx:Label 
text
="one"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Two"
>

                
<
mx:Label 
text
="two"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Three"
>

                
<
mx:Label 
text
="three"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Four"
>

                
<
mx:Label 
text
="four"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Five"
>

                
<
mx:Label 
text
="five"
 
/>

            
</
mx:VBox
>

        
</
mx:ViewStack
>

    
</
mx:VBox
>

</
mx:Application
>



也可以通过CSS来设置：


<?
xml version="1.0" encoding="utf-8"
?>


<!--
 http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-control-in-flex/ 
-->


<
mx:Application 
xmlns:mx
="http://www.adobe.com/2006/mxml"

        layout
="vertical"

        verticalAlign
="middle"

        backgroundColor
="white"
>

    
<
mx:Style
>

        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }

        TabBar {
            fontFamily: EmbeddedBase02;
        }
    
</
mx:Style
>

    
<
mx:VBox 
id
="vBox"

            verticalGap
="0"

            width
="320"

            height
="200"
>

        
<
mx:TabBar 
id
="tabBar"

                dataProvider
="
{viewStack}
"

                width
="100%"
 
/>

        
<
mx:ViewStack 
id
="viewStack"

                width
="100%"

                height
="100%"

                backgroundColor
="white"
>

            
<
mx:VBox 
label
="One"
>

                
<
mx:Label 
text
="one…"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Two"
>

                
<
mx:Label 
text
="two…"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Three"
>

                
<
mx:Label 
text
="three…"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Four"
>

                
<
mx:Label 
text
="four…"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Five"
>

                
<
mx:Label 
text
="five…"
 
/>

            
</
mx:VBox
>

        
</
mx:ViewStack
>

    
</
mx:VBox
>

</
mx:Application
>



通过AS函数设置：


<?
xml version="1.0" encoding="utf-8"
?>


<!--
 http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-control-in-flex/ 
-->


<
mx:Application 
xmlns:mx
="http://www.adobe.com/2006/mxml"

        layout
="vertical"

        verticalAlign
="middle"

        backgroundColor
="white"
>

    
<
mx:Style
>

        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }
    
</
mx:Style
>

    
<
mx:Script
>

        
<![CDATA[

            private function init():void {
                tabBar.setStyle("fontFamily", "EmbeddedBase02");
            }
        
]]>

    
</
mx:Script
>

    
<
mx:VBox 
id
="vBox"

            verticalGap
="0"

            width
="320"

            height
="200"
>

        
<
mx:TabBar 
id
="tabBar"

                dataProvider
="
{viewStack}
"

                width
="100%"

                initialize
="init();"
 
/>

        
<
mx:ViewStack 
id
="viewStack"

                width
="100%"

                height
="100%"

                backgroundColor
="white"
>

            
<
mx:VBox 
label
="One"
>

                
<
mx:Label 
text
="one…"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Two"
>

                
<
mx:Label 
text
="two…"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Three"
>

                
<
mx:Label 
text
="three…"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Four"
>

                
<
mx:Label 
text
="four…"
 
/>

            
</
mx:VBox
>

            
<
mx:VBox 
label
="Five"
>

                
<
mx:Label 
text
="five…"
 
/>

            
</
mx:VBox
>

        
</
mx:ViewStack
>

    
</
mx:VBox
>

</
mx:Application
>

转载于:https://www.cnblogs.com/xxcainiao/archive/2008/06/10/1216584.html

原文链接：https://blog.csdn.net/weixin_30342827/article/details/96532414

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。