3 Replies Latest reply on Jan 31, 2011 10:40 PM by aktell2007

    Embedded fonts in HTML control

    v-cariven

      Hello,

       

      I'm trying to make an AIR 2.5 application using the HTML component as part of the UI. I know that web fonts are available in this version of the sdk. But , what i'm trying to make is to use a swf embedded font in the rendered HTML. I have a swf file containing my embedded font (generated with Fontswffer) and embedded it in my application so that I can use it with all my components. My question is how to use it in the HTML component.

       

      I tried to reference it in my html file loaded in the component with @font-face directive by with no success !

       

      ex:

      @font-face {
          font-family: "MyFont";
          src: local("MyFont");
      }

       

      Though, the font is available at runtime (Fonts.enumerateFonts())

      MyFont [boldItalic] [embeddedCFF]
      MyFont [regular] [embeddedCFF]
      MyFont [bold] [embeddedCFF]
      MyFont [italic] [embeddedCFF]

       

      Is it possible to use it with the HTML component ?

       

      Thanks in advance

        • 1. Re: Embedded fonts in HTML control
          Flex harUI Adobe Employee

          I don't think that is possible.

          • 2. Re: Embedded fonts in HTML control
            Abhrodip Paul-cXMMf1 Level 2

            I dont think the way you are tring will work.

             

            But, if you can get the component from mx:HTML, and then add the style in the component itself, might work

             

            Some thing like below

             

            <mx:HTML id="html" />

            var obj:Object = html.htmlLoader.window.document.getElementById(<htmlComponentID>); // htmlComponentID can be found using the firebug.

            // then set the style upon the "obj"

            // do the above styling while renderer event gets fired on html.

             

            This is just an idea. Do not know if this will work.

            • 3. Re: Embedded fonts in HTML control
              aktell2007 Level 1

               

              I usually use this in small and large AIR Apps.

               

              1. Create a .swf file with any font and Embed the FONT – So much easier this way !

               

                              @font-face {
                             src: url("assets/fonts/VerdanaFontN.swf");
                             fontFamily: Verdana;
                             fontWeight: normal;
                             fontStyle: normal;
                        }
                        global {
                             fontFamily: Verdana;
                             fontSize: 12;
                             font-AntiAlias-Type:advanced;                         
                             font-Sharpness: 100;
                             font-GridFit-Type: pixel;
                        }
              

              Then use your HTML component:

                               <mx:WindowedApplication OR Module !!!
                   creationComplete="htmlTextIntro();">
              
                                      <mx:HTML 
                             id="htmlIntro"/>
              
                   <mx:Script>
                        <![CDATA[
                             
                             private function htmlTextIntro():void {
                                  htmlIntro.htmlLoader.loadString("<html><body><p><font color='#999999' font-size='11' font-weight='normal' font-family='Verdana'>TEXT !</font></p></body></html>");
                             }
                        ]]>
                   </mx:Script>
              

              There are other ways as well IF you need more/others let me kmow I just have to find them in my DB's, ! regards aktell