w3 contents w3properties w3index | text |
This document begins with <body style=font-family:sans-serif>
Courier,"Times New Roman"
)
serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> | sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> |
cursive ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> | fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> |
monospace ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> |
Characters J M Q Z can sometimes be used to determine which font is being used.
"Times New Roman" abcd efgh ijkl mnop qrst uvwx yz ABCD EFGH IJKL MNOP QRST UVWX YZ 12345 67890 -=[]\;',./ !@#$% ^&*() _+{}|:"<>? ♠♣♥♦ | J M Q Z | ||
courier abcd efgh ijkl mnop qrst uvwx yz ABCD EFGH IJKL MNOP QRST UVWX YZ 12345 67890 -=[]\;',./ !@#$% ^&*() _+{}|:"<>? ♠♣♥♦ | J M Q Z |
verdana abcd efgh ijkl mnop qrst uvwx yz ABCD EFGH IJKL MNOP QRST UVWX YZ 12345 67890 -=[]\;',./ !@#$% ^&*() _+{}|:"<>? ♠♣♥♦ | J M Q Z |
tahoma abcd efgh ijkl mnop qrst uvwx yz ABCD EFGH IJKL MNOP QRST UVWX YZ 12345 67890 -=[]\;',./ !@#$% ^&*() _+{}|:"<>? ♠♣♥♦ | J M Q Z |
arial abcd efgh ijkl mnop qrst uvwx yz ABCD EFGH IJKL MNOP QRST UVWX YZ 12345 67890 -=[]\;',./ !@#$% ^&*() _+{}|:"<>? ♠♣♥♦ | J M Q Z |
cursive abcd efgh ijkl mnop qrst uvwx yz ABCD EFGH IJKL MNOP QRST UVWX YZ 12345 67890-=[]\;',./ !@#$% ^&*()_+{}|:"<>? ♠♣♥♦ | J M Q Z |
Monaco (not available by default on MS windows) abcd efgh ijkl mnop qrst uvwx yz ABCD EFGH IJKL MNOP QRST UVWX YZ 12345 67890-=[]\;',./ zero is slashed! !@#$% ^&*()_+{}|:"<>? ♠♣♥♦ | J M Q Z |
Inconsolata (not available by default on mac OS ) abcd efgh ijkl mnop qrst uvwx yz ABCD EFGH IJKL MNOP QRST UVWX YZ 12345 67890-=[]\;',./ zero is slashed! !@#$% ^&*()_+{}|:"<>? ♠♣♥♦ | J M Q Z |
image | font name | font as displayed in this browser If the rendering in this column is not like the graphic in the first column then this browser does not have access to that font.
The ␛ character is coded as:
Some fonts have been loaded from this site using for example: | |||||||||||||||||||||||||||||||||||||||||||||||||||||
image of font
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
"ALS Script" | ALS Script 1234 5678 90 ␛ verses ␛ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ␛ verses ␛ . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Arial | Arial <td style=font-family:Arial> 1234 5678 90 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ␛ verses ␛ . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
"Arial Black" | "Arial Black" 1234 5678 90 ␛ verses ␛ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ␛ verses ␛ . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
"Arial Narrow" | "Arial Narrow" 1234 5678 90 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ␛ verses ␛ . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
"Bookman Old style" | Bookman Old Style 1234 5678 90 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ␛ verses ␛ . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
"Comic Sans Ms" | "Comic Sans Ms" 1234 5678 90 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ␛ verses ␛ . , - = [ ] ' ; / ! @ # $ % ^ & * () _ + | {} " : ? ¿ <> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Courier note: no
<small><small><small><small>
(monospaced)
(monospaced)
from
DaFont
|
for slashed zero see Wikipedia. Try: Monaco <span style=font-family:Monaco>0</span>
Unicode fonts Letterlike Symbols additional font definitions are at grsites.com/fonts/, www.webpagepublicity.com/free-fonts.html#Free Fonts
Discussion about monospaced fonts for programming including anti-aliasing.
15.1 Introduction
A font is a set of glyphs, all observing the same basic motif according to
design, size, appearance, and other attributes
To display a character with a particular font, the user agent identifies the font in the database that "best fits" (according to the font matching algorithm)
Specify fonts name, for example "BT Swiss 721 Heavy Italic"
.
font-family
: Group of fonts, designed to be used in combination and exhibiting similarities in design.
One member may be italic, another bold, another condensed or using small caps. font-style
: [normal|italic
|oblique
]. normal
, and is used
as a companion to sans-serif
. font-variant
Use the normal glyphs for lowercase characters or small-caps
. A particular font might contain only normal, only
small-caps, or both.
font-weight
refers to the boldness or lightness of the glyphs,
relative to other fonts in the same font family.
font-stretch
Desired amount of condensing or expansion in the glyphs relative to other fonts in the same font family.
font-size
From baseline to baseline,
when set solid (in CSS terms, this is when the font-size and line-height properties have the same value).
On all properties except font-size
, em
and
ex
length values refer to the font size of the current element.
For font-size
the length units refer to the
font size of the parent element. Using nn%
works well. See also length units.
properties are used to describe the desired appearance of text in the document
font descriptors are used to describe the
characteristics of fonts, so that a suitable font can be chosen to create the desired appearance.
font-family
properties [<family-name> |<generic-family> ],]* [<family-name> |<generic-family>]
Initial value depends on user agent; Applies to all elements; Inherited
Prioritized list of font-family
names and/or generic family names
is a font set (of the same style and size) that are searched in sequence to locate a glyph for a certain character.
serif
family.BODY { font-family: Baskerville, Symbol, serif }
serif, sans-serif, cursive, fantasy
, and monospace
are the generic font families. They are keywords and must not be quoted.
Baskerville, "Heisi Mincho W3"
and "Symbol"
. provide a generic font incase the font family cannot be found. Names containing whitespace must be quoted.
For example use the verdana
but if it's not available use a serif
font.
<style> body { font-family: verdana,serif; } </style> </head> <body bgcolor=linen> <H1 style=font-family: MyOwnFont, impact>Test</H1> What's up, Doc?
TestWhat's up, Doc? |
Example(s):
The richer selector syntax of CSS2 may be used to create language-sensitive typography. For example, some Chinese and Japanese characters are unified to have the same Unicode codepoint, although the abstract glyphs are not the same in the two languages.
*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif } *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }
This selects any element that has the given language - Japanese or Traditional Chinese - and requests the appropriate font.
font-style, font-variant,
font-weight
and
font-stretch
properties font-style:normal | italic | oblique |
inherit
normal
; Applies to all elements; Inherted font-variant
: normal
| small-caps
| inherit
normal
; Applies to all elements; Inherted
normal
| font that is not labeled as a small-caps font. |
small-caps
font that is labeled as a small-caps font. If a
not available, user agents simulates a small-caps
font, by taking a normal font and replacing the lowercase letters by scaled uppercase characters.
| |
The editor considers using <span style=font-variant:small-caps;color:red> small-caps <span> <span style=font-style:oblique> very <span> <span style=font-style:italic> poor <span> style.The author considers using small-caps very poor style.
Causes text to be transformed to uppercase, the same considerations as for
font-weight
:lighter |
100 |
200 |
300 |
normal aka 400 |
500 |
600 |
bold aka 700 |
800 |
900 |
bolder |
inherit
( These are shown in the font-weight
they indicate
using <span style=font-weight:vvv>vvv</span>
)
(although most font-family
s don't support this many variations)
Initial: normal
, Applies to: all elements ; Inherted
Example(s):
P { font-weight: normal } H1 { font-weight: 700 } BODY { font-weight: 400 } STRONG { font-weight: bolder }
serif normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter
serif <big> normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter
sans-serif normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter
fantasy normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter
cursive normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter
monospace normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter
monospace normal, <big> lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter
monospace 150% normal, lighter, 100, 200, 300, normal , 400 , 500, 600, bold, bolder, 700, 800, 900, lighter
Child elements inherit the computed value of the weight.
font-stretch
: normal | wider | narrower |
ultra-condensed | extra-condensed |
condensed | semi-condensed |
semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
font-stretch
selects a normal, condensed, or extended face from a font family.
The relative keywords
Initial:
[ For example, if the parent element has a font size of
The actual value
of this property may differ from the
computed value due a numerical value on
Child elements inherit the computed
font-size value
otherwise, the effect of
For example, the popular font Verdana has an aspect value of 0.58; when
Verdana's font size 100 units, its x-height is 58 units. This property allows authors to specify an aspect value for an element that
will preserve the x-height of the first choice font in the substitute font. where:
Example(s): For example, if 14px Verdana (with an aspect value of 0.58) was unavailable
and an available font had an aspect value of 0.46, the font-size of the
substitute would be 14 * (0.58/0.46) = 17.65px. Font size adjustments take place when computing the actual
value of font-size.
Since inheritance is based on
the computed
value, child elements will inherit unadjusted values.
Initial: see individual properties ;
Applies to all elements ; Inherited ;wider
& narrower
set the value to the next value.
15.2.4 font-size and font-size-adjust
font-size
:
<absolute-size> *
| <relative-size>
| <length>
| <percentage>
| inherit medium
; Applies to: all elements ; Inherited; Percentages: refer to parent element's font size ;
font-size
describes the size of the font when set solid.
xx-small |
x-small |
small |
medium |
large |
x-large |
xx-large
<relative-size>
relative to the table of font sizes and the font size of the parent element.
larger
| smaller
]
medium
, a value of
larger
will make the font size of the current element be large
. If the
parent element's size is not close to a table entry, the user agent
interpolates between table entries or round off to the closest one.
The user agent may have to extrapolate table values if the numerical value goes beyond
the keywords. <length>
A length value specifies an absolute font size (independent of the user agent's font table). Negative lengths are illegal. <percentage>
A percentage value specifies an absolute font size relative to the parent
element's font size. Use of percentage values, or values in em
s leads to
more robust and cascadable style sheets.
font-size-adjust
editor's note:following examples are written with second string prefixed
with <span style=font-size:xxxx; (opera and safari did em
only with ;
. opera and firefox didn't like a space before the pt
form)
with no other elements(no div or samp or blockquote)
and no don't seem to be honored by all browsers!
P { font-size: 16pt; } xXwW xXwW
BLOCKQUOTE { font-size: larger } xXwW xXwW
1st level,
and again
xXwW
xXwW 14pt 2nd level
and again
xXwW
xXwW 16pt 3rd level
xXwW
EM { font-size: 150% } xXwW xXwW
EM { font-size: 1.5em } xXwW xXwW
In bicameral†
scripts, the subjective apparent size and legibility of a font are less
dependent on their font-size
value than on the value of their x-height, or,more usefully, on the ratio of these two values, called the aspect value (font size divided by
x-height). The higher the aspect value, the more likely it is that a font at smaller sizes will be legible. Inversely, faces with a lower aspect value will become illegible more rapidly below a given threshold size than faces with a
higher aspect value. Straightforward font substitution that relies on font size alone may lead to illegible characters.
For comparison, Times New Roman has an aspect value of 0.46.
Verdana tends to remain legible at smaller sizes than Times New Roman.
Conversely, Verdana will often look too big if substituted for Times New Roman at a chosen size.
Values have the following meanings:
none
Do not preserve the font's x-height.
<number>
Specifies the aspect value. The number refers to the aspect value of the
first choice font. The scaling factor for available fonts is computed
according to the following formula: y(a/a') = c
y = 'font-size' of first-choice font
a' = aspect value of available font
c = 'font-size' to apply to available font
This image shows several typefaces rasterized at a common font
size (11pt. at 72 ppi), together with their aspect values. Note that faces with
higher aspect values appear larger than those with lower. Faces with very low
aspect values are illegible at the size shown.
This image shows the results of font-size-adjust where Verdana has
been taken as the"first choice", together with the scaling factor applied. As
adjusted, the apparent sizes are nearly linear across faces, though the actual
(em) sizes vary by more than 100%.
Note that font-size-adjust
tends to stabilize the horizontal metrics of lines, as well.
15.2.5 Shorthand font
font
:[ [
font-style
||†
font-variant
||
font-weight
] ?†
font-size
[ /
line-height ]?
caption
|†
icon |
menu |
message-box |
Percentages allowed on font-size
and line-height
;
The font
property is, except as described ,
a shorthand property for setting font-style,
font-variant,
font-weight,
font-size,
line-height,
and font-family,
at the same place in the
style sheet. The syntax of this property is based on a traditional typographical
shorthand notation to set multiple properties related to fonts.
All font-related properties are first reset to their initial values, including those listed in the preceding paragraph plus font-stretch and font-size-adjust. Then, those properties that are given explicit values in the font shorthand are set to those values. For a definition of allowed and initial values, see the previously defined properties. For reasons of backwards compatibility, it is not possible to set font-stretch and font-size-adjust to other than their initial values using the font shorthand property; instead, set the individual properties.
Example(s):
In the second rule, the font size percentage (80%) refers to the font size of the parent element.
In the third rule, the line height percentage (110%) refers to the font size of the element itself.
The first three rules do not specify the font-variant and
font-weight explicitly, so these
properties receive their initial values (normal
).
Notice that the font family name "new century schoolbook"
, which contains spaces, is enclosed in quotes.
The fourth rule sets the font-weight to 'bold', the font-style to 'italic', and implicitly
sets
The fifth rule sets the font-variant ('small-caps'), the font-size (120% of the parent's font size), the line-height (120% of the font size) and the font-family ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: font-style and font-weight.
The sixth rule sets the font-style, font-size, and class=propinst-font-family>font-family, the other font properties
being set to their initial values.
It then sets font-stretch to condensed
since that
cannot be set to that value using the font shorthand.
The following values refer to system fonts:
caption | buttons, drop-downs, etc. |
icon
| |
menu | dropdown menus and menu lists. |
message-box | used in dialog boxes. |
small-caption | for labeling small controls. |
status-bar | used in window status bars. |
System fonts may only be set as a whole; that is, font-family, size, weight, style, etc. are set at the same time.
These values may then be altered individually.
This property is "almost" a shorthand property: system fonts can only be specified with this property,
not with font-family itself, so font
allows authors to do more than the sum of its subproperties. The individual properties such as font-weight are still given values taken
from the system font, which can be independently varied.
Example(s):
BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif } BUTTON P { font: menu } BUTTON P EM { font-weight: bolder }
If the font used for dropdown menus on a particular system happened to be, for example, 9-point Charcoal, with a weight of 600, then P elements that were descendants of BUTTON would be displayed as if this rule were in effect:
BUTTON P { font: 600 9pt Charcoal }
Because the font shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration:
BUTTON P { font-style: normal; font-variant: normal; font-weight: 600; font-size: 9pt; line-height: normal; font-family: Charcoal }
A fallback mechanism for preserving some of the style when none of the specific font famlies can be found.
The five generic font families do not necessarily map to five distinct fonts, they may vary from browser to browser and may be specied by the browser user with a configuration or preferences option.
Glyphs of serif fonts, have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs),
Examples
serif
typically proportionately-spaced, often display a greater variation between thick and thin strokes than fonts from the 'sans-serif'
generic font family.
Latin | "Times New Roman", Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit , Roman, ParkAvenue, |
Greek | Bitstream Cyberbit |
Cyrillic | Adobe Minion Cyrillic, Excelcior Cyrillic Upright, MonotypeAlbion 70, Bitstream Cyberbit, ER Bukinst |
Hebrew | New Peninim, Raanana, Bitstream Cyberbit |
Japanese | Ryumin Light-KL, Kyokasho ICA, Futo Min A101 |
Arabic | Bitstream Cyberbit |
Cherokee | Lo Cicero Cherokee |
Glyphs in sans-serif fonts,have stroke endings
that are plain -- without any flaring, cross stroke, or other ornamentation.
Typically proportionately-spaced, often have little variation between thick and thin strokes, compared to 'serif'.
Examples
Latin | MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Arial, Univers, Futura, Helvetica , ITC Stone Sans, Gill Sans, Akzidenz Grotesk, |
Greek | Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek |
Cyrillic | Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion |
Hebrew | |
Japanese | Shin Go, Heisei Kaku Gothic W5 |
Arabic | MS Tahoma |
Glyphs in cursive fonts, generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork. Fonts for some scripts, such as Arabic, are almost always cursive.The term 'cursive' applies to a font for any script, although other names such as Chancery, Brush, Swing and Script are also used in font names.
Examples of fonts that fit this description include:
Latin fonts | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery Script, |
Cyrillic fonts | ER Architekt |
Hebrew fonts | Corsiva |
Arabic fonts | DecoType Naskh, Monotype Urdu 507 |
Fantasy fonts, are primarily decorative while still containing representations of characters (as opposed to Pi or Picture fonts, which do not represent characters). Examples include:
Latin fonts | Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz, Space Toaster, Symbol , Vinta, Wingdings , Webdings |
The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts, such as Arabic, look most peculiar.) The effect is similar to a manual typewriter, and is often used to set samples of computer code.
Examples of fonts which fit this description include:
Latin | Courier, MS Courier New, Courier, Lucida Console , Prestige , Everson Mono Curlz MT |
Greek | MS Courier New, Everson Mono |
Cyrillic | ER Kurier, Everson Mono |
Japanese | Osaka Monospaced |
Cherokee | Everson Mono |
Many available fonts at www.google.com/fonts
Discussion about monospaced fonts for programming including anti-aliasing.
as well as fedora
A open source font for coding including design discussion source code pro. downloadfont squirrel
next: 15.3 Font Selection