CSS中字体样式属性
属性值 |
说明 |
| font-family | 字体类型 |
font-size |
字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体斜体 |
| color | 颜色 |
一：font-family 字体类型
可以指定多种字体，多个字体按优先顺序排列，以逗号隔开，逗号一定是在英文状态下的。
font-family: arial,"times new roman" , "宋体" , "微软雅黑"; /*设置多个不同的字体目的是浏览器的支持的字体可能不同，但是如果设置的字体浏览器都不支持， 那么浏览器就默认为宋体 语法：font—family：字体一,字体二,字体三; 中文中常用的字体：宋体、微软雅黑、仿宋 英文中常用的字体：arial、times new roman*/
二：font-size 字体大小
font-size:25px; /*字体大小 语法：font-size:关键字或像素值; 关键字：xx-small:最小 x-small：较小 small：小 medium：默认值，正常 large：大 x-large：较大 xx-large:最大 */
三：font-wehght 字体粗细
font-weight: 700; /*字体粗细 语法：font-weight:粗细值; 取值：关键字/100~900之间的数值。 关键字：normal 默认值 正常 100 lighter：较细 bold 较粗 700 bolder 很粗 一般用到normal 和 bold */
四：font-style 字体斜体
font-style: inherit;//继承 /* 斜体 字体倾斜效果 语法：font-style:取值; 取值：normal：默认值，正常 italic：斜体 oblique：将字体倾斜 */
五：color 字体颜色
color: magenta; /*字体颜色 语法：color：颜色值; 取值：可以是关键字或者是16进制的RGB值， 关键字：就是颜色对应的英文单词， RBG：#03FCA1 */
实验一下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .fontStyle{ font-family: arial,"times new roman" , "宋体" , "微软雅黑"; /* 设置多个不同的字体目的是浏览器的支持的字体可能不同，但是如果设置的字体浏览器都不支持， 那么浏览器就默认为宋体 语法：font—family：字体一,字体二,字体三; 中文中常用的字体：宋体、微软雅黑、仿宋 英文中常用的字体：arial、times new roman */ font-size:25px; /*字体大小 语法：font-size:关键字或像素值; 关键字：xx-small:最小 x-small：较小 small：小 medium：默认值，正常 large：大 x-large：较大 xx-large:最大 */ color: magenta; /*字体颜色 语法：color：颜色值; 取值：可以是关键字或者是16进制的RGB值， 关键字：就是颜色对应的英文单词， RBG：#03FCA1 */ font-weight: 700; /*字体粗细 语法：font-weight:粗细值; 取值：关键字/100~900之间的数值。 关键字：normal 默认值 正常 100 lighter：较细 bold 较粗 700 bolder 很粗 一般用到normal 和 bold */ font-style: inherit;//继承 /* 斜体 字体倾斜效果 语法：font-style:取值; 取值：normal：默认值，正常 italic：斜体 oblique：将字体倾斜 */ } </style> </head> <body> <span class="fontStyle"> 字体大小 </span><br/> <span class="fontStyle"> 字体大小 </span> </body> </html>
运行：
