The rule is, if you've set styleSheet on a TextField, you can no longer set TextFormat which is what we use for CSS styles. Sounds like in MXML, the CSS styles get applied before the styleSheet is set or it is picking up device font and you don't know it. In AS, the timing might be different.
Set the rotation of the text to non-zero to make sure it thinks you've got embedded fonts for everything. I think <FONT> is supported by html in Flash. Did you try that instead of stylesheets? -Alex ________________________________ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of aicfan4 Sent: Friday, May 25, 2007 7:35 AM To: [email protected] Subject: [flexcoders] Re: Embedding font problem Well, apparently they're not since this works when I use the StyleSheetText in an MXML Component, although in this case the text CSS is being set at the parent container to inherit: /* --- CSSAndStyleSheetText.mxml --- */ <?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml <http://www.adobe.com/2006/mxml> " xmlns:view="com.project.view.*" <mx:VBox styleName="vboxTextContent"> <view:StyleSheetText id="txt_styled" htmlText="{data.content}" styleName="textBody" /> </mx:VBox> </mx:HBox> /* === CSSAndStyleSheetText.mxml === */ /* --- css included at root Application file --- */ .vboxTextContent { paddingLeft: 25px; paddingRight: 25px; paddingTop: 20px; paddingBottom: 20px; verticalGap: 44px; fontSize: 30pt; fontFamily: FranklinGothicBook; } .textBody { leading: -1; } /* === css === */ --- In [email protected] <mailto:flexcoders%40yahoogroups.com> , "Alex Harui" <[EMAIL PROTECTED]> wrote: > > Sorry, too late for me to read the whole thing, but I believe that Flex > CSS styles and TextField StyleSheets are mutually exclusive. You can > either have one or the other. > > > > ________________________________ > > From: [email protected] <mailto:flexcoders%40yahoogroups.com> [mailto:[email protected] <mailto:flexcoders%40yahoogroups.com> ] On > Behalf Of aicfan4 > Sent: Thursday, May 24, 2007 7:12 PM > To: [email protected] <mailto:flexcoders%40yahoogroups.com> > Subject: [flexcoders] Re: Embedding font problem > > > > Oops, well I just realized one thing that was an issue. I wasn't > adding the StyleSheetText in the AS class as a child to the component > until after setting the htmlText, which I guess is why the textField > property wasn't instantiated yet? > > I changed the code to: > > /* --- SomeOtherComponent.as v2 --- */ > > public class SomeOtherComponent extends Canvas { > > ... > > private var txt:StyleSheetText; > > ... > > /** > * Function which tries to add the StyleSheetText component. > */ > public function addText():void { > txt = new StyleSheetText(); > addChild(txt); > with(txt) { > styleName = "someOtherStyleNameImUsingForThisComponent"; > htmlText = "this text is <span='bolded'>not</span> appearing to > be bold!"; > x = 100; > y = 150; > } > //addChild(txt); > } > > } > > /* === SomeOtherComponent.as v2 === */ > > But now only the word not is appearing, and none of the style from the > styleName has been applied to the other text (I assume that's why I > can't see it, since it's an embedded font?) > > Getting closer, but could still use another suggestion. > > --- In [email protected] <mailto:flexcoders%40yahoogroups.com> <mailto:flexcoders%40yahoogroups.com> > , "aicfan4" <gjastrab.dev@> wrote: > > > > Warning, this is long, but please help if you can! > > > > Okay, so I have the bold font correctly embedded in a SWF. The > > problem was that the bold font is a different fontFamily than the > > non-bold font (the normal and italic font I was embedded, indeed does > > not have a corresponding bold font). > > > > So I'm using the htmlText property of a Text component and my normal > > text and text wrapped in <code><i>...</i></code> is displaying > > properly as normal and italicized text, respectively. > > > > I want text wrapped in <code><b>...</b></code> to appear in bold > > correctly, even though it is a different fontFamily than the normal > > and italic text. > > > > I was able to use two different families in the same text field using > > the styleSheet property of UITextField and CSS as follows (had to > > extend Text in order to access the textField property): > > > > /* --- fonts.css --- */ > > > > @font-face { > > src: url("assets/symbols.swf"); > > fontFamily: "Franklin Gothic Medium Cond"; > > fontWeight: bold; > > } > > > > @font-face { > > src: url("assets/IT345___.ttf"); > > fontFamily: FranklinGothicBook; > > } > > > > StyleSheetText { > > fontFamily: FranklinGothicBook; > > } > > > > /* === fonts.css === */ > > > > /* --- StyleSheetText.mxml --- */ > > <?xml version="1.0" encoding="utf-8"?> > > <mx:Text xmlns:mx="http://www.adobe.com/2006/mxml <http://www.adobe.com/2006/mxml> > <http://www.adobe.com/2006/mxml <http://www.adobe.com/2006/mxml> > " initialize="init();"> > > > > <mx:Script> > > <![CDATA[ > > > > import flash.text.StyleSheet; > > > > private function init():void { > > var style:StyleSheet = new StyleSheet(); > > style.setStyle(".bolded", {fontFamily: "Franklin Gothic Medium > > Cond", fontWeight: "bold"}); > > textField.styleSheet = style; > > } > > > > ]]> > > </mx:Script> > > > > </mx:Text> > > > > /* === StyleSheetText.mxml === */ > > > > /* --- TestFont.mxml --- */ > > <?xml version="1.0" encoding="utf-8"?> > > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml <http://www.adobe.com/2006/mxml> > <http://www.adobe.com/2006/mxml <http://www.adobe.com/2006/mxml> > " > > xmlns:cust="*" > > creationComplete="init();"> > > > > <mx:Script> > > <![CDATA[ > > > > private function init():void { > > txt_html.htmlText = "something is <span > > class='bolded'>bolded</span> in this text!"; > > } > > > > ]]> > > </mx:Script> > > > > <cust:StyleSheetText id="txt_html" /> > > > > </mx:Application> > > > > /* === TestFont.mxml === */ > > > > The above code works to correctly display the bolded font. However, > > in my project I'm trying to do this in, if I try to create the an > > instance of the StyleSheetText component in an AS class (instead of an > > MXML class) the bold font will not appear. Something like: > > > > /* --- SomeOtherComponent.as --- */ > > > > public class SomeOtherComponent extends Canvas { > > > > ... > > > > private var txt:StyleSheetText; > > > > ... > > > > /** > > * Function which tries to add the StyleSheetText component. > > */ > > public function addText():void { > > txt = new StyleSheetText(); > > with(txt) { > > styleName = "someOtherStyleNameImUsingForThisComponent"; > > htmlText = "this text is <span='bolded'>not</span> appearing to > > be bold!"; > > x = 100; > > y = 150; > > } > > addChild(txt); > > } > > > > } > > > > /* === SomeOtherComponent.as === */ > > > > I narrowed the problem down from here to being that the textField > > wasn't properly instantiated yet by the time htmlText is being set, so > > I tried moving the logic that sets the StyleSheet into an override of > > htmlText in the StyleSheetText, and using a timer to make sure it was > > not null: > > > > /* --- StyleSheetText.mxml v2 --- */ > > <?xml version="1.0" encoding="utf-8"?> > > <mx:Text xmlns:mx="http://www.adobe.com/2006/mxml <http://www.adobe.com/2006/mxml> > <http://www.adobe.com/2006/mxml <http://www.adobe.com/2006/mxml> > "> > > > > <mx:Script> > > <![CDATA[ > > > > import flash.events.TimerEvent; > > import flash.text.StyleSheet; > > import flash.utils.Timer; > > > > private function ticked(evt:TimerEvent):void { > > if(textField) { > > (evt.target as Timer).stop(); > > > > /* i'm not really duplicating this code, > > * style is made in a Singleton somewhere else, > > * but don't wanna clutter this post with another class > > */ > > > > var style:StyleSheet = new StyleSheet(); > > style.setStyle(".bolded", {fontFamily: "Franklin Gothic > > Medium Cond", fontWeight: "bold"}); > > > > textField.styleSheet = style; > > } > > } > > > > override public function set htmlText(value:String):void { > > super.htmlText = value; > > > > var style:StyleSheet = new StyleSheet(); > > style.setStyle(".bolded", {fontFamily: "Franklin Gothic Medium > > Cond", fontWeight: "bold"}); > > > > if(textField) > > textField.styleSheet = style; > > else { > > var tmr:Timer = new Timer(300); > > tmr.addEventListener(TimerEvent.TIMER, ticked); > > tmr.start(); > > } > > } > > ]]> > > </mx:Script> > > > > </mx:Text> > > > > /* === StyleSheetText.mxml v2 === */ > > > > However, it's still not working. It appears to work when I use the > > StyleSheetText in an MXML component and use databinding to set the > > htmlText property as well as setting the styleName, but this doesn't > > screw it up and the bold properly displays. > > > > Only when I use it in the AS class does it screw up. > > > > Anyone have any ideas please? > > > > > > --- In [email protected] <mailto:flexcoders%40yahoogroups.com> > <mailto:flexcoders%40yahoogroups.com> , "Daniel Freiman" <FreimanCQ@> > wrote: > > > > > > If you're sure you have the correct file and filename for the font > file, > > > then I'd focus on getting the font embeded in and fla file, because > > if all > > > else fails, embeding the font in an FLA should work. What didn't > > work about > > > the fla method? > > > > > > Dan Freiman > > > nondocs <http://nondocs.blogspot.com <http://nondocs.blogspot.com> <http://nondocs.blogspot.com <http://nondocs.blogspot.com> > > > > > > > > On 5/14/07, aicfan4 <gjastrab.dev@> wrote: > > > > > > > > I'm embedding a font (Franklin Gothic) via CSS in an > > application, but > > > > the associated bold font will not embed properly. The italic > version > > > > will also embed correctly. In C:\WINDOWS\Fonts the normal font is > > > > listed as "FranklinGotCdITCTT" (filename IT345___.ttf), the italic > > > > font is "FranklinGotCdITC BookItalic" (filename IT347___.ttf), > and the > > > > bold font is "FranklinGotCdMdITCTT" (filename IT348___.ttf). > > > > > > > > My CSS (which correctly works for just the normal and italic > > fonts) is: > > > > > > > > @font-face { > > > > src: url("assets/IT345___.ttf"); > > > > fontFamily: FranklinGothicBook; > > > > } > > > > @font-face { > > > > src: url("assets/IT347___.ttf"); > > > > fontFamily: FranklinGothicBook; > > > > fontStyle: italic; > > > > } > > > > > > > > All text controls in the application have the font set in the CSS > > like: > > > > > > > > [Class or stylename] { > > > > fontFamily: FranklinGothicBook; > > > > } > > > > > > > > and not explicitly setting different fontFamily names since the > text > > > > controls are set using the htmlText property so that <i>...</i> > and > > > > <b>...</b> tags will control the bolding/italicizing. > > > > > > > > When I try to embed the bold font using: > > > > > > > > @font-face { > > > > src: url("assets/IT348___.ttf"); > > > > fontFamily: FranklinGothicBook; > > > > fontWeight: bold; > > > > } > > > > > > > > I get the following compilation error: > > > > > > > > --- Error --- > > > > > > > > Error: exception during transcoding: Font for alias > > > > 'FranklinGothicBook' with bold weight was not found at [path to > > > > IT348___.ttf] > > > > > > > > @font-face { > > > > > > > > Error: unable to build font 'FranklinGothicBook' > > > > > > > > @font-face { > > > > > > > > === Error === > > > > > > > > I tried embedding the Font in a FLA and setting it as a symbol to > > > > embed it, but was unsuccessful. If anyone has an idea on what to > do > > > > please let me know, be it doing something to the .ttf to specify > that > > > > t is indeed bold, or embedding it via the SWF. > > > > > > > > > > > > > > > > > >
