CSS Font Properties

Css

Font family Section

Syntax: font-family: [[< family name > | < category family >],]* [< clan name > | < category families

Allowable value: < family name >
Any font family section name can be used
< category family >

Serif (e.g., times)
Sans-serif (e.g., Arial or Helvetica)
Cursive (e.g., zapf-chancery)
Fantasy (e.g., Western)
Monospace (e.g., Courier)

Initial value: determined by the browser

Apply to: All objects

Backward-compatible: Yes

The font family section can be used with a specified font name or a category of font family section. Clearly, defining a specified font name is no more appropriate than defining a category of font family. The assignment of a plurality of families is available, and if a specified font assignment is determined, there should be a family of species name followed, in case the first choice does not exist.

Examples of font family section declarations are as follows:

P {font-family: "New Century Schoolbook", Times, serif}
Note that the first two assignments specify the type of font: New Century schoolbook and Times. However, because they are both serif fonts, the category of the font family is listed as a fallback to prevent the system from having both but another serif qualified font.

Any font names that contain spaces must be enclosed in single or double quotes.

The font family section can also be given with the font properties.

Font style

Syntax: Font-style: < value >

Allow Value: normal | Italic | Oblique

Initial value: Normal

Apply to: All objects

Backward-compatible: Yes

The font style property defines the font to display with one of three methods: Normal (normal), italic (italic), or oblique (italic). The style sheet font style Declaration example is as follows:

H1 {Font-style:oblique}
P {Font-style:normal}

Font variants

Syntax: font-variant: < value >

Allow Value: normal | Small-caps

Initial value: Normal

Apply to: All objects

Backward-compatible: Yes

Font deformation properties Determine whether the font is normal (normal) or small-caps (small capital letters). When all the letters in the text are capitalized, small caps (values) display uppercase characters that are slightly larger than lowercase letters. Later versions of CSS will support additional variants, such as shrinkage, expansion, lowercase digital, or other custom variants. Examples of font variants are as follows:

SPAN {Font-variant:small-caps}

Font Bold

Syntax: Font-weight: < value >

Allow Value: normal | Bold | Bolder | Lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Initial value: Normal

Apply to: All objects

Backward-compatible: Yes

The font bold property is used to indicate the bold font. When other values are absolute, the bolder and lighter values grow proportionally.

Note: Because not all fonts have nine valid bold displays, some of the bold will be grouped under the specified combination. If the specified bold is not valid, the following principles are selected:

500 will be replaced by 400, and vice versa.
100-300 will be specified as the next finer bold, if any, otherwise the thicker bold
600-900 will be specified as the next thicker bold, if any, otherwise it is the next finer bold
Some examples of font bold definitions are as follows:

H1 {font-weight:800}
P {Font-weight:normal}

Font size

Syntax: font-size: < absolute size > | < relative size > | < length > | <% >

Allowable value: < absolute size >
Xx-small | X-small | Small | Medium | Large | X-large | Xx-large
< relative size >
larger | Smaller
< length >
< percent > (in relation to parent element)

Initial value: Medium

Apply to: All objects

Backward-compatible: Yes

The font Size property is used to modify the font display size. Absolute lengths (used in units of pt-pixels and in-inches) require careful consideration of their weaknesses in adapting to different browsing environments. For a user, the absolute length of the font is likely to be large, or very small.

Some size-specific definitions are as follows:

H1 {Font-size:large}
P {font-size:12pt}
LI {font-size:90%}
Strong {Font-size:larger}
Web page makers need to be aware that the Microsoft Internet Explorer 3.x incorrectly treats EM and ex units as pixels, which is likely to make text unreadable for those units. The browser also incorrectly treats the percent value as the default font size relative to the selected part, rather than the font size of the ancestor element. This approach is like

H1 {font-size:200%}
This is dangerous, and its size will be considered twice times the default font size for IE's first-level headers, not twice the font size of the ancestor element. In this case, the body is usually considered a superior element, and it is likely to define a medium font size, however, the default font size for the first-level headers in IE may be considered xx-large.

With these errors in mind, the Web page author should be careful to use the percent value when using the font size attribute, and should try to avoid using the two units of EM and ex.

Font

Syntax: font: < value >

Allowable values: [< font style > | | < font variants > | | < font bold >]? < font size > [/< Line high >]? < font family section >

Initial value: Not defined

Apply to: All objects

Backward-compatible: Yes

Font properties are used as a bit of a different font property, especially for row heights. For example

P {font:italic bold 12pt/14pt times, serif}
Specifies that the segment is bold (bold) and italic (italic) times or serif font, 12 point size, row height to 14 points.