3 Replies Latest reply on Mar 15, 2011 8:33 PM by Flex harUI

    Fonts in Runtime CSS compiled as SWF do not render with setFormatOfRange() but works with setStyle()

    mriuh

      Im having a requirement to load fonts at runtime and display them in a  RichEditableText, The text in the RichEditableText could have multiple  formats so I use the RichEditableText's setFormatOfRange() method to set  the font.

       

      I use a CSS compiled as a SWF to load the fonts, Fonts render when the font is set via the -setStyle() method as demonstrated in the code below

       

      Im using Flash Builder 4 with SDK version 4 to compile the app(Using the default Spark Theme).

       

      Below is the CSS file (fontCSS.css)- You might need to copy fonts from the Widows Font folder for this in a fodler named fonts,

       

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

      @font-face{
         
      src: url("fonts/Articulate.TTF");
         
      fontFamily: "Articulate123";
         
      embedAsCFF: true;



      }
      @font-face{
         
      src: url("fonts/AGENCYB.TTF");
         
      fontFamily: "Agency123";
         
      embedAsCFF: true;
      }

       

      Right Click on the CSS file, in Flash Builder 4 and select "Compile CSS to SWF".

      Run the MXML application below and you should see the issue Im trying to describe.

       

       

      <?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"
                     creationComplete="application1_creationCompleteHandler(event)">
          <fx:Script>
              <![CDATA[
                  import flash.utils.describeType;
                 
                  import flashx.textLayout.formats.TextLayoutFormat;
                 
                  import mx.collections.ArrayCollection;
                  import mx.events.CalendarLayoutChangeEvent;
                  import mx.events.FlexEvent;
                  import mx.events.StyleEvent;
                 
                  import spark.events.IndexChangeEvent;


                  private var swfLoader:Loader
                  protected function application1_creationCompleteHandler(event:FlexEvent):void
                  {
                      var cssEventDispatcher:IEventDispatcher=styleManager.loadStyleDeclarations("fontCSS.swf")
                      cssEventDispatcher.addEventListener(StyleEvent.COMPLETE, onComplete);
                  }
                 
                  private function onComplete(event:Object):void
                  {
                      fontList.dataProvider=new ArrayCollection(Font.enumerateFonts())
                  }



                  protected function fontList_changeHandler(event:IndexChangeEvent):void
                  {
                      var tlformat:TextLayoutFormat=new TextLayoutFormat()
                      tlformat.fontFamily=fontList.selectedItem.fontName
                      textEditor.setFormatOfRange(tlformat,0,5)
                  }


              ]]>
          </fx:Script>
          <s:layout>
              <s:VerticalLayout/>
         
          </s:layout>
          <s:Label text="Please select a font from the list below"/>
          <s:List id="fontList" change="fontList_changeHandler(event)">
             
          </s:List>
          <s:RichEditableText id="textEditor2"
                              fontSize="30"
                              fontFamily="{fontList.selectedItem.fontName}"    >
              <s:p>Hello -  fontFamily set via css binding</s:p>
          </s:RichEditableText>
          <s:RichEditableText id="textEditor"
                              fontSize="30"
                              >
              <s:p>Hello - fontFamily set via setFormatOfRange()</s:p>
          </s:RichEditableText>
      </s:Application>

       

      tried to use an external SWF with the fonts compiled in them Via AS3, that too dosent seem to work, The setStyle() also refuse the work with the below SWF

      here is the AS3 project code for your reference

       

      FontEmbedder.as

       

      package
      {
          import flash.display.Sprite;
          import flash.system.Security;
          import flash.text.Font;
         
          public class FontEmbedder extends Sprite
          {
              public function FontEmbedder()
              {
                  Security.allowDomain("*")
              }
              [Embed(source="/fonts/Articulate.TTF", fontName="Articulate123", embedAsCFF="true")] 
              public var articulateFont:Class;
              [Embed(source="/fonts/AGENCYB.TTF", fontName="Agency123", embedAsCFF="true")] 
              public var agencyFont:Class;
          }
      }

       

      We ve been wrecking our heads off to figure out a solution for this. Ultimately decided to post a question here.

      Your feedback will be highly appreciated.

       

      Below are  snapshots of how the 2 fonts are rendered

      font Issue1.png

       

      font Issue2.png

      Regards.