CSS学习笔记(一)-2.字体
一、字体
1.1字体的书法样式:font-family
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
说明:
1.程序可展示字体列表以逗号分隔。
2.当字体名称有多个英文单词时,需要使用双引号或则单引号引用。
3.不要使用生僻字体。
1.2字体的大小:font-size
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
1.3字体粗细:font-weight
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
1.4字体是否斜体:font-style:normal/italic
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
1.5 字体的复合写法,节约代码
/* font: font-style font-weight font-size/line-height font-family */
注意:
1.这个格式的顺序不能改变
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
2.部分属性可以不写,但是font-size font-family必须写
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14991936.html