4 Replies Latest reply on Nov 29, 2010 12:04 PM by rfrishbe-L4jqPm

    [Flex Hero] How to apply font family to a List, and in mobileItemRenderer?

    Teerasej Jiraphatchandej Level 1

      Hi, I hope my question will not disturb you too much.

       

      With Flash Builder 4 "Burrito" and Flex SDK "Hero", I develop a simple news reader with List component. but I found that my local language (Thai) will show in multi-rectangle character.

       

      So I tried to embbed TAHOMA font (which is ok to use with my language):


      /* CSS */

      @font-face {
          src: url("../assets/font/TAHOMA.TTF");
          fontFamily: TahomaYo;
      }

       

      and use in List component like this:

       

      <s:List id="list" left="0" right="0" top="0" bottom="0"  labelField="name" fontFamily="TahomaYo">
           .....
      </s:List>

       

      But it looks like the font family does not applied to the list. An idea is about encoding. Generally, Thai language works good in UTF-8, but how could I applied this in Burrito and List item?

       

      Do you have any solution to suggest me?

        • 1. Re: [Flex Hero] How to apply font family to a List, and in mobileItemRenderer?
          Shongrunden Adobe Employee

          Try setting embedAsCFF to true

           

          @font-face {
              src: url("../assets/font/TAHOMA.TTF");
              fontFamily: TahomaYo;

              embedAsCFF: true;
          }

          • 2. Re: [Flex Hero] How to apply font family to a List, and in mobileItemRenderer?
            Teerasej Jiraphatchandej Level 1

            Thank you for your suggestion, Mr. Shongrunden. I tried with 'embedAsCFF' (like below).

             

            @font-face {
                src: url("../assets/font/TAHOMA.TTF");
                fontFamily: Tahoma;
                embedAsCFF:true;
            }

             

            But it still not work.

             

            But also I have noticed some strange activities:

             

            1. Flash Builder "Burrito" don't show code-assist for "embedAsCFF" but it suggests "embed-as-cff" instead. But the second one doesn't make the difference.

              @font-face {
                   src: url("../assets/font/TAHOMA.TTF");
                   fontFamily: Tahoma;
                  
              embed-as-cff:true;
              }


            2. If I don't use MobileIconItemRenderer as ItemRenderer for List component and apply fontFamily as "Tahoma", the list item will appear but no label on them. Even I specify the labelField property.

              <s:List labelField="name"  fontFamily="Tahoma" ...>
              ...
              </s:List>


            3. The result will not difference from no.2, if I define a style's name in CSS with same font family's value like below:

              .localLang {
                  font-family: Tahoma;
              }

              <s:List styleName="localLang" ...>
              ...
              </s:List>



            4. Now I tried with MobileIconItemRenderer , surprising, it seems not accept any styling value I assigned. The result is English character still appear, but Thai language rendered in 'rectangle' character. below is which styling I tried with it, but they don't work:

              <s:MobileIconItemRenderer  messageStyleName="localLang" ... />

              <s:MobileIconItemRenderer  fontFamily="Tahoma" ... />

              <s:MobileIconItemRenderer  styleName="localLang" ... />

             

             

            I notice that MobileIconItemRenderer may unable to be applied the style. But I don't sure. Could you help me?

            • 4. Re: [Flex Hero] How to apply font family to a List, and in mobileItemRenderer?
              rfrishbe-L4jqPm

              I just posted on the bug file, but I figured I'd post here as well.  The embedded font situation is pretty confusing, and there are two things going on here:

              1) In cases where a bold font is used, you need to embed the bold version of that font as well
              2) embedAsCFF should be set to false when using StyleableTextField  (Label still uses FTE behind the scenes, so it needs embedAsCFF set to  true)

              To correctly embed it, you should use:

              @font-face {
                   src: url("Comic Sans MS.ttf");
                   fontFamily: MyFont;
                   embedAsCFF: false;
              }

              @font-face {
                   src: url("Comic Sans MS Bold.ttf");
                   fontFamily: MyFont;
                   embedAsCFF: false;
                   font-weight:bold;
              }