CSS font styles

Source: Internet
Author: User

CSS Font style properties

CSS text styles

Serial number Chinese description Markup syntax
1 Font style {font:font-style font-variant font-weight font-size font-family}
2 Font type {font-family: "Font 1", "Font 2", "Font 3",...}
3 Font size {font-size: Numeric |inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| Xx-small}
4 Font style {Font-style:inherit|italic|normal|oblique}
5 Font weight {font-weight:100-900|bold|bolder|lighter|normal;}
6 Font Color {color: value;}
7 Shadow color {text-shadow:16-bit color value}
8 Font line height {line-height: numeric |inherit|normal;}
9 Word spacing {letter-spacing: Numeric |inherit|normal}
10 Word spacing {word-spacing: Numeric |inherit|normal}
11 Font warp {FONT-VARIANT:INHERIT|NORMAL|SMALL-CPS}
12 English conversion {Text-transform:inherit|none|capitalize|uppercase|lowercase}
13 {Font-size-adjust:inherit|none}
14 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed| Semi-expanded|ultra-condensed|ultra-expanded|wider}

1. Font style: Font

Syntax: {font:font-style font-variant font-weight font-size font-family}
[< font style > | | < font morphing > | | < font bold >]? < font size > [/< row height >]? < font type >
Function: Shorthand property that provides a quick way to set all properties of a font.
Note: Font styles are used as a slight write for different font properties, especially 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, and row height is 14 points.

Example: Font font

2. Font class shape: font-family

Syntax: {font-family: Font 1, font 2, font 3,...}
Role: Calling client fonts
Description
• Separate each font name with "," when multiple fonts are specified.
• When the font name contains more than two separate words, use "" to enclose the font name.
• Use ' instead ' when there is already "" in the style rule.
Note: If you add more than one font name to the font-family, the browser will search for the installed font in the user's computer in the order of the font name, and once you encounter a font that matches the requirements, display the page content in that font and stop the search; Until it is found, the browser uses its default font instead of displaying the contents of the Web page in case all the fonts in the stylesheet are not installed.

Example: {font-family: blackbody, script;} Font type

3. Font Size: Font-size

Syntax: {font-size: Value |inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| Xx-small}
Function: Set text size, reference value unit
Description: Using proportional relationships
Xx-small
X-small
Small
Medium
Large
X-large
Xx-large

Example: {font-size:18pt;} Font size

4. Font style: Font-style

Syntax: {font-style:inherit|italic|normal|oblique}
function: To make text appear as a flat italic or italic body
Description
Inherit inheritance
Italic Italic Body
Normal Normal
Oblique Skew body

5. Font Weight: font-weight

Syntax: {font-weight:100-900|bold|bolder|lighter|normal;}
Function: Sets the thickness of the text
Description
bold Bold (equivalent to the value 700)
Bolder Extra Bold
Lighter Fine Body
normal normal body (equivalent to the value 400)
Note: The value range is from the number 100~900, and the browser default font weight is 400. In addition, the lighter and bolder can be used to make the font appear thinner or thicker on the original basis.

6. Font Color: Color

Syntax: {color: value}

Function: Font Color
Description: Color parameter value range
• Expressed as an RGB value
• Expressed as a color value of 16 binary (hex)
• Indicated by the English name of the default color
Note: The English name of the default color is undoubtedly the most convenient, but because there are too few predefined colors, more web designers like to use the RGB method. The advantages of RGB are many, not only can be in the form of digital accurate color, but also a lot of image production software (such as Photoshop) in the default use of the specification, so that the picture and the web to better combine to lay a solid foundation.

7. Text Shadow color: Text-shadow

Syntax: {text-shadow:16-bit color value}
Description: Doesn't seem to work?
Example: China China

8. Font line height

Syntax: {line-height: Value |inherit|normal}
Effect: The distance between rows and lines
Description: Range of values
• Numbers without units: Base 1, equivalent to 100% of the proportional relationship
• Numbers with length units: whichever is the specific unit
• Proportional relationships
Note: line spacing refers to the vertical distance between the upper and lower lines of the baseline. Generally, English five-wire exercise books, the third horizontal line from the top down is what the computer thinks of as its baseline. If the text font is large and the line spacing is relatively small, the upper and lower lines of text may overlap each other.

9. Word Spacing: letter-spacing

Syntax: {letter-spacing: Value |inherit|normal}
Effect: Controls the spacing between the letters of the text element and sets the distance that applies to the entire element.
Note: Numeric-Sets the length of the word spacing, positive values indicate the normal length of inheritance in the parent element, and negative values subtract the normal length. Specify the unit of measure after the number: Ex (the height of the lowercase letter x), EM (the width of the capital letter M).
Example: China and China

10. Word Spacing: word-spacing

Syntax: {word-spacing: Value |inherit|normal}
Description: Word spacing refers to the distance between each word in English, excluding Chinese text. Interval distance value: Points, EM, pixes, in, CM, MM, PC, ex, normal, etc.

11. Font variants: Font-variant

Syntax: {FONT-VARIANT:INHERIT|NORMAL|SMALL-CPS
Function: For switching between normal and small caps (slightly smaller than normal caps)
Description: Small-caps Small caps

7. Letter Case Conversion: Text-transform

Syntax: {text-transform:inherit|none|capitalize|uppercase|lowercase}
Function: Sets the casing standard for one or several letters.
Description
None does not change the uppercase lowercase of the text.
The first letter of each word in the capitalize element is capitalized.
uppercase set all text to uppercase.
lowercase set all text to lowercase.
Example: China ABCD China ABCD


Font-size-adjust.

Syntax: {font-size-adjust:inherit|none}
Effect: Unknown

Font-stretch.

Syntax: {font-stretch:condensed | expanded | extra-condensed | extra-expanded | inherit | narrower | normal |
semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | Wider}
Effect: Unknown

CSS font styles

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.