| We understand by font a group of signs that have similar characteristics in terms of design, size, appearance and other attributes, and allows us to represent what we write on the computer. Obviously, certain fonts should contain a symbol for each character in our alphabet, numbers for each and every punctuation mark, or any other (mathematical languages with Latin characters like Japanese). |
| An application of the user (browser) must solve the following issues prior to visually represent a character: |
| - Is it specified, either directly or by inheritance, a font for this character? |
| - Does the application of the user (browser) have available this font? |
| - If so, what sign (s) will be assigned to this character or sequence of characters? |
| - If not, what should I do? Should it be replaced by another font? Can it be recovered from the Web? |
| CSS, in general, the authors specify the characteristics of a font through a series of font properties, which will look after now. |
| And what is to specify a font? The specification of the font has to do with how the authors style sheets specify what fonts to be used by an application user. In principle, it seems that the obvious way is to specify a font is by name, a simple string that gives the impression of being separated into different parts, for example "BT Swiss 721 Heavy Italic. |
| Unfortunately, there is no well-defined taxonomy and universally accepted classification of fonts based on their names, and the terms applied to the name of a family of fonts may not be appropriate for others. For example, the word 'italic' is commonly used to define the text slanted, but slanted text may also be called oblique, inclined or cursive. Similarly, the names of the fonts typically contain terms that describe the "weight" of a font. The main role of these names is to distinguish different versions of density within a family of fonts. There is no universally accepted expressions for the weights and their use varies greatly. For example, a font that could be seen as bold can be described as regular, medium, semi-black or ultra-black, depending on how black is the "normal" of the font within the design. |
| This absence of a systematic description prevents, within the overall framework, write the name of a typeface that differs in a modified sense, such as being more black. |
| Because of this, CSS uses a different model. The fonts are not requested by the simple name of the font, but through the way to establish a set of properties of the font. The properties of fonts can be changed individually, for example to increase density, and the new set of values of the properties of the font will be used then to select again the database of the fonts. The result is an increase in regularity for style sheet authors and implementors, and an increase in solidness. |
| CSS2 specifies fonts according to these features: |
|
 Font-family
|
The 'font family' specifies which family will be used to process the text visually. A font family is a group of fonts designed to be used in combination and exhibiting similarities in design. A member of the family may be italic, another bold, condensed or otherwise versalitas. The names of font families include "Helvetica", "New Century Schoolbook" and "L Kyokasho ICA. The names of the families of fonts are not restricted to Latin characters. The families of fonts can be grouped into different categories: those with or without serif, whose characters are or are not proportionally spaced, those that mimic handwriting, which are types of fantasy, etc..
|
Font-style |
The font style specifies whether the text will be processed using a visual model version normal, italic or oblique. The italic is the cursive version that accompanies the normal type, but not enough to be a handwritten letter. The oblique is a tilted version of the standard type and is used most commonly in the sans-serif. This definition avoids having to name a type leaning slightly as oblique or normal Greek font as italic.
|
Font-variant |
The font variant indicates whether the text should be processed visually using normal signs for the lower-case letters characters or using versalitas for the lower-case letters. A particular font may contain only lowercase letters, signs, only versalitas or both types of signs, this property is used to apply the appropriate source, and if the font contains both variants, the appropriate sign.
|
Font-weight |
The weight of the font refers to the degree of strength or lightness of the signs used to process the text visually, in relation to other fonts in the same family.
|
Font-size |
The size of the font indicates the size of the font from one baseline to another when it has a normal interlinea (in terms of CSS, this is the case when the properties' font-size 'and' line-height 'are the same value).
|
| In all properties except 'font-size', the values of the measures 'em' and 'ex' refer to the font size of the current element. For 'font-size', these units of measure are related to font size of the parent element. |
| |
FONT-FAMILY < Name-of-the-family > < generic-family > inherit |
| This property specifies a prioritized list of font family names and / or generic family names. To solve the problem that a single font may not have signs to show all the characters in a document, or that not all fonts are available in all systems, this property allows authors to specify a list of fonts, all of same style and size, which are tested in succession to see if they contain a sign for a certain character. This list is called a set of fonts. |
| The values that can take are: |
|
 < Name-of-the-family > (is 0, 1 or more times) |
