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" 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"
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">
<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], "Daniel Freiman" <[EMAIL PROTECTED]> 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>
>
> On 5/14/07, aicfan4 <[EMAIL PROTECTED]> 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.
> >
> >
> >
>