Font Properties
The TextBlock class defines font properties that determine how text appears in a control. These properties are outlined in Table 5-2.
Table 5-2. Font-Related Properties of the Control Class
Name
Description
FontFamily The name of the font you want to use. Because Silverlight is a client-side technology, it's limited to just nine built-in fonts (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Lucida, Times New Roman, Trebuchet MS, and Verdana). However, you can also distribute custom fonts by going to a bit more work and packing them up with your project assembly.
FontSize The size of the font in pixels. Ordinary Windows applications measure fonts using points, which are assumed to be 1/72 of an inch on a standard PC monitor, while pixels are assumed to be 1/96 of an inch. Thus, if you want to turn a Silverlight font size into a more familiar point size, you can use a handy trick—just multiply by 3/4. For example, a 20-pixel FontSize is equivalent to a traditional 15-point font size.
FontStyle The angling of the text, as represented as a FontStyle object. You get the FontStyle preset you need from the static properties of the FontStyles class, which includes Normal and Italic lettering. If you apply italic lettering to a font that doesn't provide an italic variant, Silverlight will simply slant the letters. However, this behavior only gives a crude approximation of a true italic typeface.
FontWeight The heaviness of text, as represented as a FontWeight object. You get the FontWeight preset you need from the static properties of the FontWeights class. Normal and Bold are the most obvious of these, but some typefaces provide other variations such as Heavy, Light, ExtraBold, and so on. If you use Bold on a font that doesn't provide a bold variant, Silverlight will paint a thicker border around the letters, thereby simulating a bold font.
FontStretch The amount that text is stretched or compressed, as represented by a FontStretch object. You get the FontStretch preset you need from the static properties of the FontStretches class. For example, UltraCondensed reduces fonts to 50% of their normal width, while UltraExpanded expands them to 200%. Font stretching is an OpenType feature that is not supported by many typefaces. The built-in Silverlight fonts don't support any of these variants.
Obviously, the most important of these properties is FontFamily. A font family is a collection of related typefaces—for example, Arial Regular, Arial Bold, Arial Italic, and Arial Bold Italic are all part of the Arial font family. Although the typographic rules and characters for each variation are defined separately, the operating system realizes they're related. As a result, you can configure an element to use Arial Regular, set the FontWeight property to Bold, and be confident that Silverlight will switch over to the Arial Bold typeface.
When choosing a font, you must supply the full family name, as shown here:
<TextBlock x:Name="txt" FontFamily="Times New Roman" FontSize="18"> Some Bold Text</TextBlock>
It's much the same in code:
txt.FontFamily = "Times New Roman"; txt.FontSize = "18";
When identifying a FontFamily, a shortened string is not enough. That means you can't substitute Times or Times New instead of the full name Times New Roman.
Optionally, you can use the full name of a typeface to get italic or bold, as shown here:
<TextBlock FontFamily="Times New Roman Bold">A Button</TextBlock >
However, it's clearer and more flexible to use just the family name and set other properties (such as FontStyle and FontWeight) to get the variant you want. For example, the following markup sets the FontFamily to Times New Roman and sets the FontWeight to FontWeights.Bold:
<TextBlock FontFamily="Times New Roman" FontWeight="Bold">A Button</TextBlock >
Standard Fonts
Silverlight supports nine core fonts, which are guaranteed to render correctly on any browser and operating system that supports Silverlight. They're shown in Figure 5-1.
Lucida Grande/Lucida Sans Unicode
Figure 5-1. Silverlight's built-in fonts
In the case of Lucida, there are two variants with slightly different names. Lucida Sans Unicode is included with Windows, while Lucida Grande is an almost identical font that's included with Mac OS X. To allow this system to work, the FontFamily property supports font fallback—in other words, you can supply a comma-separated list of font names and Silverlight will used the first supported font. The default TextBlock font is equivalent to setting the Font-Family property to the string "Lucida Sans Unicode, Lucida Grande."
You might think that you can use more specialized fonts, which may or may not be present on the client's computer. However, Silverlight doesn't allow this. If you specify a font that isn't one of the nine built-in fonts, and it isn't included with your application assembly (more on that in the next section), your font setting will be ignored. This happens regardless of whether the client has an installed font with the appropriate name. This makes sense—after all, using a font that's only supported on some systems could lead to an application that's mangled or completely unreadable on others, which is an easy mistake to make.
Font Embedding
If you want to use non-standard fonts in your application, you can embed them in your application assembly. That way, your application never has a problem finding the font you want to use.
The embedding process is simple. First, you add the font file (typically, a file with the extension .ttf) to your application and set the Build Action to Resource. (You can do this in Visual Studio by selecting the font file in the Solution Explorer and changing its Build Action in the Properties page.)
Next, when you set the FontFamily property, you need to use this format:
FontFileName#FontName
For example, if you have a font file named BayernFont.ttf, and that includes a font named Bayern, you would use markup like this:
<TextBlock FontFamily="BayernFont.ttf#Bayern">This is an embedded font</TextBlock> Figure 5-2 shows the result.
- Figure 5-2. Using an embedded font
Alternatively, you can set the font using a stream that contains the font file. In this case, you need to set the TextBlock.FontSource property with the font file stream, and then set the TextBlock.FontFamily property with the font name. For example, if you've added the BayernFont.ttf file as a resource to a project named FontTest, you can retrieve it programmatically using this code:
StreamResourceInfo sri = Application.GetResourceStream( new Ur("FontTest;component/BayernFont.ttf", UriKind.Relative));
lbl.FontSource = new FontSourct(sri.Stream); lbl.FontFamily = new FontFamily("Bayern");
To pull the resource out of the current assembly, this code uses the Application.Get-ResourceStreamO method and the URI syntax you learned about in Chapter 6.
No matter which approach, the process of using a custom font is fairly easy. However, font embedding raises obvious licensing concerns. Most font vendors allow their fonts to be embedded in documents (such as PDF files) but not applications (such as Silverlight assemblies). The problem is obvious—users can download the XAP file by hand, unzip it, retrieve the font resource, and then access it on their local computers. Silverlight doesn't make any attempt to enforce font licensing, but you should make sure you're on solid legal ground before you redistribute a font.
You can check a font's embedding permissions using Microsoft's free font properties extension utility, which is available at http://www.microsoft.com/typography/TrueTypeProp-erty21.mspx. Once you install this utility, right-click any font file, and choose Properties to see more detailed information about it. In particular, check the Embedding tab for information about the allowed embedding for this font. Fonts marked with Installed Embedding Allowed are suitable for Silverlight applications, while fonts with Editable Embedding Allowed may not be. Consult with the font vendor for licensing information about a specific font.
Note If all else fails, you can get around licensing issues by changing your fonts to graphics. This works for small pieces of graphical text (for example, headings), but isn't appropriate for large blocks of text. You can save graphical text as a bitmap in your favorite drawing program, or you can convert text to a series of shapes using Silverlight's Path element (which is discussed in Chapter 7). You can convert graphical text to a path using Expression Designer or Expression Blend (simply select the TextBlock and choose Object > Path > Convert to Path). Interestingly, Silverlight also allows you to perform the same trick through code. Surf to http://tinyurl.com/69f74v to see an example in which a Silverlight application calls a web service that dynamically generates a path for non-Western text. The web service returns the path data to the Silverlight application, which displays it seamlessly.
Post a comment