The following example shows how you can use an embedded font with the Flex Panel container so that a Panel container can be rotated or faded without the text “disappearing”. The trick here is to set the panel’s titleStyleName style to a custom style which sets the font family to the embedded font.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
@font-face {
src: local("Verdana");
fontFamily: VerdanaEmbedded;
}
Panel {
titleStyleName: panelTitleStyleName;
}
.panelTitleStyleName {
fontFamily: VerdanaEmbedded;
fontWeight: normal;
}
</mx:Style>
<mx:Panel fontFamily="VerdanaEmbedded"
title="Title"
status="status"
width="160"
height="120"
rotation="15">
<mx:Text text="The quick brown fox jumped over the lazy dog."
width="100%" />
<mx:ControlBar>
<mx:Label text="ControlBar label" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
View source is enabled in the following example.
{ 3 comments… read them below or add one }
I had the problem that all of a sudden in my panel title single chars disappeared. As I had seen similar things with flash I suspected an embedding problem and it seems I am right. With your tutorial I got it properly displayed again. So thanks for that.
Some problem unfortunately remains. I want to use a bold verdana but when I use font-weight: bold it just looks awful. I tried to embed the bold verdana version itself but can´t figure out the right name… i.e. ‘src:local(“Verdana Bold”);’ doesn´t work.
Any Ideas?
Benjamin,
I wasn’t able to figure out the local font name for Verdana Bold, but the following example shows how you can embed the file from your C:\WINDOWS\Fonts\ directory (which may need tweaking based on your OS/install — or you can just copy the verdanab.TTF font into your Flex project):
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"> <mx:Style> @font-face { src: url("C:/WINDOWS/Fonts/verdanab.TTF"); fontFamily: VerdanaBoldEmbedded; fontWeight: bold; } @font-face { src: local("Verdana"); fontFamily: VerdanaNormalEmbedded; } @font-face { src: local("Verdana"); fontFamily: VerdanaNormalBoldEmbedded; fontWeight: bold; } .verdanaBoldBoldTitle { fontFamily: VerdanaBoldEmbedded; fontWeight: bold; } .verdanaNormalTitle { fontFamily: VerdanaNormalEmbedded; fontWeight: normal; } .verdanaNormalBoldTitle { fontFamily: VerdanaNormalBoldEmbedded; fontWeight: bold; } </mx:Style> <mx:Panel title="Verdana Bold Test" titleStyleName="verdanaBoldBoldTitle" width="33%" height="100"> <mx:Label text="Verdana Bold bold" /> </mx:Panel> <mx:Panel title="Verdana Normal Test" titleStyleName="verdanaNormalTitle" width="33%" height="100"> <mx:Label text="Verdana normal" /> </mx:Panel> <mx:Panel title="Verdana Normal Test (w/ bold)" titleStyleName="verdanaNormalBoldTitle" width="33%" height="100"> <mx:Label text="Verdana bold" /> </mx:Panel> </mx:Application>Peter
Thanks so much for this. I had embedded a font as a SWF file and the only place it wasn’t working was the titles of the panels in my app. The hardest thing about Flex has been the custom CSS – terribly confusing after 5 years of CSS for HTML!