注意：如果字体是由多个单词构成的，那么必须加上引号
参考：菜鸟教程 @font-face
<style> @font-face { /* 自定义字体的名次 */ font-family: 'pengsir'; /* 定义多个字体 当第一个字体不存在或不能识别时，使用第二个字体*/ src: url('font/font.TTF'), url('font/freescpt.TTF'); } span{ font-family: pengsir; } </style> <body> <span>测试文本abc</span> </body>效果：
字重指字的粗细定义。取值范围 normal | bold | bolder | lighter | 100 ~900。
400对应 normal,700对应 bold ，一般情况下使用 bold 或 normal 较多。
效果：
这里是1.5倍行高，em可以根据字的大小来自动调整行高，所以行高一般设置为 em
<style> p{ line-height: 1.5em; } </style> <body> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo quis autem, perferendis fugiat vitae asperiores. </p> </body>italic 和 oblique 都是倾斜
<style> body>em{ font-style: normal; } p:nth-of-type(1){ line-height: 1.5em; font-style: italic; } p:nth-of-type(2){ line-height: 1.5em; font-style:oblique; } </style> <body> <em>这是默认倾斜的字体</em> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo quis autem, perferendis fugiat vitae asperiores. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo quis autem, perferendis fugiat vitae asperiores. </p> </body>效果：
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
效果：
不会读？已经帮你填好了：百度翻译
属性定义及使用说明 text-decoration 属性是以下三种属性的简写：
text-decoration-linetext-decoration-colortext-decoration-style <style> h3:nth-of-type(1){ /*下划线*/ text-decoration: underline; } h3:nth-of-type(2){ /*上划线*/ text-decoration:overline; } h3:nth-of-type(3){ /*删除线*/ text-decoration:line-through; } /* 组合方式 */ h1 { text-decoration: underline overline line-through dotted red; } h2 { text-decoration: underline overline wavy blue; } </style> <body> <h1>测试文本</h1> <h2>测试文本</h2> <h3>测试文本</h3> <h3>测试文本</h3> <h3>测试文本</h3> </body>效果：
text-shadow: h-shadow v-shadow blur color;
注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
<style> h3{ text-shadow:rgba(255, 222, 12, .4) 5px 5px 1px, rgba(0, 0, 255, 0.8) -5px -5px 1px; } </style> <body> <article> <h3>测试文本</h3> </article> </body>效果：
使用 white-space 控制文本空白显示。
选项说明pre保留文本中的所有空白，类似使用 pre 标签nowrap禁止文本换行pre-wrap保留空白，保留换行符pre-line空白合并，保留换行符 <style> h3:nth-of-type(1) { white-space: pre; } h3:nth-of-type(2) { white-space: pre-line; } h3:nth-of-type(3) { white-space:pre-wrap; } </style> <body> <article> <h3>测试 文本 </h3> <h3>测试 文本 </h3> <h3>测试 文本 </h3> <pre>测试 文本 </pre> </article> </body>效果;
overflow属性指定如果内容溢出一个元素的框，会发生什么。
值描述visible默认值。内容不会被修剪，会呈现在元素框之外。(会出现浏览器的横向或者纵向滚动条)hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。text-overflow text-overflow属性指定当文本溢出包含它的元素，应该发生什么。
值描述clip修剪文本。ellipsis显示省略符号来代表被修剪的文本。string使用给定的字符串来代表被修剪的文本。 <style> div:nth-of-type(1){ width: 20vw; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } </style> <body> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, cum placeat veniam consequatur eaque inventore nostrum ex, delectus omnis quibusdam illo voluptas quas sed explicabo nisi magni unde? Ullam.</div> </body>效果：
text-indent:2em文本缩进2个字符
text-align:center 文本水平居中
参考：CSS vertical-align 属性 vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。 在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
实例：
<style> article h3{ font-size: 30px; text-indent: 2em; } div img{ vertical-align: middle; } article div div{ display: inline-block; vertical-align: bottom; } </style> <body> <article> <h3> 这是一段测试文本。这是一段测试文本,这是一段测试文本。 </h3> <div> <img src="https://picsum.photos/200/200" alt=""> <div>测试文本</div> Laboris dolore cillum exercitation duis aliqua culpa commodo amet eiusmod ullamco sint. </div> </article> </body>文中用到了 https://picsum.photos 这个网址，他可以随机返回一张图片。有兴趣可以百度看看。 效果：
字符间距 letter-spacing
单词间距 word-spacing
长单词换行 word-wrap:break-word
<style> p:nth-of-type(1){ letter-spacing: 15px; } p:nth-of-type(2){ word-spacing: 20px; } p:nth-of-type(3){ border: 1px solid black; width: 200px; } p:nth-of-type(4){ border: 1px solid black; width: 200px; /* 规定长单词换行 */ word-wrap: break-word; } </style> <body> <p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p> <p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p> <p>Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit duis ea nisi velit.</p> <!-- 长单词换行 --> <p>Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit duis ea nisi velit.</p> </body>效果：
参考：writing-mode 属性
writing-mode:horizontal-tb 默认值，从上到下 默认值就不演示了，都一样的
writing-mode: vertical-lr 垂直方向 从左到右 writing-mode: vertical-rl 垂直方向 从右到左
