5 Replies Latest reply on Jan 18, 2010 10:41 PM by Flex harUI

    Embedding fonts in css

    SiHoop Level 1

      The following file uses two approaches to style text: CSS and TextFormat They result in different results that are very similar, but different. I suspect that I am not embedding fonts properly when using CSS. Am I correct and, if so, what should I be doing?

       

      Main file:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  creationComplete="init()">
          <mx:Style source="styleSheet.css" />
          <mx:Script>
              <![CDATA[
      import flash.text.*;
      import mx.core.UIComponent;
      private var textFormats:TextFormats=new TextFormats;
      private function init():void{
          var spellingExplanation:TextField=new TextField
          spellingExplanation.text="Characters"
          spellingExplanation.setTextFormat(textFormats.buttonStyle1);
             spellingExplanation.autoSize=TextFieldAutoSize.LEFT
             spellingExplanation.embedFonts=true;
          var container:UIComponent = new UIComponent()
          container.addChild(spellingExplanation)   
          textContainer.addChild(container)
      }
              ]]>
          </mx:Script>
          <mx:VBox id="textContainer">
              <mx:Label    text="Characters" styleName="buttonStyle1"/>       
          </mx:VBox>
      </mx:Application>

       

      styleSheet.css

       

      @font-face {
          fontFamily: FranklinGothicMedium;
          src: url("framd.ttf");
      }
      .buttonStyle1 {
         color: #000000;
         fontSize: 14;
         fontFamily: FranklinGothicMedium;
      }

       

      TextFormats.as

       

      package{
          import flash.text.TextFormat;
          public class TextFormats{    
          [Embed(source='framd.ttf', fontName="FranklinGothicMedium", mimeType="application/x-font-truetype")]
              public static const FranklinGothicMedium:String;
              private var _buttonStyle1:TextFormat;
              public function TextFormats(){
                  buttonStyle1 = new TextFormat();
                  buttonStyle1.color = 0x000000;
                  buttonStyle1.font = "FranklinGothicMedium"//"Franklin Gothic Medium";
                  buttonStyle1.size = 14;
              }
              public function get buttonStyle1():TextFormat {
                  return _buttonStyle1;
              }
              public function set buttonStyle1(value:TextFormat):void {
                  _buttonStyle1=value;
              }
          }
      }