CSS font Properties

CSS font Properties
Please stop attacking this site! Thank you.

ASP Learning Network

The original document should be a CSS manual compiled from Shen Xiaoyu.

CSS font properties font attributes

--------------------------------------
Font Properties
CSS version
Compatibility compatibility
Inherit from parent inheritance
Description
--------------------------------------
Font css1/css2 ie4 + and ns4 + have composite attributes. Set or retrieve the text features of an object
Color css1 ie4 + and ns4 + have the text color for retrieving or setting objects.
Font-family css1 ie4 + and ns4 + have set or retrieve the font name sequence used for text in the object
Font-size css1 ie4 + and ns4 + have the font size set or retrieved from the object.
Font-size-adjust css2 none you have set or retrieve the font name sequence used for text in the object to force the same size
Font-stretch css2 none has settings or retrieval of whether the text in the object is horizontally stretched or deformed.
Font-style css1 ie4 + and ns4 + have font styles set or retrieved from objects.
Font-weight css1 ie4 + and ns4 + have the width of the text font set or retrieved from the object.
Text-decoration css1 ie4 + and ns4 + do not retrieve or set the decoration of text in objects, such as underlines and flashes.
Text-underline-position ie private attribute ie5.5 + set or retrieve the underline location defined by the text-decoration attribute
Text-shadow css2 none is not set or whether the text in the object is shadow or blurred
Font-variant css1 ie4 +, ns6 + indicates whether the text in the setting or retrieval object is a small uppercase letter
Text-transform css1 ie4 + and ns4 + have the case sensitivity of text in the retrieval or setting object.
Line-height css1 ie4 + and ns4 + have Row Height for retrieving or setting objects. That is, the distance between the bottom of the font and the top of the font.
Letter-spacing css1 ie4 + and ns6 + have the interval between retrieving or setting the text in the object
Word-spacing css1 ie4 + and ns6 + have the number of spaces inserted between words in the search or set object. Only available on Mac platform for ie4 +

Note: This color is a standard property of css2. This color is the recommended style table attribute for IE. This color is a private attribute of ns. This color is currently not supported by browsers.

Font
----------
Syntax:

Font: font-style | font-variant | font-weight | font-size | Line-height | font-family
Font: caption | icon | menu | message-box | small-caption | status-bar

Parameters:

This attribute is a composite property. For the first declaration method, see the attributes of each parameter.
Parameters in the second declaration method belong to css2.
Caption: Use text fonts (such as buttons and menus) of system controls with titles)
Icon: Use the font of the icon label
Menu: Use the font of the menu.
Message-box: Use the text font of the Information dialog box
Small-caption: Use the font of the widget
Status-bar: Use the font of the window Status Bar

Note:

Set or retrieve the text features of an object. This attribute is a composite property.
Parameters of the first declaration method must be in the order listed above. Each parameter can have only one value. If this parameter is ignored, the default value of the independent attribute corresponding to the parameter is used.
For how to use fonts that may not be available in the user-side system, see @ font-face rules.
The corresponding script feature is font. For more information, see my other bibliography.

Example:

P {Font: italic small-caps 600 12pts/18pts ;}
P {Font: italic small-caps 600 12pts/150% courier ;}
P {Font: italic small-caps 600 12pts/1.5 courier ;}
P {Font: italic small-caps 600 12pts/18pts courier ;}
P {Font:/18pts serif ;}
P {Font: Oblique 100 24pts ;}
H1 {Font: 15pt/17pt bold "Arial" normal}

Color
----------
Syntax:

Color: Color

Parameters:

Color: Specifies the color. See color unit and Appendix: Color Table

Note:

Retrieves or sets the text color of an object. No default value.
Note that specifying color by color name is not accepted by some browsers.
The script feature is color. For more information, see my other bibliography.

Example:

