7 Replies Latest reply on Mar 11, 2011 8:38 AM by paatfv10

    Defining font-family on mx:Text from .css

    paatfv10

      Hi,

      I'm having difficulty implementing a font-family onto an mx:Text control from a .css file. Here is my code:

       

      css file:

       

      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/mx";
      @namespace taskdetails "com.adobe.livecycle.ria.taskdetails.view.*";


      @font-face
      {
          src: url("assets/fonts/AdobeCleanUI-Regular.otf");
          fontFamily: "AdobeCleanUI";
          embedAsCFF: true;
      }


      mx|Text{
          font-family: Arial;
      }

       

      What will happen is that no text will appear, as if the control is not visible or empty. I've tried various things to try to pinpoint the issue, but I can define other fonts such as Arial from the .css and it works fine. Spark containers have worked well with implementing fonts from .css files, but it seems that the mx:Text control has an issue with it (is it possible all mx controls would show this behaviors?

       

      As a workaround, is there an spark control that can be used similarly to an mx:Text control?

       

      Thanks for your help,

      Patrick

        • 1. Re: Defining font-family on mx:Text from .css
          Flex harUI Adobe Employee

          By default, mx:Text wants embedAsCFF=false.  Unless you are using FTE in MX

          controls.

          • 2. Re: Defining font-family on mx:Text from .css
            paatfv10 Level 1

            Hi Flex harUI,

            thanks for answering.

             

            I've changed the embedAsCFF property to false, but still get no data.Though I've created a new project containing only the .css file and a mx:Text control, and it work OK.

             

            Looking further than the mx:Text control and the .css file, maybe the issue lies in the parameters around this control? The mx:Text control is located in an item renderer, and its being called by a custom skin (being called by a custom component...) - would this cause an error with the referencing of embed fonts in .css files?

            • 3. Re: Defining font-family on mx:Text from .css
              Flex harUI Adobe Employee

              Make sure the mx:Text's text property is actually being set to something,

              and has a reasonable size.

              • 4. Re: Defining font-family on mx:Text from .css
                Jorge Raimundo

                ...and it has a different color than the background

                • 5. Re: Defining font-family on mx:Text from .css
                  paatfv10 Level 1

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

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

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

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

                                  autoDrawBackground="true"

                                  width="100%">  

                   

                      <s:Group width="100%" height="20">      

                          <s:layout>

                              <s:HorizontalLayout verticalAlign="middle" />     

                          </s:layout>

                          <s:Label text="label:" width="100" textAlign="right" fontSize="14"/>

                          <mx:Text text="text" width="100%" color="#000000" fontSize="1"  />

                      </s:Group>

                  </s:ItemRenderer>

                   

                  text values for label and text controls have been statically set while I'm trying to get this working. I've also explicitely set the color and size, though these values should be the default values nonetheless. There is a background set on the skin calling this itemRenderer, but its a light grey - the black text should still be visible.

                  • 6. Re: Defining font-family on mx:Text from .css
                    Flex harUI Adobe Employee

                    Your font size is 1.  We don't have built-in font size lookups like HTML.

                    • 7. Re: Defining font-family on mx:Text from .css
                      paatfv10 Level 1

                      Originally this wasn't working because I was defining the font-family in many different .swcs, because I want all my components to have the same font. Changing the config of the file (to embedAsCFF = false) would cause problems when running because i had two difference configs for the same font family (one where the embed was false and another where the embed was true from another defaults.css being called by another component).

                       

                      Renaming my font-family to "sparkFont" and "mxFont" to take into account the embedAsCFF difference should resolve this issue.

                       

                      Thanks for your help.