Flex Examples
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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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