一、常用的文字样式
常用的文字样式有字体（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>
原文：https://www.cnblogs.com/zgzeng/p/11946363.html