|
The name of a font family of choice. In the above example, "Baskerville", "Heisi Mincho W3" and "Symbol" are font families. The names of families that contain spaces must be enclosed in quotation marks. If we omit the quotation, any white space before and after the font name are ignored and any sequence of spaces in blank within the name of the font becomes its simple space. |
|
(is 0 or 1 time, but always at the end) |
|
They defined the following generic families: 'serif', 'sans-serif', 'Italic', 'fantasy' and 'monospace' (explained below). The names of the generic font families are keywords and therefore should not be in quotes. |
|
We recommend the authors to offer a generic font family as a last resort, to achieve greater solidness. |
|
inherit |
|
Each property may also have a specified value as 'inherit', which means that for a given element, the property takes the same value computed than the property of the parent of the element. The inherited value, which normally is only used as a backup, can be strengthened by making explicit 'inherit'. (This definition applies to all properties that specify this value). |
| |
|
| For example, a text containing words in Castilian mixed with mathematical symbols may need a set of two fonts, one containing Latin letters and numbers, the other containing mathematical symbols. Here is an example of a set of fonts suitable for a text that is expected to contain latin characters, in Japanese and mathematical symbols: |
| BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif } |
| The signs are available in the "Baskerville" (a font that covers only Latin characters) will be taken from that font, the signs japanese are taken from the "Heisi Mincho W3", and mathematical symbols will come from the "Symbol". Any other will come from the generic family 'serif'. (If you test on your PC, make sure you have the three families of fonts installed) |
| The generic font family will be used if one or more of the other fonts of the set of fonts is unavailable. Although many fonts provide a sign for the "missing character", typically a white rectangle, as the name implies this should not be considered an equivalent font except the last of a set of fonts. |
| Take a html file with the following structure: |
 |
| In this case, if we execute the code EXAMPLE, we see that the text contained in the H1 tag will be in monospace and the rest of the text is displayed according to the specifications for the BODY tag. If the Arial font family exists for the browser, it will choose it in first pleca. If it doesn't exist it would skip to the generic font family of fonts, which in this case is the serif. |
| |
FONT-STYLE |
| This property requests the normal version of a font (also named "Roman" or "round") within a family. It basically specifies the style that the repressented font will have from among three possibilities: normal, italic or oblique. |
| Values that may take: |
|
normal |
|
It specifies a font classified as 'normal' database of fonts UA (user application). |
|
oblique |
|
It specifies a font classified as' oblique 'in the database of fonts of UA. The fonts that include their names in the expressions Oblique, Slanted or Incline are typically defined as' oblique 'in the database of fonts of UA. A font set 'oblique' in the database of fonts of UA may have been created, in reality, tilting electronically a normal font. |
|
italic |
|
It specifies a font classified as "italic" in the database of fonts or the AU, if that is not available, defined as an 'oblique'. The fonts that include their names in the expressions Italic, Cursive or Kursiv will be typically defined as "italic". |
|
inherit |
|
For a given element, the property takes the same value computed than the property of the parent of the element. The inherited value, which normally is only used as a backup, can be strengthened by putting explicit 'inherit'. |
| |
|
| Suppose an html file with the following structure: |
 |
| In this case, if we execute the code EXAMPLE, we will see the behavior of three kinds of style. Often, the italic and oblique style are represented in exactly the same, as is the case. |
| |
FONT-VARIANT |
| In a small-caps font, the signs for the lowercase letters are equal to the capitalization, but in a smaller size and with slightly different proportions (in Spanish named universal or versalitas). |
| The values can take: |
|
normal |
|
It specifies a font that is not defined as versalita. |
|
small-caps |
|
It specifies a defined font as versalita. If a genuine versalita is not available, the applications of the user must simulate, for example by taking a normal font and replacing the lowercase letters by uppercase reduced. As a last resort, signs of not reduced capital letters of a normal font may replace the signs of a font versalita so the text appears in all capital letters. |
|
inherit |
|
For a given element, the property takes the same value computed than the property of the parent of the element. The inherited value, which normally is only used as a backup, can be strengthened by putting explicit 'inherit'. |
| |
|
| Suppose an html file with the following structure: |
 |
| In this case, if we execute the code EXAMPLE, we will see the behavior of the letters in versalitas. Although at first glance it does not appear, the upper-case letters from two texts have the same size. |
| |
FONT-WEIGHT |
| The property 'font-weight' specifies the weight of a font (how intense it is). |
| The values can take: |
|
100 to 900 |
|
These values form an ordered sequence, where each number indicates a weight that is at least as strong as its predecessor. |
|
normal |
|
Equal to '400'. |
|
bold |
|
Equal to '700'. It's the typical bold |
|
bolder |
|
The next largest. Specifies the next weight that is assigned to a font that is larger than the inherited value. If there is no such weight, the result is simply the next numerical value (and the font remains unchanged), unless the inherited value is'900 ', in which case the resulting weight is also'900'. |
|
lighter |
|
The next child. Specifies the next weight that is assigned to a font is lighter than the inherited value. If there is no such weight, the result is simply the next lighter numerical value (and the font remains unchanged), unless the inherited value is'100 ', in which case the resulting weight is also'100'. |
|
inherit |
|
For a given element, the property takes the same value computed than the property of the parent of the element. The inherited value, which normally is only used as a backup, can be strengthened by putting explicit 'inherit'. |
| |
|
| Suppose an html file with the following structure: |
 |
