CSS font style (font style), property CSS font style (font style) is one of the indispensable style properties of the Web page, with the font style, our web page can become more beautiful, so the font style attributes have become the knowledge that every designer must understand. Here are my carefully compiled CSS font style attributes knowledge, for everyone to learn the reference:
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 the text size
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}: Controls the spacing between the letters of the text element, and the distance set is applied 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
12. 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}
Definition usage: The Font-size-adjust property specifies an aspect value for an element so that the x-height of the preferred font can be maintained.
Description: The ratio between the height of the lowercase letter "x" of the font and the "font-size" height is called the aspect value of a font. When a font has a high aspect value, it is easier to read when the font is set to a small size. Example: Verdana's aspect value is 0.58 (meaning that when the font size is 100px, its x-height is 58px). The aspect value of times New Roman is 0.46. This means that the Verdana is easier to read than the Times New Roman in small sizes.
Font-stretch.
Syntax: {font-stretch:condensed | expanded | extra-condensed | extra-expanded | inherit | narrower | normal |
semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | Wider}
Definition usage: The Font-stretch property can stretch and deform the current font-family.
Font-stretch properties are not supported in all major browsers.
CSS font style (font style), properties
