Flex 4 - Global CSS Selector does not work?Allocate180 Aug 24, 2010 9:23 AM
Does the Global CSS Selector work in a Flex 4 app?
I have the following defaults.css definitions:
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|global {
font-family:embSegoeCFF;
font-size: 15;
text-decoration: underline;
}
/* DefineFont 4 */
@font-face {
src: url("fonts/SEGOESC.TTF");
font-family: "embSegoeCFF";
embed-as-cff: true;
}
@font-face {
src: url("fonts/SEGOESCB.TTF");
font-family: "embSegoeCFF";
font-weight: bold;
embed-as-cff: true;
}
The styles just do not get applied. I have tried removing the mx| from the definition, I have removed the Spark namespace and used the mx namespace as default and nothing changes.
However, if I apply the style to something like the mx label as so, it will apply to those controls:
mx|Label {
font-family:embSegoeCFF;
font-size: 15;
text-decoration: underline;
}
I am using the 4.1 SDK and the project is using the "Halo" theme, with Flex 3 compatibility turned OFF but has "Use Flash Text Engine in MX Components" turned ON. I've tried various combinations of compiler options (Spark Theme, Flex 3 Compatibility on etc.) and nothing seem to make a difference.
Am I doing something wrong or does this just not work?
1. Re: Flex 4 - Global CSS Selector does not work?Flex harUI
Aug 24, 2010 10:21 AM (in response to Allocate180)1 person found this helpful
Try s|global
2. Re: Flex 4 - Global CSS Selector does not work?Allocate180 Aug 25, 2010 1:55 AM (in response to Flex harUI)
Thanks for the suggestion, if I use s|global the fonts are then being used BUT only if I have the Spark Theme active. Still not being used if I have the "Halo" theme active
3. Re: Flex 4 - Global CSS Selector does not work?Flex harUI
Aug 25, 2010 9:55 AM (in response to Allocate180)
Mx components require embedAsCFF: false
4. Re: Flex 4 - Global CSS Selector does not work?Allocate180 Aug 26, 2010 2:11 AM (in response to Flex harUI)
Nope, CFF embedded fonts (embed-as-cff / embedAsCff) can definitely be used by MX controls as evidenced by the following threads. l-in-flex-4/- control-in-flex-4/ (out of date but still applicable)
There was another excellent Adobe help example by Peter deHaan for AdvancedDataGrid but I can't re-locate it
Basically set the "Use Flash Text Engine in MX components" compiler option or directly set the textFieldClass to UIFTETextField or UIFTETextInput (there are a couple of others) dependant on control type, but the compiler option does this all for you.
I have even seen it working myself as I can see my fonts coming through, when I apply the font-family DIRECTLY to a control type, ie mx|Label it just doesn't work when I apply any styling to the global CSS definition using the Halo theme.
How would I get direct Adobe support for this? It is becoming a major problem for us now....
5. Re: Flex 4 - Global CSS Selector does not work?Flex harUI
Aug 26, 2010 10:25 AM (in response to Allocate180)
Sorry, didn't see that you were using the FTE in MX option.
You can contact support this way:
What happens if you use the Spark theme instead of the Halo theme. Maybe
the halo theme's defaults are trumping yours.
6. Re: Flex 4 - Global CSS Selector does not work?bensmith125 Sep 28, 2010 7:38 AM (in response to Flex harUI)
I had the same issue, I was using embed-as-cff: false, and the font was not showing up. I changed it to embedAsCFF: false; and hey presto, the embedded fonts appeared in the mx components I had assigned them to. Seems like a bug to me, you should be able to use either variation in my opinion.
7. Re: Flex 4 - Global CSS Selector does not work?Ansury Jan 22, 2011 11:57 AM (in response to bensmith125)
I just ran into a similar issue.
bensmith125 wrote:
you should be able to use either variation in my opinion.
Agreed, Adobe should get this idea of deprecating Halo (especially while Spark isn't even complete!) out of their minds and support both component sets as equals--different component set strategies for different types of applications. Halo should be the "ready to go production out of the box (with a bit of CSS)" component set, for enterprise and other devs who don't care about heavy UI customization. Spark should be the highly-customizable designer-focused component set that starts off with it's current plain look "out of the box".
Protest anti-Halo bigotry. Halo deserves equal attention in Design View, QA testing and Flash Builder bugfixes!