font
今天上午温习了编译原理还有概率论就到中午了，吃完饭持续学习CSS，看看几天能够学完根底。加油
| 属性 | 阐明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体格调 |
| color | 字体色彩 |
1、font-family
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS font Style</title> <style type="text/css"> #f1{font-family: Arial, Helvetica, sans-serif;} #f2{font-family: "Times New Roman";} #f3{font-family: "微软雅黑";} </style> </head> <body> <div id="f1">font 1</div> <div id="f2">font 2</div> <div id="f3">font 3</div> </body></html>显示成果：
阐明：
这一行#f1{font-family: Arial, Helvetica, sans-serif;}代码示意f1局部优先应用Arial字体，如果电脑中没有装置该字体，则应用前面的，以此类推，如果都没有装置的话，默认显示宋体。
2、font-size
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS font Style</title> <style type="text/css"> #f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;} #f2{font-family: "Times New Roman"; font-size:xx-small;} #f3{font-family: "微软雅黑";font-size: 80%;} #f4{font-family: "楷体";font-size: 32px;} </style> </head> <body> <div id="f1">字体font 1</div> <div id="f2">字体font 2</div> <div id="f3">字体font 3</div> <div id="f4">字体font 4</div> </body></html>显示成果：
px是pixel（像素），默认大小是16px，
em = 心愿失去的像素大小 / 父元素字体像素大小（这里就相当于16*3px=48px）
%是绝对于原来字体大小的百分比
3、font-weight
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS font Style</title> <style type="text/css"> #f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;font-weight:700;} #f2{font-family: "Times New Roman"; font-size:xx-small;font-weight: bold;} #f3{font-family: "微软雅黑";font-size: 100%;font-weight: 900;} #f4{font-family: "楷体";font-size: 32px; font-weight: 500;} /* h1{font-size: 250%;} */ </style> </head> <body> <h1>最大的题目</h1> <div id="f1">字体font 1</div> <div id="f2">字体font 2</div> <div id="f3">字体font 3</div> <div id="f4">字体font 4</div> </body></html>显示成果：
个别咱们应用bold就够了。
4、font-style
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS font Style</title> <style type="text/css"> #f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;font-weight:700;} #f2{font-family: "Times New Roman"; font-size:xx-small;font-weight: bold;} #f3{font-family: "微软雅黑";font-size: 32px;font-weight: 900;font-style: oblique;} #f4{font-family: "楷体";font-size: 32px; font-weight: 500;font-style: italic;} /* h1{font-size: 250%;} */ </style> </head> <body> <h1>最大的题目</h1> <div id="f1">字体font 1</div> <div id="f2">字体font 2</div> <div id="f3">字体font 3</div> <div id="f4">字体font 4</div> </body></html>显示成果：
设置斜体是italic，然而有些字体没有这个属性，这个时候就要用oblique来实现斜体。
5、color
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS font Style</title> <style type="text/css"> #f1{color: pink;} #f2{color:blueviolet} #f3{color: #03FCA1;} </style> </head> <body> <h1>最大的题目</h1> <div id="f1">字体font 1</div> <div id="f2">字体font 2</div> <div id="f3">字体font 3</div> <div id="f4">字体font 4</div> </body></html>显示成果：
阐明：
这个#03FCA1是16进制RGB的办法，能够让色彩变动更加粗疏，其中#000000是彩色，#FFFFFF是红色。