Div {color: #345456 ;}
Div {color: RGB (200 );}
Div {color: menu ;}
Div {color: red ;}

Font-family
Syntax:

Font-family: Name
Font-family: cursive | fantasy | monospace | serif | sans-serif

Parameters:

Name: font name. Sort by priority. Separated by commas. If the font name contains spaces, enclose them in quotation marks.
The second declaration method uses the listed font sequence names. If the fantasy sequence is used, the default font sequence is provided.

Note:

Set or retrieve the font name sequence used for text in an object.
The default value is determined by the browser.
The sequence can contain embedded font. See @ font-face rules.
The script feature is fontfamily. For more information, see my other bibliography.

Example:

Div. fixedwidth {font-family: courier, "Courier New", monospace}

Font-size
Syntax:

Font-size: absolute-size | relative-size | length

Parameters:

Absolute-size: adjusted based on the object font. XX-small | X-small | medium | large | X-large | XX-large
Relative-size: relative to the parent to adjust the font size in the image. Use a proportional Em unit. Larger | smaller
Length: Percentage | length value composed of floating-point numbers and unit identifiers. It cannot be a negative value. The percentage value is based on the font size of the parent object. See length unit

Note:

Set or retrieve the font size of an object.
The default value is the medium value of absolute-size.
The corresponding script feature is fontsize. For more information, see my other bibliography.

Example:

P {font-style: normal ;}
P {font-size: 12px ;}
P {font-size: 20% ;}

Font-size-adjust
----------
Syntax:

Font-size-adjust: None | Number

Parameters:

None: allows each word in the font sequence to follow its own size
Number: forces the same size to be specified for all fonts in the font Sequence

Note:

Sets or retrieves whether the font name sequence used for text in the object is forced to use the same size.
Currently, ie5.5 does not support this attribute.
The corresponding script feature is fontsizeadjust. For more information, see my other bibliography.

Example:

P {font-family: Arial, courier; font-size-adjust: none ;}
P {font-family: verdana, courier; font-size-adjust:. 56 ;}

Font-stretch
----------
Syntax:

Font-stretch: normal | narrower | wider | ultra-condensed | extra-condensed | semi-expanded | extra-expanded | ultra-expanded

Parameters:

Normal: No tensile deformation is applied.
Narrower: Use a smaller font width than the currently set value
Wider: Use a value greater than the current value that causes the font width.

Note:

Sets or retrieves whether the text in the object is horizontally stretched or deformed.
The change is relative to the normal width of the font displayed by the browser.
Currently, ie5.5 does not support this attribute.
The corresponding script feature is fontstretch. For more information, see my other bibliography.

Example:

P {font-stretch: wider ;}
P {font-stretch: Ultra-expanded ;}

Font-style
----------
Syntax:

Font-style: normal | italic | oblique

Parameters:

Normal: normal font
Italic: italic. For special fonts without italic variables, oblique will be applied
Oblique: Skewed font

Note:

Set or retrieve the font style in the object.
The corresponding script feature is fontstyle. For more information, see my other bibliography.

Example:

P {font-style: normal ;}
P {font-style: italic ;}
P {font-style: oblique ;}

Font-weight
----------
Syntax:

Font-weight: normal | bold | bolder | lighter | Number

Parameters:

Normal: normal font. The number is 400. Declaring this value will cancel any previous settings
Bold: bold. The number is 700. It is also equivalent to the role of object B.
Bolder: ie5 + special bold
Lighter: ie5 + body
Number: ie5 + 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Note:

Set or retrieve the text font width of an object.
The function is determined by the specific font variable ing of the fonts installed on the client system. The system selects the latest match. That is to say, the user may not see the difference between different values.
The script feature is fontweight. For more information, see my other bibliography.

Example:

SPAN {font-weight: 800 ;}

Text-Decoration
-----------
Syntax:

Text-Decoration: None | underline | blink | overline | Line-through

Parameters:

None: No Decoration
Blink: flashing
Underline: underline
Line-through
Overline: dashes

Note:

Retrieves or sets the decoration of text in an object.
The default value of A, U, and INS objects with href is underline.
The strike, S, and del objects. The default value is line-through.
This attribute does not apply to objects without text.
The script feature is textdecoration. For more information, see my other bibliography.

Example:

Div {text-Decoration: underline ;}
Div {text-Decoration: underline overline ;}

Text-underline-Position
----------
Syntax:

Text-underline-position: Below | above

Parameters:

Below: below the text
Above text:

Note:

Set or retrieve the underline position defined by the text-decoration attribute.
The corresponding script feature is textunderlineposition. For more information, see my other bibliography.

Example:

P {text-underline-position: above; text-Decoration: underline ;}

Text-shadow
----------
Syntax:

Text-Shadow: color | length | lenth | opacity

Parameters:

Color: Specifies the color. See color unit and Appendix: Color Table
Length: The length value composed of floating point numbers and unit identifiers. Can be negative. The first length specifies the horizontal extension distance of the shadow. The second length specifies the vertical extension distance of the shadow. See length unit
Opacity: A length value composed of floating-point numbers and unit identifiers. It cannot be a negative value. Specify the distance of the blur effect. If you only need the blur effect, set all the first two lengths to 0. See length unit

Note:

Sets or retrieves the shadow and blur effects of text in an object.
You can set multiple sets of effects by commas.
It can be used for pseudo classes: First-letter and: first-line.
Currently, ie5.5 does not support this attribute.
The script feature is textshadow. For more information, see my other bibliography.

Example:

P {text-Shadow: 0px 0px 20px yellow, 0px 0px 10px orange, red 5px-5px ;}
P: First-letter {font-size: 36px; color: red; text-Shadow: Red 0px 0px 5px ;}

Font-variant
Syntax:

Font-variant: normal | small-caps

Parameters:

Normal: normal font
Small-caps: Small uppercase letter font

Note:

Specifies whether or not the text in the object is a small uppercase letter.
The corresponding script feature is fontvariant. For more information, see my other bibliography.

Example:

SPAN {font-variant: Small-caps ;}

Text-Transform
----------
Syntax:

Text-transform: None | capitalize | uppercase | lowercase

Parameters:

None: no conversion occurs.
Capitalize: converts the first letter of each word into uppercase letters, and the rest are not converted.
Uppercase: Convert to uppercase
Lowercase: Convert to lowercase

Note:

Retrieves or sets the case sensitivity of text in an object.
The script feature is texttransform. For more information, see my other bibliography.

Example:

Div {text-transform: uppercase ;}

Line-height
Syntax:

Line-Height: normal | length

Parameters:

Normal: the default Row Height.
Length: percent number | length value composed of floating point numbers and unit identifiers, which can be negative values. The percentage value is based on the font height. See length unit

Note:

Retrieves or sets the Row Height of an object. That is, the distance between the bottom of the font and the top of the font.
If the row contains multiple objects, the maximum row of the application is high. The Row Height cannot be a negative value.
The corresponding script feature is lineheight. For more information, see my other bibliography.

Example:

Div {Line-Height: 6px ;}
Div {Line-Height: 10.5 ;}

Letter-spacing
Syntax:

Letter-Spacing: normal | length

Parameters:

Normal: Default Interval
Length: A length value composed of floating-point numbers and unit identifiers, which can be negative values. See length unit

Note:

Retrieves or sets the interval between texts in an object.
This attribute adds the specified interval to each text, but the last word is excluded.
The corresponding script feature is letterspacing. For more information, see my other bibliography.

Example:

Div {letter-Spacing: 6px ;}
Div {letter-Spacing: 0.5pt ;}

Word-spacing
----------
Syntax:

Word-Spacing: normal | length

Parameters:

Normal: Default spacing
Length: A length value composed of floating-point numbers and unit identifiers, which can be negative values. See length unit

Note:

Retrieves or sets the number of spaces inserted between words in an object. Internet Explorer 4 + is only available on Mac.
The corresponding script feature is wordspacing. For more information, see my other bibliography.

Example:

Div {word-Spacing: 10 ;}
Div {word-Spacing: 10px ;}