Flex中如何通过设定headerStyleName样式在Accordion控件中使用嵌入字体的例子

Accordion控件可以说是一个非常不错的东西，在很多场合可以为我们节省应用程序的空间。Accordion中使用自定义字体的话可以使我们的应用更加个性化。接下来的例子演示了Flex中如何通过设定headerStyleName样式，在Accordion控件中使用嵌入字体。

我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

 

下面是完整代码(或 点击这里查看)：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Style>
8.         @font-face {
9.             src: local("Base 02");
10.             fontFamily: EmbeddedBase02;
11.         }
13.         Accordion {
14.             headerStyleName: accordionHeaderStyleName;
15.         }
17.         .accordionHeaderStyleName {
18.             fontFamily: EmbeddedBase02;
19.             fontWeight: normal;
20.         }
21.     </mx:Style>
23.     <mx:Accordion id="accordion"
24.             creationPolicy="all"
25.             width="100%"
26.             height="100%">
27.         <mx:VBox label="Red"
28.                 backgroundColor="red"
29.                 width="100%"
30.                 height="100%">
31.         </mx:VBox>
32.         <mx:VBox label="Orange"
33.                 backgroundColor="haloOrange"
34.                 width="100%"
35.                 height="100%">
36.         </mx:VBox>
37.         <mx:VBox label="Yellow"
38.                 backgroundColor="yellow"
39.                 width="100%"
40.                 height="100%">
41.         </mx:VBox>
42.         <mx:VBox label="Green"
43.                 backgroundColor="haloGreen"
44.                 width="100%"
45.                 height="100%">
46.         </mx:VBox>
47.         <mx:VBox label="Blue"
48.                 backgroundColor="haloBlue"
49.                 width="100%"
50.                 height="100%">
51.         </mx:VBox>
52.     </mx:Accordion>
54. </mx:Application>