|
|
Hack 30. Install Fonts and Character Support
Protect your tired eyes from ugly fonts when staring at web pages. Firefox can display web pages in a variety of languages, but whether Firefox picks great-looking fonts depends on three different factors:
3.10.1. Installing Good FontsThis is the take-off point. At the end of the day, Firefox can use only fonts that your OS provides to applications. Platforms such as Windows come preinstalled with beautiful TrueType fonts. If you are a Linux user and have a Windows license, you can migrate its TrueType fonts to your Linux partition and enable them in your Linux desktop for Firefox to use. Otherwise, you can get Microsoft's free TrueType core fonts for the Web at http://corefonts.sourceforge.net/. Anti-aliasing may or may not be enabled on your particular Linux distribution. Some users like it and others don't. You can disable it in Firefox (if you have an XFT-enabled build) by simply setting an environment variable: export GDK_USE_XFT=1 /* Linux only: set to 0 to disable anti-aliasing */ This applies to all GTK2/XFT applications. Because there are many distributions and configurations, each with its own syntax and documentation, we assume that you can refer to them to install nice fonts. The rest of this hack will concentrate on Firefox tricks. Forget about downloadable fonts. They have been abused in the past to work around browser limitations. Documents were using them through bogus Latin letters posing as glyph indices. Firefox is Unicode-based and in the recent years much effort has gone into supporting international languages through Unicode. Remember that when Firefox can't find any font in your system for a particular character, it will display a question mark to get your attention. In particular, MathML documents need special fonts [Hack #61] . 3.10.2. Selecting Good Language FontsLater, when we cover the font-selection
algorithm, we'll see that what
you select for language fonts is equally important for web pages that
mix different languages. Firefox comes with a good selection of
default fonts for the main language groups (Western, Japanese,
Arabic, etc.). You can make other choices by visiting
Tools Beauty is in the eye of the beholder, and while you are there,
consider also setting a minimum font size if
your eyes are weak. You can also temporarily magnify the text when
you encounter badly designed pages (View 3.10.3. Overriding Web Page FontsWeb page authors can specify fonts that they prefer. By default, these take precedence over your settings in the preference dialog. Sometimes, however, you might not like what authors specify, or their fonts might not be available on your system. In the latter case, if authors set a lang attribute (xml:lang for XHTML), Firefox will immediately fall back to your own preferences. The lang attribute is inherited and, if put in the root <html>, it will apply to all elements until it is overwritten by an inner descendant. When a page does not state its language, Firefox will attempt to automatically detect it based on the document's charset, the user language, or the OS language (in that order of importance). Disabled users, even those as able as older people with poor sight,
might want to override page authors altogether. To do that, choose
Tools Another way to override fonts is through userContent.css. You can create this file in your profile and put overriding style rules in there: * {
font-family: serif !important; /* set to your favorite fonts */
}
listing, xmp, pre, tt, code, kbd, samp, textarea {
font-family: monospace !important; /* set to your favorite fonts */
}Always end your CSS font-family lists with a generic CSS type (e.g., serif, sans-serif, etc). That ensures that Firefox will favor the specified class of fonts for the elements under consideration but that Firefox will also have a guaranteed fallback font if required.
3.10.4. Knowing How Firefox Selects FontsBecause a document can mix different languages, Firefox uses sophisticated algorithms to select the most suitable fonts. Of course, this won't be apparent to you if you predominantly visit pages in just one language, such as English. It is more apparent to readers who visit multilingual pages. Consider a page whose main language is Hebrew. We saw earlier how to specify fonts for this language in the font preference dialog. But what about English words that might be intermingled on the page? Well, use this preference (which works on Windows but might not work on all platforms): font.name-list.serif.he /* set to a CSS list of alternative fonts */ If Firefox encounters words that involve characters not in the primary font specified for the Hebrew language, it will fall back to this alternative list in order of preference. Change .serif to another generic type or change .he to another language code to cover other cases. Here is a quick, somewhat oversimplified rundown of how the hack works. To render a character, Firefox's Gecko engine looks for a suitable match in the CSS font-family list specified by the web author. If no fonts are specified or no match is found, it moves on to the default font for the language of the character. If it still can't find a match, it then looks at the fallback list. In case you missed where the trick is, Gecko automatically detects the language of a character inside an <html> tag that might have a different lang attribute for its main language. 3.10.5. Using Character References and EntitiesIt might happen that you want to include Greek letters, the Euro symbol, or the British pound sign in a page. The numeric character reference (NRC) is a notation that suits this situation well. It can be in decimal form as &#number; or in hexadecimal form as &#xnumber;. Thus, the NRC for(officially called GREEK SMALL LETTER ALPHA in Unicode) is α or α. All Unicode characters can be referenced this way, so it is an interoperable way to combine all characters. It is a versatile notation, especially useful when the character cannot easily be entered on a keyboard. But again, whether the character is ultimately displayed on the user's side is subject to the availability of a font that holds a glyph (a picture) of that character. Another problem is that the NCR notation is not user-friendly. It is hard to remember that many numbers! A friendlier alternative is to use a character entity reference, or entity for short. This is a case-sensitive mnemonic name that takes the form &name;. Examples include © for the copyright symbol and Λ for the Greek capital letter lambda. But there does not exist a universal list that covers all of Unicode's millions of potential characters. The number of standardized entity names is limited. Which set of entities Firefox uses depends on the document and its DOCTYPE. A plain XML document (one that is not pretending to be a specific application of XML) supports only five predefined entities: amp, gt, lt, apos, and quot. An HTML or XHTML document supports entities for accented Latin letters, Greek letters, and other special markup symbols, as defined in HTML 4.01. A document with a MathML DOCTYPE [Hack #61] supports over 2000 predefined mathematical entities to ensure the interoperability of scientific documents. Note that for XML, XHTML, and MathML at least, you can define more entities in a set held internally in the document, which is ideal if a given entity is used a lot. Figure 3-2 shows the result of the following example : <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [ <!ENTITY diamondsuit '♦'> <!ENTITY smiley "data:image/gif;base64, R0lGODlhDwAPAIAAAAAAAP///yH5BAAAAAAALAAAAAAPAA8AAAImjA2 Zx7H8DmhQ0jYdyi5PHoXcJY1kd0Leta6VBneKhZxmtJEKHhQAOw=="> ]> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Entities</title> </head> <body> A self-contained document with entities for an embedded smiley in a data: URL and a diamond suit: <img src="&smiley;"/> ♦ </body> </html> Figure 3-2. Defining entities in a document Roger Sidje |
|
|
Options