لطفا منتظر باشید ...
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:
Fonts available in your OS
Fonts specified for the language in use
CSS fonts specified on the web page
3.10.1. Installing Good Fonts
This 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 Fonts
Later, 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
OptionsGeneralFonts & Colors.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
TextSize
Decrease/Increase).3.10.3. Overriding Web Page Fonts
Web 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
OptionsGeneralFonts &Colors
Always Use My Fonts.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 Fonts
Because 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 Entities
It 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="/> ♦
</body>
</html>
Figure 3-2. Defining entities in a document
Roger Sidje
