font详细用法
一、font-family 字体样式二、font-size 字体大小三、font-weight 字体粗细四、font-style 字体类型（规定是否倾斜）五、line-height 行高（设置行与行之间的距离）六、font-variant 规定小型大写字母的字体七、text-transform 文本的大小写八、text-align 文本水平对齐方式九、text-indent 首行缩进 （em）十、text-decoration 文本修饰（横线）十一、letter-spacing字（单词）间距与word-spacing 词（单词）间距十二、white-space 换行方式与word-break: break-all; 强制换行十三、 text-overflow 定义文本溢出时处理方式十四、white-space 换行方式与word-break: break-all; 强制换行一、font-family 字体样式
字体的分类：
serif(衬线)sans-serif(无衬线)monospace(等宽)fantasy(梦幻)cuisive(草体)
详情链接
使用方法：
<body><div id="wrap"><!-- 除了宋体以外，我们还可以通过 font-family来设置其他字体，比如微软雅黑、黑体等等--><p class="paragrahp" style="font-family:'Microsoft yahei','宋体'；">此处使用宋体书写文字大小</p></div></body>
二、font-size 字体大小
单位：px |%|em|rem
注意：
% -相对于父容器中字体%调整1em -等于父级的字体尺寸— 相对于父级字体大小而言rem -相对于html（根标签）的字体大小，根节点的默认大小是16px
使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体大小</title><style type="text/css">html {font-size: 100px;}#wrap {font-size: 20px;}.paragrahp1 {/* 相对于父容器中字体%调整，此处是 id为wrap的div容器 */font-size: 30px;}.paragrahp2 {font-size: 10%;}.paragrahp3 {/* 相对于父级字体大小而言,此处是 id为wrap的div容器 */font-size: 2em;}.paragrahp4 {/* 相对于根节点(html)字体大小，默认是16px */font-size: 1rem;}</style></head><body><div id="wrap"><p class="paragrahp1">aaaa</p><p class="paragrahp2">bbbb</p><p class="paragrahp3">cccc</p><p class="paragrahp4">dddd</p></div></body></html>
补充：不同浏览器的默认字体大小不一样，Chrome、Safar默认限制大小为12px,当字体小于12px的时候，浏览器会默认设置为12px。
上述代码用谷歌浏览器实验如下：
解决方法：
可以通过改变浏览器默认最小字体大小，以此达到目的。但是治标不治本，不可能要求用户去设置最小字体大小，而且设置最小字体大小也是有限制的。用css的缩小来写，就可以达到我们想要的效果
.paragrahp1 {/*在这里，字体大小并没有缩小，缩小的是这段文字的容器*/font-size: 12px;transform: scale(0.1);transform-origin: left;}
三、font-weight 字体粗细
normal 正常bold 加粗lighter变细数字法（100,200,300,400,500,600,700,800,900）定义由粗到细的字符。关键字“normal”相当于“400”，“bold”相当于“700”。除了“normal”和“bold”以外的其他关键字常常会令浏览器产生误解，无法直接和数值相匹配，此时字体的粗细程度通常取决于字体本身的设置。使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体粗细</title><style type="text/css">#wrap {font-size: 20px;}.paragrahp1 {font-weight: normal;}.paragrahp2 {font-weight: bold;}.paragrahp3 {font-weight: lighter;}.paragrahp4 {font-weight: 600;}</style></head><body><div id="wrap"><p class="paragrahp1">正常</p><p class="paragrahp2">加粗</p><p class="paragrahp3">变细</p><p class="paragrahp4">关键字</p></div></body></html>
四、font-style 字体类型（规定是否倾斜）
normal 文字正常italic 文字斜体oblique 文字倾斜使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体倾斜</title><style type="text/css">#wrap {font-size: 20px;}.paragrahp1 {font-style: normal;}.paragrahp2 {font-style: italic;}.paragrahp3 {font-style: oblique;}</style></head><body><div id="wrap"><p class="paragrahp1">文字正常</p><p class="paragrahp2">文字斜体</p><p class="paragrahp3">文字倾斜</p></div></body></html>
五、line-height 行高（设置行与行之间的距离）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体行高</title><style type="text/css">#wrap {font-size: 20px;line-height: 30px;}</style></head><body><div id="wrap"><p class="paragrahp">abcd123</p><p class="paragrahp">abcd123</p></div></body></html>
六、font-variant 规定小型大写字母的字体
normal 一个标准的字体small-caps 小型大写字母的字体inherit 规定应该从父元素继承 font-variant 属性的值注意：使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小型字母大写</title><style type="text/css">#wrap {font-variant: small-caps;}</style></head><body><div id="wrap"><p class="paragrahp">abcd123THZE</p></div></body></html>
七、text-transform 文本的大小写
uppercase 字母大写lowercase 小写字母capitalize 单词首字母大写使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本的大小写</title><style type="text/css">#wrap {font-size: 20px;line-height: 20px;}.paragrahp1 {text-transform: uppercase;}.paragrahp2 {text-transform: lowercase;}.paragrahp3 {text-transform: capitalize;}</style></head><body><div id="wrap"><p class="paragrahp1">字母大写：I am student</p><p class="paragrahp2">字母小写：I am student</p><p class="paragrahp3">首字母大写：I am student</p></div></body></html>
八、text-align 文本水平对齐方式
left 把文本排列到左边center 居中对齐right 把文本排列到右边justify 实现两端对齐文本效果使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对齐方式</title><style type="text/css">#wrap {font-size: 20px;line-height: 20px;}.paragrahp1 {width: 200px;text-align: left;margin: 10px;float: left;}.paragrahp2 {width: 200px;text-align: center;margin: 10px;float: left;}.paragrahp3 {width: 200px;text-align: right;margin: 10px;float: left;}.paragrahp4 {width: 200px;text-align: justify;margin: 10px;float: left;}</style></head><body><div id="wrap"><p class="paragrahp1">左对齐：font：字体。在微机系统里通常用“fonts”文件夹存放已安装的字体，自己安装字体时，也需要装入“fonts”文件夹中。</p><p class="paragrahp2">居中对齐：font：字体。在微机系统里通常用“fonts”文件夹存放已安装的字体，自己安装字体时，也需要装入“fonts”文件夹中。</p><p class="paragrahp3">右对齐：font：字体。在微机系统里通常用“fonts”文件夹存放已安装的字体，自己安装字体时，也需要装入“fonts”文件夹中。</p><p class="paragrahp3">两端对齐：font：字体。在微机系统里通常用“fonts”文件夹存放已安装的字体，自己安装字体时，也需要装入“fonts”文件夹中。</p></div></body></html>
九、text-indent 首行缩进 （em）
使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首行缩进</title><style type="text/css">#wrap {font-size: 20px;text-indent: 2em;width: 300px;text-align: justify;}</style></head><body><div id="wrap"><p class="paragrahp1">在微机系统里通常用“fonts”文件夹存放已安装的字体，自己安装字体时，也需要装入“fonts”文件夹中。</p></div></body></html>
十、text-decoration 文本修饰（横线）
underline 下划线line-through 中划线overline 上划线使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> 文本修饰</title><style type="text/css">#wrap {font-size: 20px;}.paragrahp1 {text-decoration: underline;}.paragrahp2 {text-decoration: line-through;}.paragrahp3 {text-decoration: overline;}</style></head><body><div id="wrap"><p class="paragrahp1">下划线</p><p class="paragrahp2">中划线</p><p class="paragrahp3">上划线</p></div></body></html>
十一、letter-spacing字（单词）间距与word-spacing 词（单词）间距
使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>间距</title><style type="text/css">#wrap {font-size: 20px;}.paragrahp1 {letter-spacing: 20px;}.paragrahp2 {word-spacing: 20px;}</style></head><body><div id="wrap"><p class="paragrahp1">字间距：I am student</p><p class="paragrahp2">词间距：I am student</p></div></body></html>
十二、white-space 换行方式与word-break: break-all; 强制换行
normal 默认。空白会被浏览器忽略pre 空白会被浏览器保留。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行pre-line 合并空白符序列，但是保留换行符inherit 规定应该从父元素继承 white-space 属性的值
word-break: break-all; 强制到达边框换行
使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首行缩进</title><style type="text/css">#wrap {font-size: 20px;width: 100px;}.paragrahp1 {border: 5px solid red;margin: 10px;width: 100px;white-space: normal;}.paragrahp2 {border: 5px solid red;margin: 10px;width: 100px;white-space: nowrap;}.paragrahp3 {border: 5px solid red;margin: 10px;width: 100px;word-break: break-all;}</style></head><body><div id="wrap"><div class="paragrahp1">AAAAAAAAAAAAAAAAAAAAAAAA</div><div class="paragrahp2">BBBBBBBBBBBB</br>BBBBBBBBBBBB</div><div class="paragrahp3">CCCCCCCCCCCCCCCCCCCCCCCC</div></div></body></html>
十三、 text-overflow 定义文本溢出时处理方式
text-overflow：ellipsis 被修剪的文本用略符号来代表(…)。
使用方法：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首行缩进</title><style type="text/css">#wrap1 {font-size: 20px;width: 100px;}.paragrahp1 {border: 5px solid red;margin: 10px;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}#wrap2 {border: 5px solid red;margin: 10px;font-size: 20px;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;/* 数字代表几行 */-webkit-line-clamp: 2;}</style></head><body><div id="wrap1"><p class="paragrahp1">AAAAAAAAAAAAAAAAAAAAAAAA</p></div><div id="wrap2"><p class="paragrah2">BBBBBBBBBBBBBBBBBBBBBBBBB</p><p class="paragrah3">CCCCCCCCCCCCCCCCCCCCCCCCC</p><p class="paragrah4">DDDDDDDDDDDDDDDDDDDDDDDDD</p></div></body></html>
十四、white-space 换行方式与word-break: break-all; 强制换行
空格符< 小于符号 <> 大于符号 >© 版权 ©® 注册商标 ®font用法分析讲解：样式 大小（解决浏览器默认字体大小问题） 粗细 类型 行高 小型大写 文本的大小写 对齐方式 首行缩进 文本修饰横线 间距 换行方式与强制换行 文本溢出（...） 字符实体
