5 Replies Latest reply on Feb 16, 2010 12:50 PM by FTQuest

    mx components don't recognize embedded font

    FTQuest Level 3

      I ran into this problem: while spark components render embedded font just fine, the mx components silently fail.

      Here is a simple demo code where the first mx:LinkButton simply does not show up.

       

      <?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="1024" minHeight="768">

       

      <fx:Style>

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

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

       

      @font-face {

      src: url('/Library/Fonts/Microsoft/Goudy Old Style');

      fontFamily: 'GoudyEmbedded';

      }

      .embedded {

      fontFamily: 'GoudyEmbedded';

      color: #FF0000;

      fontSize:28;

      }

      .nonembedded {

      fontFamily: 'Goudy Old Style';

      color: #FF0000;

      fontSize:28;

      }

       

      </fx:Style>

       

      <mx:LinkButton x="50" y="50" styleName="embedded" label="Just a test - 1234567890" />

      <mx:LinkButton x="50" y="150" styleName="nonembedded" label="Just a test - 1234567890" />

       

       

      </s:Application>

        • 1. Re: mx components don't recognize embedded font
          Flex harUI Adobe Employee

          Spark components use cff fonts, mx components don't unless you configure

          them to do so.  The default for embedding is cff.  There should be docs on

          the opensource site about the current rules and ways of configuring.

          • 2. Re: mx components don't recognize embedded font
            FTQuest Level 3

            Dear Alex,

             

            Thank you for the clarification.

            Yet, as I found in the documentation, the 'MXFTEText.css' that is used for enabling embedded fonts in mx controls does NOT have 'Accordion'. So, the solution that is offered does work for controls such as 'mx:Button', but I'm unable to use this for the headers in 'Accordion'.

            What would be the solution for that?

             

            Thanks,

            Igor Borodin

            • 3. Re: mx components don't recognize embedded font
              FTQuest Level 3

              Never mind: instead of using 'styleName' in 'Accordion', I should use 'headerStyleName'. Then, despite the absence of the 'Accordion' in the MXFTEText.css the embedded text is rendered.

              Once again, thanks, for your advice.

              IB

              • 4. Re: mx components don't recognize embedded font
                Flex harUI Adobe Employee

                I hope that isn't true.  AccordionHeader inherits from Button so it should

                pick up Button's styles.  If you have a small test case that doesn't work,

                post the code.

                • 5. Re: mx components don't recognize embedded font
                  FTQuest Level 3

                  Here are 4 instances of 'Accordion', where you can see how 'headerStyleName' and 'styleName' yield different results.

                   

                  <?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="1024" minHeight="768">

                   

                  <fx:Style>

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

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

                   

                  @font-face {

                  src: url('/Library/Fonts/Microsoft/Goudy Old Style');

                  fontFamily: GoudyEmbedded;

                  }

                   

                  .emb {

                  fontFamily: GoudyEmbedded;

                  color: #800000;

                  fontSize: 24;

                  textAlign: center;

                  textFieldClass: ClassReference("mx.core.UIFTETextField");

                  }

                  .nonemb {

                  fontFamily: 'Goudy Old Style';

                  color: #800000;

                  fontSize: 24;

                  textAlign: center;

                  }

                   

                  </fx:Style>

                   

                  <!-- 'headerStyleName' does render embedded font -->

                  <mx:Accordion id="acc1" x="10" y="10" width="240" headerStyleName="emb" >

                  <s:NavigatorContent label="The slanted dash '-'" >

                  <s:Label x="10" y="50" styleName="emb" text="Just a test - 12345" />

                  </s:NavigatorContent>

                  </mx:Accordion>

                  <!-- just 'styleName' - does NOT render embedded font -->

                  <mx:Accordion id="acc2" x="260" y="10" width="240" styleName="emb" >

                  <s:NavigatorContent label="The slanted dash '-'" >

                  <s:Label x="10" y="50" styleName="emb" text="Just a test - 12345" />

                  </s:NavigatorContent>

                  </mx:Accordion>

                  <!-- non embedded font works -->

                  <mx:Accordion id="acc3" x="510" y="10" width="240" headerStyleName="nonemb" >

                  <s:NavigatorContent label="The slanted dash '-'" >

                  <s:Label x="10" y="50" styleName="emb" text="Just a test - 12345" />

                  </s:NavigatorContent>

                  </mx:Accordion>

                  <!-- non embedded font is rendered but text alignment is ignored-->

                  <mx:Accordion id="acc4" x="760" y="10" width="240" styleName="nonemb" >

                  <s:NavigatorContent label="The slanted dash '-'" >

                  <s:Label x="10" y="50" styleName="emb" text="Just a test - 12345" />

                  </s:NavigatorContent>

                  </mx:Accordion>

                   

                  </s:Application>