一、常用的文字样式
常用的文字样式有字体(font-family),字体大小(font-size),字体样式(font-style),字体的粗细(font-weight),字体大小写(font-variant),通常我们直接用复合样式。
二、常用文字样式实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字样式</title> <style> /* 1 font-family:字体,默认微软雅黑,可以同时设置多个字体,只有前面的字体没有,就用后面设置的字体*/ /* 2 font-size:字体大小(单位:px,rem, %, em) px:谷歌浏览器默认字体大小为16px,最小识别为12px; rem:相对于html根标签的n倍,如谷歌浏览器的默认字体的大小为16px,那么font-size用rem为单位,那么设定字体的大小为16*n em:父级字体大小*n,假如<div>hello<span>world</span>!</div>,假如div的大小已经设定,那么span可以通过em单位,来设定和父级标签成倍数的大小 % : 同em一样,为父级字体大小*n% */ /*3. font-weight:字体粗细,normal(默认粗细),light(变细), bold(加粗),bolder(更加粗)*/ /*给值:100-900的整百数*/ /*400为normal,700为bold*/ /*4.font-style:字体样式,也就是是否为斜体(italic)还有一个斜体(oblique),正常(normal)*/ /*5.color:字体颜色*/ /*颜色设置方法:color:颜色单词,color:#16进制;rgb*/ rgba透明度,取值范围为0到1,0为完全透明,1为完全不透明 div{ font-family:华文中宋,华文彩云,华文楷体; font-size:100px; font-weight:400; font-style:italic; color:deepskyblue; } .span1{ font-family:黑体;; font-size:2em; font-weight:500; font-style:normal; color:rgba(199, 31, 133, 0.5); } p{ font-family: adobe ; font-size:50px; font-weight:400; font-style:oblique; } .span2{ font-family: AIGDT; font-size:50%; font-weight:500; font-style:normal; } </style> </head> <body> <div>将军 <span class="span1">百战</span> 穿金甲,不破楼兰终不还</div> <p>关关 <span class="span2">雎鸠</span> ,在河之洲</p> </body> </html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字样式</title> <style>/* 1 font-family:字体,默认微软雅黑,可以同时设置多个字体,只有前面的字体没有,就用后面设置的字体*/ /* 2 font-size:字体大小(单位:px,rem, %, em) px:谷歌浏览器默认字体大小为16px,最小识别为12px; rem:相对于html根标签的n倍,如谷歌浏览器的默认字体的大小为16px,那么font-size用rem为单位,那么设定字体的大小为16*n em:父级字体大小*n,假如<div>hello<span>world</span>!</div>,假如div的大小已经设定,那么span可以通过em单位,来设定和父级标签成倍数的大小 % : 同em一样,为父级字体大小*n% */ /*3. font-weight:字体粗细,normal(默认粗细),light(变细), bold(加粗),bolder(更加粗)*/ /*给值:100-900的整百数*/ /*400为normal,700为bold*/ /*4.font-style:字体样式,也就是是否为斜体(italic)还有一个斜体(oblique),正常(normal)*/ /*5.color:字体颜色*/ /*颜色设置方法:color:颜色单词,color:#16进制;rgb*/rgba透明度,取值范围为0到1,0为完全透明,1为完全不透明div{ font-family:华文中宋,华文彩云,华文楷体;font-size:100px;font-weight:400;font-style:italic;color:deepskyblue;} .span1{ font-family:黑体;;font-size:2em;font-weight:500;font-style:normal;color:rgba(199, 31, 133, 0.5);} p{ font-family: adobe ;font-size:50px;font-weight:400;font-style:oblique;} .span2{ font-family: AIGDT;font-size:50%;font-weight:500;font-style:normal;} </style></head><body> <div>将军 <span class="span1">百战</span> 穿金甲,不破楼兰终不还</div> <p>关关 <span class="span2">雎鸠</span> ,在河之洲</p></body></html>