The following example shows how you can use an embedded font with the Flex LinkButton control by setting the fontFamily and fontWeight styles.
The LinkButton control uses a bold font weight by default, so you need to either embed the bold font weight, or set the LinkButton control’s fontWeight style to normal.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/04/using-an-embedded-font-with-the-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_fontFamily_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
@font-face {
src: local("Arial");
fontFamily: ArialEmbedded;
fontWeight: bold;
}
LinkButton {
fontFamily: ArialEmbedded;
}
</mx:Style>
<mx:LinkButton id="linkButton"
label="LinkButton"
rotation="45" />
</mx:Application>
View source is enabled in the following example.
You can also embed the font using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/04/using-an-embedded-font-with-the-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_fontFamily_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.controls.LinkButton;
[Embed(systemFont="Arial",
fontName="ArialEmbedded",
fontWeight="bold",
mimeType="application/x-font")]
private const arialEmbedded:Class;
private var linkButton:LinkButton;
private function init():void {
linkButton = new LinkButton();
linkButton.label = "LinkButton";
linkButton.rotation = 45;
linkButton.setStyle("fontFamily", "ArialEmbedded");
addChild(linkButton);
}
]]>
</mx:Script>
</mx:Application>
embedding a system font is easy (everyone has got ‘em .. unless they live in a cave… so they will display)… its those nasty custom ones that are the tricksters =)
sorry, didn’t mean for that to sound as rude as it did, I think this blog is awesome, I hve referred to it many times for little side helpers.
peterd, thanks for all you great examples on flex, I learned a lot from you site. but currently I got a problem on my project, I’m wondering if you can help me out, cause I couldn’t find any solution on the internet.
I’m getting youtube videos from their API and load them into a TileList, is there any way I can show a preloader before all video thumbnails loaded, why dataChange event doesn’t work? but when I trace all the events during the loading, dataChange was there.
any help would be appriciated.~~
regards,
Sky
peterd, sorry, I forgot to tell you that because I have mutipule pages, so that when I change the page, I need a preloader before all videos loaded. thanks~~
Hi there peterd.
And first of all thanks for all your nice examples.
I have a problem using your embedded-font examples, when i change the stage quality to low.
… applicationComplete=”stage.quality = StageQuality.LOW;” …
Moving the mouse over the linkbutton now seems to mess it up.
Have you experienced something similar, and do you perhaps know what is causing this.
I have explained my problem in further detail here:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1424781&enterthread=y
many thanks in advance.
stissing,
I haven’t seen that issue before, but I’ve never tried setting stage quality to low in Flash or Flex applications.
I filed a bug at http://bugs.adobe.com/jira/browse/SDK-19353 and we’ll take a look at the issue. The solution seems to be don’t change the stage quality. :)
Peter
Hi Peter.
And thanks.
Usually I don’t think it is necessary to set the stage quality to low, but in this particular application i am trying to “integrate” some 3d-graphics (using away3d) and the standard 2d-graphics of flex. In order to get the 3d-graphics running smoothly it is needed to set the quality to low. This has the negative effect of messing up the 2d-buttons.
As far as I know there isn’t a way to make the 3d-graphics use low quality rendering while the 2d-graphics use a higher rendering quality.
Stissing