Shulou(Shulou.com)06/03 Report--

How to understand the Font Style attribute in css font style, I believe that many inexperienced people do not know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Css text style

Serial number Chinese description Font 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: value | inherit | medium | 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: numeric;} 7 shadow color {text-shadow:16 bit color} 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 deformation {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}

[|] [/]?

Function: abbreviated properties, which provides a quick way to set all properties of fonts.

Note: font styles are used as abbreviations for different font properties, especially line height. For example, P {font: italic bold 12pt/14pt Times, serif} specifies that the segment is a bold (bold) and italic (italic) Times or serif font with a 12:00 size and a line height of 14:00.

Example: font

two。 Font type: font-family

Syntax: {font-family: font 1, font 2, font 3.}

Function: call client font

Description:

When you specify multiple fonts, separate each font name with ",".

When the font name contains more than two separate words, enclose the font name with "".

When there is already a "" outside the style rule, use "" instead of "".

Note: if you add multiple font names after the font-family, the browser will look for the installed fonts on the user's computer one by one in the order of the font names. Once you encounter a font that matches the required font, the web page content will be displayed in this font and the search will be stopped. If it doesn't match, keep searching until you find it, and in case all the fonts in the stylesheet are not installed, the browser will replace the display of the web page with its own default font.

Example: {font-family: boldface, official 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: use proportional relationship

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 the text appear in flat italics or italics for emphasis

Description:

Inherit inheritance

Italic italics

Normal is normal.

Oblique oblique body

5. Font weight: font-weight

Syntax: {font-weight:100-900 | bold | bolder | lighter | normal;}

Function: set the thickness of the text

Description:

Bold bold (equivalent to 700)

Bolder extra bold

Lighter fine body

Normal normal body (equivalent to 400)

Note: values range from the number 100 to 900, and the default font weight for the browser is 400. In addition, you can use the parameters lighter and bolder to make the font appear thinner or thicker on the original basis.

6. Font color: color

Syntax: {color: numeric}

Function: font color

Description: range of color parameters

Expressed in RGB values

Expressed in hexadecimal (hex) color values

Expressed 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 RGB. RGB has many advantages, not only can accurately represent the color in the form of numbers, but also is the default specification used in many image production software (such as Photoshop), which lays a solid foundation for a better combination of pictures and web pages.

7. Text shadow color: text-shadow

Syntax: {text-shadow:16 bit color value}

Explanation: it doesn't seem to work?

Example: China

8. Font line height

Syntax: {line-height: numeric | inherit | normal}

Function: the distance between rows

Description: value range

Non-unit number: based on 1, equivalent to 100% of the proportional relationship

Number with unit of length: based on the specific unit

Proportional relation

Note: line spacing refers to the vertical distance between the upper and lower baselines. Generally speaking, the third horizontal line of the English five-line exercise book from top to bottom is what the computer thinks of as the baseline of the line. 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. Spacing: letter-spacing

Syntax: {letter-spacing: numeric | inherit | normal}

Function: controls the spacing between the letters of a text element, and the distance set applies to the entire element.

Note: numeric value-sets the spacing length. A positive value indicates the normal length inherited in the parent element, while a negative value removes the normal length. Specify the unit of measurement after the number: ex (the height of the lowercase x) and em (the width of the uppercase M).

Example: China china China china

10. Word spacing: word-spacing

Syntax: {word-spacing: numeric | inherit | normal}

Note: word spacing refers to the distance between each word in English, excluding Chinese text. Interval distance: points, em, pixes, in, cm, mm, pc, ex, normal, etc.

11. Font deformation: font-variant

Syntax: {font-variant:inherit | normal | small-cps

Function: for switching between normal and small uppercase letters (slightly smaller than normal uppercase letters)

Description: small-caps small capital letters

7. Letter case conversion: text-transform

Syntax: {text-transform:inherit | none | capitalize | uppercase | lowercase}

Function: sets the case standard for one or more letters.

Description:

None does not change the uppercase and lowercase of text.

The first letter of each word in the capitalize element is capitalized.

Uppercase sets all text to uppercase.

Lowercase sets all text to lowercase.

Example: china abcd china abcd

13. Font-size-adjust

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

Function: unknown

14. Font-stretch

Syntax: {font-stretch:condensed | expanded | extra-condensed | extra-expanded | inherit | narrower | normal |

Semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | wider}

Function: unknown

After reading the above, have you mastered how to understand the Font Style attribute in css font styles? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.