1. Font color color
2. Font size fofnt-size
concerned department em rem
1em is equal to 1 font-size (font-size of the current element)
1rem is equal to the font-size of 1 root element (suitable for English layout). The
advantage is that it can be changed according to the font size
3. Row heightline-height
- You need to create a text box for text in a web page, and the line height is the height of the text box.
- Use line-height to set the line height, the text is centered in the line height by default.
- Line height can specify a pixel value or an integer. If you specify a number, the line height is a multiple of the font, and the background color of the elements in the line is 1.33 times the line height.
- Line spacing can be set by line height: line spacing = line height-font size.
- The text is vertically centered in the line, and the line height can be set to be the same as the height of the parent element (one line of text, lower overall).
4. Font family:
font-family
Use font-family to set font family, commonly used:
serif (serif font, with tick)
sans-serif (sans-serif font)
uses multiple fonts separated by ",", some fonts need to be quoted if they have spaces. Similar to "Gill Sans"
font-face
Through font-face, users can use the font of the server.
Pay attention to copyright issues. Font font-weight weight font-stylefont style, italics... font-variant font distortion
5.font shorthand
All font-related style
selectors can be set at the same time through font
(font: font-style font-weight font-size/line-height font-family;)
The font-size and font-family must have attributes, otherwise the font attribute will not work. It must be written in the above format and the order cannot be changed. The attributes are separated by spaces.
Learning the front-end from entry to soil, I am still on the road, every time you browse and other tiny operations, it is the greatest encouragement to my learning path, let's work hard together!
If you have any questions, please leave a message.