Examples of font matching

Example(s):
The following example defines a specific font face, Alabama Italic. A panose
font description and source URI for retrieving a truetype server font are also
provided. Font-weight and font-style descriptors are provided to describe the font.
The declaration says that the weight will also match any request in the range 300
to 500. The font family is Alabama and the adorned font name is Alabama Italic.
@font-face {
src: local("Alabama Italic"),
url(http://www.fonts.org/A/alabama-italic) format("truetype");
panose-1: 2 4 5 2 5 4 5 9 3 3;
font-family: Alabama, serif;
font-weight: 300, 400, 500;
font-style: italic, oblique;
}


Example(s):
The next example defines a family of fonts. A single URI is provided for retrieving
the font data. This data file will contain multiple styles and weights of the
named font. Once one of these @font-face definitions has been dereferenced,
the data will be in the UA cache for other faces that use the same URI.
@font-face {
src: local("Helvetica Medium"),
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc");
font-family: "Helvetica";
font-style: normal
}
@font-face {
src: local("Helvetica Oblique"),
url("http://www.fonts.org/sans/Helvetica_family") format("truedoc");
font-family: "Helvetica";
font-style: oblique;
slope: -18
}
Example(s):
The following example groups three physical fonts into one virtual font with
extended coverage. In each case, the adorned font name is given in the src
descriptor to allow locally installed versions to be preferentially used if available.
A fourth rule points to a font with the same coverage, but contained in a single
resource.
@font-face {
font-family: Excelsior;
src: local("Excelsior Roman"), url("http://site/er") format("intellifont");
unicode-range: U+??; /* Latin-1 */
}
@font-face {
font-family: Excelsior;
src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont");
unicode-range: U+100-220; /* Latin Extended A and B */
}
@font-face {
font-family: Excelsior;
src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont");
unicode-range: U+4??; /* Cyrillic */
}
@font-face {
font-family: Excelsior;
src: url("http://site/excels") format("truedoc");
unicode-range: U+??,U+100-220,U+4??;
}


Example(s):
This next example might be found in a UA’s default style sheet. It implements
the CSS2 generic font family, serif by mapping it to a wide variety of serif fonts
that might exist on various platforms. No metrics are given since these vary
among the possible alternatives.

@font-face {
src: local("Palatino"),
local("Times New Roman"),
local("New York"),
local("Utopia"),
url("http://somewhere/free/font");
font-family: serif;
font-weight: 100, 200, 300, 400, 500;
font-style: normal;
font-variant: normal;
font-size: all
}

Artikel Terkait