5 Replies Latest reply on Jan 9, 2011 12:52 PM by Shongrunden

    Embeded fonts in a Component

    nshaukat

      I am trying to embed a font so I can rotate labels on one of the axes in Line Chart. I have my chart opened from a button in a widget by clicking on a button that opens a chart window throgh s:TitleWindow. I try to embed verdana font using the following code in TitleWindow xmml using the following code.

       

      <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @font-face{
         src: url("assets/Fonts/verdana.ttf");
         fontFamily: myFontFamily;
         embedAsCFF: false;
        }
        mx|LineChart {
         fontFamily: myFontFamily;
         fontSize: 20;
        }
      </fx:Style>

       

      I get a warning message " CSS type selectors are not supported in components: 'mx.charts.LineChart' " and the labels are not rotated . I think it's because that I do not use the above style in main Application. What is the right way to embed a font so I can rotate labels on the chart axis? Any response in this regard will be appreciated.

       

      nshaukat

        • 1. Re: Embeded fonts in a Component
          Shongrunden Adobe Employee

          I don't think using the type selector (for example mx|LineChart) in a component is supported.

           

          Try setting the style without using the type selector, for example using styleName:

           

          <fx:Style>

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

            @font-face{

             src: url("assets/Fonts/verdana.ttf");

             fontFamily: myFontFamily;

             embedAsCFF: false;

            }

            .myFont {

             fontFamily: myFontFamily;

             fontSize: 20;

            }

          </fx:Style>

          ...

          <mx:LineChart styleName="myFont" />

          • 2. Re: Embeded fonts in a Component
            nshaukat Level 1

            Shongrunden,

             

            Thanks much for your response. I tried your suggestion but still the labels did not get rotated. Below is part of the code where I am implementing label rotation. As I had mentioned earlier, I am not creating this chart in Apllication, it's in TitleWindow.

             

             

            <fx:Style>

             

             

             

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

             

            @font-face{

             

             

             

             

             

             

            src: url("assets/Fonts/verdana.ttf");

             

            fontFamily: myFontFamily;

             

            embedAsCFF: false;

            }

             

            .myFont {

             

            fontFamily: myFontFamily;

             

            fontSize: 20;

            }

             

            </fx:Style>

             

            <s:Group

             

             

            width="100%" height="100%" id="cg">

             

             

            <!--Add chart into canvas so that background color can be applied-->

             

             

            <mx:Canvas id="cp" backgroundColor="#ffffff" fontFamily="verdana" fontSize="12" color="#093A89" fontWeight="bold" width="100%" height="100%" alpha="1" creationComplete="init()">

             

            <mx:LineChart id="cChart"

            showDataTips="

            true"

            paddingRight="

            40" paddingLeft="30"

            width="

            100%" height="85%"

            styleName="

            myFont">

             

             

             

             

             

             

             

            <!-- horizontal axis -->

             

             

            <mx:horizontalAxis>

             

             

            <!-- <mx:DateTimeAxis id="ca" title="Date" dataUnits="days"/> -->

             

             

             

            <mx:CategoryAxis id="ca" categoryField="Date" title="Date" />

             

            </mx:horizontalAxis>

             

             

             

            <!-- horizontal axis renderer -->

             

             

             

            <mx:horizontalAxisRenderers>

             

             

            <mx:AxisRenderer axis="{ca}" canDropLabels="true" fontSize="10" labelRotation="90">

             

            <mx:axisStroke>

             

             

            <mx:SolidColorStroke weight="6" color="#BBCCDD" alpha="1" caps="square"/>

             

             

            </mx:axisStroke>

             

            </mx:AxisRenderer>

             

             

             

            </mx:horizontalAxisRenderers>

            • 3. Re: Embeded fonts in a Component
              Shongrunden Adobe Employee

              Maybe you need to put fontAntiAliasType: "normal"; in your CSS too?  This seems to work for me:

               

              <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">

                  <fx:Style>

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

               

                      @font-face {

                          src: url("Vera.ttf");

                          font-family: EmbeddedFont;

                          embedAsCFF: false;

                      }

               

                      .embeddedFonts {

                          font-family: EmbeddedFont;

                          fontAntiAliasType: "normal";

                      } 

                  </fx:Style>

               

                  <s:controlBarContent>

                      <s:HSlider id="horizontalLabelRotation"

                                 minimum="-90" maximum="90" value="0"

                                 liveDragging="true" snapInterval="10" />

                  </s:controlBarContent>

               

                  <mx:LineChart id="lineChart" styleName="embeddedFonts">

                      <mx:dataProvider>

                          <s:XMLListCollection>

                              <s:source>

                                  <fx:XMLList>

                                      <quote date="8/27/2007" open="40.38" close="40.81" />

                                      <quote date="8/23/2007" open="40.82" close="40.6" />

                                      <quote date="8/21/2007" open="40.41" close="40.13" />

                                      <quote date="8/17/2007" open="40.18" close="40.32" />

                                      <quote date="8/15/2007" open="40.22" close="40.18" />

                                      <quote date="8/13/2007" open="41" close="40.83" />

                                      <quote date="8/9/2007" open="39.9" close="40.75" />

                                      <quote date="8/7/2007" open="39.08" close="39.42" />

                                      <quote date="8/3/2007" open="39.47" close="38.75" />

                                      <quote date="8/1/2007" open="40.29" close="39.58" />

                                  </fx:XMLList>

                              </s:source>

                          </s:XMLListCollection>

                      </mx:dataProvider>

               

                      <mx:horizontalAxis>

                          <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />

                      </mx:horizontalAxis>

               

                      <mx:horizontalAxisRenderers>

                          <mx:AxisRenderer axis="{ca}" labelRotation="{horizontalLabelRotation.value}" canDropLabels="true" />

                      </mx:horizontalAxisRenderers>

               

                      <mx:series>

                          <mx:LineSeries yField="@open" displayName="Open" />

                      </mx:series>

                  </mx:LineChart>

               

              </s:Application>

              • 4. Re: Embeded fonts in a Component
                nshaukat Level 1

                Thanks again Shongrunden.

                 

                This works within the Application environment, but does not work in a component TitleWindow. I am opening the TitleWindow from another mxml.

                 

                nshaukat

                 

                • 5. Re: Embeded fonts in a Component
                  Shongrunden Adobe Employee

                  This seems to work for me as well.

                   

                  Main.mxml:

                   

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                 xmlns:s="library://ns.adobe.com/flex/spark"

                                 xmlns:local="*">

                   

                      <s:Button label="Show popup" click="slide.displayPopUp = true"/>

                   

                      <s:PopUpAnchor id="slide">

                          <local:CustomComponent />

                      </s:PopUpAnchor>

                   

                  </s:Application>

                   

                  CustomComponent.mxml:

                   

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

                  <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"

                           xmlns:s="library://ns.adobe.com/flex/spark"

                           xmlns:mx="library://ns.adobe.com/flex/mx">

                   

                      <fx:Style>

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

                   

                          @font-face {

                              src: url("Vera.ttf");

                              font-family: EmbeddedFont;

                              embedAsCFF: false;

                          }

                   

                          .embeddedFonts {

                              font-family: EmbeddedFont;

                              fontAntiAliasType: "normal";

                          }

                      </fx:Style>

                   

                      <s:controlBarContent>

                          <s:HSlider id="horizontalLabelRotation"

                                     minimum="-90" maximum="90" value="0"

                                     liveDragging="true" snapInterval="10" />

                      </s:controlBarContent>

                   

                      <mx:LineChart id="lineChart" styleName="embeddedFonts">

                          <mx:dataProvider>

                              <s:XMLListCollection>

                                  <s:source>

                                      <fx:XMLList>

                                          <quote date="8/27/2007" open="40.38" close="40.81" />

                                          <quote date="8/23/2007" open="40.82" close="40.6" />

                                          <quote date="8/21/2007" open="40.41" close="40.13" />

                                          <quote date="8/17/2007" open="40.18" close="40.32" />

                                          <quote date="8/15/2007" open="40.22" close="40.18" />

                                          <quote date="8/13/2007" open="41" close="40.83" />

                                          <quote date="8/9/2007" open="39.9" close="40.75" />

                                          <quote date="8/7/2007" open="39.08" close="39.42" />

                                          <quote date="8/3/2007" open="39.47" close="38.75" />

                                          <quote date="8/1/2007" open="40.29" close="39.58" />

                                      </fx:XMLList>

                                  </s:source>

                              </s:XMLListCollection>

                          </mx:dataProvider>

                   

                          <mx:horizontalAxis>

                              <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />

                          </mx:horizontalAxis>

                   

                          <mx:horizontalAxisRenderers>

                              <mx:AxisRenderer axis="{ca}" labelRotation="{horizontalLabelRotation.value}" canDropLabels="true" />

                          </mx:horizontalAxisRenderers>

                   

                          <mx:series>

                              <mx:LineSeries yField="@open" displayName="Open" />

                          </mx:series>

                      </mx:LineChart>

                   

                  </s:TitleWindow>