Defining the various attributes of the font can make the page layout look better.
The font style includes the basic effects of font type, size, color, and also includes some special styles, such as font weight, underline, italics, uppercase and lowercase styles, etc.
One, define the font type
The font-family property is used to set the font. The fonts commonly used in web pages include Song Ti, Microsoft Yahei, HeiTi, etc.
grammar:
1.font-family``:name;
name: indicates the font name. Multiple fonts can be used, separated by commas, which means that if the browser does not support the first font, it will try the next one until a suitable font is found.
** Common skills: **
1. 14px+ is commonly used in web pages.
2. Try to use an even number font size. Older browsers such as ie6 will have bugs when supporting odd numbers.
3. The various fonts must be separated by commas in English.
4. Chinese fonts need to be quoted in English, and English fonts generally do not need to be quoted. When you need to set the English font, the English font name must be before the Chinese font name.
5. If the font name contains symbols such as spaces, #, $, etc., the font must be enclosed in single or double quotes in English, for example font-family: "Times New Roman";.
6. Try to use the system default font to ensure that it can be displayed correctly in any user's browser.
font: Comprehensively set the font style (emphasis)
font is a conforming attribute, which can set multiple font attributes.
grammar:
font``: font-style | font-variant | font-weight | font-size/line-height | font-family
- When using the font attribute, you must write in the order in the above grammatical format. The order cannot be changed. Each attribute is separated by a space.
- Note : The attributes that do not need to be set can be omitted (take the default value), but the font-size and font-family attributes must be retained, otherwise the font attribute will not work.
Extension: Unicode font
Set the font name in CSS and write Chinese directly. However, when the file encoding (GB2312, UTF-8, etc.) does not match, a garbled error will occur. The xp system does not support Chinese like Microsoft Yahei.
Option 1: English can be used instead. For example, font-family: "Microsoft Yahei".
Solution 2: Use Unicode encoding directly to write font names in CSS to avoid these errors. Using Unicode to write Chinese font names, the browser can parse it correctly.
font-family: "\5FAE\8F6F\96C5\9ED1" means to set the font to "Microsoft Yahei".
Commonly used Unicode font encoding
| Font name | English name | Unicode encoding |
|---|---|---|
| Song Ti | SimSun | \5B8B\4F53 |
| New Song | NSimSun | \65B0\5B8B\4F53 |
| Black body | SimHei | \9ED1\4F53 |
| Microsoft Yahei | Microsoft YaHei | \ 5FAE \ 8F6F \ 96C5 \ 9ED1 |
| Italics_GB2312 | KaiTi_GB2312 | \ 6977 \ 4F53_GB2312 |
| Official script | LiSu | \96B6\4E66 |
| Kindergarten | YouYuan | \ 5E7C \ 5706 |
| Chinese fine black | STXihei | \ 534E \ 6587 \ 7EC6 \ 9ED1 |
| Detailed body | MingLiU | \ 7EC6 \ 660E \ 4F53 |
| New details | PMingLiU | \65B0\7EC6\660E\4F53 |
Two, define the font size
The font-size property is used to define the font size.
grammar:
font-size``: 字号值;
The font unit can be an absolute unit , the defined font size is fixed, and the size display will not be affected by external factors. Such as: in (inch), cm (centimeter), mm (millimeter) and other units. ( Not commonly used )
Relative units can also be used . The defined size is not fixed and will change constantly according to the external environment. Commonly used are px (pixel), em and other units. ( Commonly used )
Three, define the font color
The color attribute defines the font color.
grammar:
color``:color值；
- The parameter color represents the color value;
Color translucent (CSS3): It can be in a translucent format.
grammar:
color``: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 ``0``~``1``之间 ``color``: rgba(``0``,``0``,``0``,``0.3``)
Extension: Color notation:
- Use predefined color values, such as red, green, blue, etc.;
- Hexadecimal, such as #FF0000, #FF6600, #29D794, etc. In actual work, hexadecimal is the most commonly used way to define colors;
- RGB code, such as red can be expressed as rgb(255,0,0) or rgb(100%,0%,0%). If the percentage color value of RGB code is used, the percentage sign cannot be omitted when the value is 0. Must be written as 0%.
CSS3 also supports 3 other color representations:
- RGBA: Alpha channel is added to the original RGB color, which can define the transparent color of the text. Such as: color:rgba(255,0,0.5); You can define translucent red;
- HSL: This color representation is a method of using hue (H), saturation (S) and brightness (L) to represent colors. Such as: color:hsl(0,100%,100%); means red;
- HSLA: Alpha channel is added to the original HSL color. Such as: color: hsla(0,100%,100%,.5); means translucent red.
Fourth, define the font thickness
The font-weight attribute defines the font weight.
grammar:
font-weight``: ``normal | ``bold | ``bolder | ``lighter | ``100 | ``200 | ``300 | ``400 | ``500 | ``600 | ``700 | ``800 | ``900
- normal represents the default value, that is, a normal font, which is equivalent to a value of 400;
- bold means bold, equivalent to 700;
- The thickness of the font is a way to quantify the thickness of the font. The larger the value, the thicker it is, and the smaller the value, the thinner it is.
- Generally speaking, I prefer to use numbers to indicate the thickness of the font, the value range (100~900)
Five, define the font style
The font-style attribute defines the font style.
grammar:
font-style``: ``normal | ``italic | ``oblique
- normal represents the default value, that is, the normal font;
- italic stands for italics, which is a simple font style, with some small changes to the structure of each letter to reflect the changing appearance
- oblique represents an oblique font, which is an oblique version of normal vertical text.
Tips : Normally, italic and oblique text look exactly the same in a web browser.
Six, define the underline
The text-decoration attribute defines the font underline effect.
grammar:
text-decoration``: ``none | ``underline | ``blink | ``overline | ``line-through
- normal represents the default value, that is, no decorative font;
- underline means underline effect;
- blink means blinking effect;
- overline means overline effect;
- line-through means through-line effect.
Seven, define font case
font-variant attribute to define the font size effect.
grammar:
font-variant``:``normal | ``small-caps
- normal represents the default value, that is, the normal font;
- small-caps means small capital letter fonts;
- This attribute only supports English
**Extension:**CSS also defines a text-transform property, which can also define the font case effect.
grammar:
text-transform``:``none | ``capitalize | ``uppercase | ``lowercase
- normal represents the default value, no conversion occurs;
- capitalize means to convert the first letter of each word to uppercase, and no other conversion occurs;
- upppercase means to convert all letters to uppercase;
- lowercase means to convert all letters to lowercase.
I am currently working in front-end development. If you want to learn front-end development technology now, and you encounter any questions about learning methods, learning routes, learning efficiency, etc. during the process of getting started learning front-end, you can apply to join my front-end Learning exchange skirt: 421374697. It gathers some beginners, changers, and beginners who are self-learning front-end. I also have some front-end interview questions compiled during the time I was doing front-end technology, front-end development source code tutorials, PDF document book tutorials, and you can find them if you need them. Skirt pig gets.