| In this case, if we execute the code EXAMPLE, we will see the behavior of the weights of the characters. Obviously, the weight 400 and the normal match. But in all cases I have tried (a few) the lighter and the Bolder do not differ the font size from the font previous. Test yourself with other fonts, changing the font-family and see it. If you find any, make a comment at the end of the tutorial. |
| |
LINE-HEIGHT |
| If the property is put into a block-level element whose content is composed of inline elements, specifies the minimum height of each generated inline box. If the property is placed in an inline element, then it specifies the exact height of each box generated by the element (Except for inline replaced elements, where the height of the box is given by the property 'height'). |
| The values that can take are: |
|
normal |
|
Communicates to the application user to set a value computed as a "reasonable" based on the size of the element. The value has the same meaning as < number >. We recommend a computed value for 'normal' between 1.0 and 1.2. |
|
< measure > |
|
The height of the box has this measure. Negative values are illegal. |
|
< number > |
|
The computed value of the property is this number multiplied by the size of the font element. Negative values are illegal. Either way, the number, not the computed value is inherited. |
|
< percentage > |
|
The computed value of the property is this percentage multiplied by the computed font size of the element. Negative values are illegal. |
| |
|
| It is easier to start with an example. Take a html file with the following structure: |
 |
| In this case, if we execute the code EXAMPLE , I think we will have no doubt (I've added the color red to the bottom of the lines to make it seen better). The numerical value 1.0, and the percentage 100%, give the box containing the text, the minimum value so all characters are contained within that box. From there, values superiors or inferiors below to expand or decrease this box, as shown in the example. |
| The generic font families are a support mechanism, a means of preserving something of the intent of the stylesheet where none of the author's specified fonts can be selected. For optimum typographic control, in the style sheets, fonts should be used with proper names. |
| All five generic font families are established to exist in all CSS implementations (they do not necessarily have to assign five different sources). Applications of the user should provide reasonable predetermined options for the generic font families, which express the characteristics of each family as much as possible within the limits allowed by the underlying technology. |
| User applications are encouraged to allow the user to select alternative options for the generic fonts. |
| These are the generic family of fonts: |
|
| serif |
Signs of the serif fonts, as the term is used in CSS, have features with shots, finishing with bell-forms or bevelled. The serif fonts are typically proportionately spaced (each letter has a space on the page in proportion to its size). They often have a greater variation between thick and thin features than the fonts of the families' sans-serif '. CSS uses the term 'serif' to apply to a font in any script, although other names more familiar to some scriptures in particular, as Mincho (Japanese), Sung or Song (Chinese), Pathang (Korean). Any font described in this way can be used to represent the generic family 'serif'. |
|
EXAMPLES OF FONTS THAT FIT THIS DESCRIPTION:
Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
|
| sans-serif |
Signs of the sans-serif fonts, as the term is used in CSS, no shots, no bell-forms, strokes or other end-ornaments. Sans-serif fonts are typically proportionately spaced (each letter has a space on the page in proportion to its size). They often have less variation between thin and thick features, compared to serif fonts. CSS uses the term 'sans-serif' to apply to a font in any script, although other names are more familiar to some scriptures in particular, as Gothic (Japanese), Kai (Chinese), or totum Kodig (Korean). Any font described in this way can be used to represent the family generic 'sans-serif'. |
|
EXAMPLES OF FONTS THAT FIT THIS DESCRIPTION:
MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
|
| cursive |
The signs of Cursive fonts, as the term is used in CSS, usually linked traits or other cursive characteristics marked more than italic types. Signs are partially or completely connected and the result is more like handwriting or brush as a printed type. In some writing systems such as Arabic, the fonts are almost always italicized. CSS uses the term 'Italic' to be applied to a font in any script, although other names such as Chancery, Brush, Swing and Script are also used in the names of the fonts. |
|
EXAMPLES OF FONTS THAT FIT THIS DESCRIPTION:
Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
|
| fantasy |
The fancy fonts, as the term is used in CSS, are primarily decorative but still represent characters (as opposed to the fonts of symbols that don't represent characters). |
|
EXAMPLES OF FONTS THAT FIT THIS DESCRIPTION:
Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
|
| monospace |
The sole criterion for recognizing a monospace font is that all the signs occupy the same horizontal constant space. (This can make some writing systems such as Arabic, have a peculiar style.) The effect is similar to that of manual typewriters and is often used to illustrate the examples of computer code. |
|
EXAMPLES OF FONTS THAT FIT THIS DESCRIPTION:
Courier, MS Courier New, Prestige, Everson Mono |
Español
English
