CSS学习笔记(一)-2.字体

一、字体

1.1字体的书法样式：font-family

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 17:49:26
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 17:52:06
 7  * @Description: 
 8  * @FilePath: \CSS2\05-CSS字体样式.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>05-CSS字体样式</title>
18     <style>
19         * {
20             font-family: 'Microsoft YaHei', Arial, "微软雅黑"
21         }
22     </style>
23 </head>
24 
25 <body>
26     <p>学习css</p>
27 </body>
28 
29 </html>
View Code

说明：

1.程序可展示字体列表以逗号分隔。

2.当字体名称有多个英文单词时，需要使用双引号或则单引号引用。

3.不要使用生僻字体。

 

1.2字体的大小：font-size

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 17:49:26
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 17:59:38
 7  * @Description: 
 8  * @FilePath: \CSS2\05-CSS字体样式.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>05-CSS字体样式</title>
18     <style>
19         * {
20             font-size: 30px;
21         }
22     </style>
23 </head>
24 
25 <body>
26     <p>学习css</p>
27 </body>
28 
29 </html>
View Code

 

1.3字体粗细：font-weight

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 17:49:26
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 18:10:47
 7  * @Description: 
 8  * @FilePath: \CSS2\05-CSS字体样式.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>05-CSS字体粗细</title>
18     <style>
19         .one {
20             font-weight: 100;
21         }
22         
23         .two {
24             font-weight: 200;
25         }
26         
27         .three {
28             font-weight: 300;
29         }
30         
31         .four {
32             font-weight: 400;
33         }
34         
35         .five {
36             font-weight: 500;
37         }
38         
39         .six {
40             font-weight: 600;
41         }
42         
43         .seven {
44             font-weight: 700;
45         }
46         
47         .eight {
48             font-weight: 800;
49         }
50         
51         .nine {
52             font-weight: 900;
53         }
54         
55         .bold1 {
56             font-weight: bold;
57         }
58         
59         .bold2 {
60             font-weight: bolder;
61         }
62         
63         .lighter1 {
64             font-weight: lighter;
65         }
66         
67         .normal1 {
68             font-weight: normal;
69         }
70     </style>
71 </head>
72 
73 <body>
74     <p class='one'>学习css</p>
75     <p class='two'>学习css</p>
76     <p class='three'>学习css</p>
77     <p class='four'>学习css</p>
78     <p class='five'>学习css</p>
79     <p class='six'>学习css</p>
80     <p class='seven'>学习css</p>
81     <p class='eight'>学习css</p>
82     <p class='nine'>学习css</p>
83     <p>--------------------------------------</p>
84     <p class='bold1'>学习css</p>
85     <p class='bold2'>学习css</p>
86     <p class='lighter1'>学习css</p>
87     <p class='normal1'>学习css</p>
88 
89 </body>
90 
91 </html>
View Code

1.4字体是否斜体：font-style:normal/italic

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 17:49:26
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 18:12:55
 7  * @Description: 
 8  * @FilePath: \CSS2\05-CSS字体样式.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>05-CSS字体粗细</title>
18     <style>
19         .s1 {
20             font-style: italic;
21         }
22     </style>
23 </head>
24 
25 <body>
26     <p class='s1'>学习css</p>
27 
28 
29 </body>
30 
31 </html>
View Code

 1.5 字体的复合写法，节约代码

 

 

/* font: font-style font-weight font-size/line-height font-family */
注意：
1.这个格式的顺序不能改变
 
 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 17:49:26
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 19:12:17
 7  * @Description: 
 8  * @FilePath: \CSS2\05-CSS字体样式.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>05-CSS字体粗细</title>
18     <style>
19         /* font: font-style font-weight font-size/line-height font-family */
20         
21         .s1 {
22             font: italic 400 25px/40px "Microsoft YaHei"
23         }
24     </style>
25 </head>
26 
27 <body>
28     <p class='s1'>学习css</p>
29 </body>
30 
31 </html>
View Code

 2.部分属性可以不写，但是font-size font-family必须写

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 17:49:26
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 19:15:17
 7  * @Description: 
 8  * @FilePath: \CSS2\05-CSS字体样式.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>05-CSS字体粗细</title>
18     <style>
19         /* font: font-style font-weight font-size/line-height font-family */
20         
21         .s1 {
22             font: 25px "Microsoft YaHei"
23         }
24     </style>
25 </head>
26 
27 <body>
28     <p class='s1'>学习css</p>
29 </body>
30 
31 </html>
View Code

 

 

posted @ 2021-07-09 18:14  kaer_invoker  阅读(28)  评论(0)  编辑  收藏  举报