Tag Archive for '@font-face'

12
Feb

Using embedded fonts in a Flex DataGrid control

The following example shows how you can use embedded fonts with the DataGrid control in Flex.

Note that the DataGridColumn’s use a bold font by default, so you’ll either need to either embed both a normal and bold font weight, or else set the DataGrid control’s column font weight to normal.

Full code after the jump.

Continue reading ‘Using embedded fonts in a Flex DataGrid control’

24
Jan

Specifying custom named unicode ranges in Flex

We’ve looked at general font embedding and unicode ranges before in previous examples (see “Embedding and animating fonts in a Flex application” and “Specifying certain unicode-ranges for embedded fonts”), but this example will show you how you can embed a named range of unicode characters into an application by editing your flex-config.xml file and specifying unicode ranges.

Full code after the jump.

Continue reading ‘Specifying custom named unicode ranges in Flex’

16
Dec

Embedding fonts for the Flex DateField control

The following example shows how you can embed fonts for use with the DateField control in Flex. Note that we embed both the normal and bold font weights since by default the month and year are bold in the DateChooser sub-component.

Full code after the jump.

Continue reading ‘Embedding fonts for the Flex DateField control’

25
Oct

Embedding fonts from a Flash SWF file into a Flex application

The following examples show how you can embed a font from a Flash SWF into a Flex application using @font-face in a <mx:Style /> block, or using the [Embed] metadata.

Full code after the jump.

Continue reading ‘Embedding fonts from a Flash SWF file into a Flex application’

12
Oct

Creating a custom creation complete effect on a Flex Alert control

The following example shows how to specify a effect which gets played when an Alert control is displayed by setting the Alert control’s creationCompleteEffect style. You can also see how to embed both the normal and bold font using CSS and @font-face.

Full code after the jump.

Continue reading ‘Creating a custom creation complete effect on a Flex Alert control’

09
Oct

Embedding fonts by name instead of location

The following example shows how you can embed a font in Flex by specifying the font name instead of a location by using the local() function instead of the src() function when embedding a font.

Full code after the jump.

Continue reading ‘Embedding fonts by name instead of location’

12
Sep

Styling the HSlider control using CSS

The following example shows how you can style a HSlider (or VSlider) control in Flex using Cascading Style Sheets (CSS).

Full code after the jump.

Continue reading ‘Styling the HSlider control using CSS’

28
Aug

Styling a Flex Button control using embedded fonts

The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button’s default skin.

Full code after the jump.

Continue reading ‘Styling a Flex Button control using embedded fonts’

11
Aug

Styling the Flex Alert control

This is a more complex version of my previous example. This time in addition to making the Alert control’s text non-selectable, we use an embedded font for the Alert title, message, buttons, as well as edit the drop shadow, remove the rounded corners, and remove the button skins.

Full code after the jump.

Continue reading ‘Styling the Flex Alert control’

07
Aug

Specifying certain unicode-ranges for embedded fonts

In a previous post (”Embedding and animating fonts in a Flex application“), we looked at embedding a font in a Flex application so we could animate, rotate, and set the alpha for a Text control. Well, as we learnt, sometimes embedding a whole font face can dramatically increase the size of the final SWF output. In this post we’ll look at only specifying a certain range of characters for an embedded font, which will help reduce file sizes.

Full code after the jump.

Continue reading ‘Specifying certain unicode-ranges for embedded fonts’

06
Aug

Embedding and animating fonts in a Flex application

I meant to post this earlier, and I already touched on font embedding in an earlier post (Building a basic controller for the VideoDisplay control), but here’s a quick little way to embed a font in a Flex application.

In this example we embed a font (the awesome “Base 02″ PC TrueType font (TTF) from http://www.stereo-type.net/), animate it using the Zoom effect and the Elastic.easeOut easing method. We also set the rotation and alpha properties (which you can’t do with non-embedded fonts), and we set the fontAntiAliasType to “advanced” to give the font a cleaner look. Finally we use the effectEnd event to loop the animation.

Full code after the jump.

Continue reading ‘Embedding and animating fonts in a Flex application’

05
Aug

Building a basic controller for the VideoDisplay control

OK, this is probably one of my more elaborate samples on the site so far. It covers a few different areas which I probably haven’t covered (or covered well) up to this point. We look at things like embedding fonts (so we can use the fade effect on a nested text field), embedding images for button skins, and overlaying a simple set of buttons when you move your mouse cursor over a video (which I believe iTunes and many other video players do). Basically it lets you create a nice little video player that gets overlayed on the video so you don’t have additional space taken up by play/pause buttons.

Full code after the jump.

Continue reading ‘Building a basic controller for the VideoDisplay control’