Fonts and Text
- Fonts are “different styles of text” or “shape structure of words”, such as Song/bold/block letters, etc.
- Text is a group of words or characters, such as chapter headings, paragraphs, etc., regardless of the font used.
- CSS defines properties for fonts and text. Font properties describe the size and appearance of a type of font. For example, what font family to use (Times or Helvitica), what font size to use, bold or italic. Text attributes describe how text is processed. For example, how high the line is or how far apart the characters are, whether they are underlined or indent.
The font
Fonts in web pages come from three sources:
- Fonts installed on the user’s machine
- Fonts saved on third party websites. The most common are Typekit and Google, which can be linked to your page using the Link tag
- Fonts saved on your Web server. These fonts can be sent to the browser along with the web page using the @font-face rule
Font properties
- font-family
- font-size
- font-style
- font-weight
- font-variant
- Font (shorthand property)
Font family
Note: if the font family name is more than one word, it must be in quotes, as in font family: “宋体”.
The font size
Font-size: Used to set the font size
Absolute font size
Use pixels (PX), picas (picA), or inches. When setting the absolute font size, you can also use keyword values such as X-small, medium, x-large, and so on.
Relative font size
Set the font size using percentages, EM, or REM (the font size of the root element). If you assign a font size to an element, the font size of that element is relative to the nearest “font sized” ancestor element
Font style
Values: ITALic, oblique, normal. Background-position: initial; background-repeat: initial; background-repeat: initial; }
The size of the font
Possible values: 100, 200… 900, or lighter, Normal, Bold, and Bolder. Example: a {font-weight:bold; }
Font changes
Value: small-caps, normal. Example: blockquote {font-variant:small-caps; }. This value causes all lowercase letters to become uppercase letters.
Shorthand font properties
Rule 1: You must declare font size and font family values. Rule 2: All values must be declared in the following order.
- Font-weight, font-style and font-variant are not in particular order;
- Font size;
- And finally, font-family.
Font: bold italic small-caps.9em Helvetica, Arial, sans-serif; }
The sample
The text
Text attributes
Text-indent
Value: length value (positive or negative). Example: p {text-indent:3em; }.
Letter-spacing (character spacing)
Value: Any length value (positive or negative). Example: p {letter-spacing:.2em; }.
Word-spacing (word spacing)
Value: Any length value (positive or negative). Example: p {word-spacing:.2em; }.
Text-decoration
Values: underline, overline, line-through, blink, none. Example:. Retailprice {text-decoration:line-through; }.
Text-align
Values: left, right, center, justify. Example: p {text-align:right; }.
(line height)
Value: Any numeric value (without specifying a unit). Example: p {line-height:1.5; }
Text-transform
Values: None, uppercase, lowercase, capitalize Example: p {text-transform:capitalize; }.
Vertical-align
Value: any length and sub, super, top, middle, bottom, etc. Example: span {vertical-align:60%; }.
The sample
If my blog is helpful to you, if you like my blog content, please “like” “comment” “favorites” one key three even oh! I heard that the people who like 👉 👈 will not be too bad, every day will be full of vitality oh hey hey!! ❤️ ❤️ ❤️ Everyone’s support is my motivation to keep going. Don’t forget to follow 👉 👈 after you like me!
Personal wechat: iotzzh Public account: front-end wechat personal website: www.iotzzh.com