1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6. </head>
    7. <body>
    8.     <!--当没有设置字号时，浏览器默认字号大小为16px-->
    9.     <div style="font-size: 14px;">桃花源记</div>
    10.     <div style="font-size: 1em;">桃花源记</div>
    11.     <div style="font-size: 1.5rem;">桃花源记</div>
    12.     <div style="font-size: 200%;">桃花源记</div>
    13. </body>
    14. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6. </head>
    7. <body>
    8.     <!--当没有设置字体时，浏览器默认字体为微软雅黑，
    9.       可以设置多个字体，当字体没有生效时，会寻找下一个-->
    10.     <div style="font-family: '华文行楷';">桃花源记</div>
    11.     <div style="font-family: '华文行楷','新宋体';">桃花源记</div>
    12. </body>
    13. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6. </head>
    7. <body>
    8.     <!--颜色的表示方法为：颜色名(英文)  16进制颜色值  RGB颜色值  RGBA颜色值-->
    9.     <div style="color: skyblue">桃花源记</div>
    10. </body>
    11. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6. </head>
    7. <body>
    8.     <!--字体粗细的描述方法有：数值(100-900)  bold(700)  bolder   lighter     normal(400,默认)-->
    9.     <div style="font-weight: 600">桃花源记</div>
    10. </body>
    11. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6. </head>
    7. <body>
    8.     <!--
    9.     文字倾斜
    10.        italic   斜体
    11.        oblique  偏倾斜(幅度比italic小)
    12.        normal   正常显示字体，用作字体重置
    13.     -->
    14.     <div style="font-style: normal">桃花源记</div>
    15. </body>
    16. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         body{
    8.             /*通过继承重置*/
    9.             font-size: 16px;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.     <div style="font-style: normal">桃花源记</div>
    15. </body>
    16. </html>