.Tang

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
html-字体

字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复习</title>
    <style>
        /*字体可以写多个，优先使用前面的字体，如果前面的字体在浏览器解析时不存在，使用后面一个*/
        .box {
            font-family: 华文彩云, 楷书;
        }
        .box1{
            font-size: 32px;
        }
        /*1em=父级字体大小，google浏览器为12-16px。2em=32px*/
        .box2{
            font-size: 2em;
        }
        /*相对于父级容器中box1的百分比调整*/
        .son1{
            font-size: 50%;
        }
    </style>
</head>
<body>
    <div class="box">大家好啊</div>
    <div class="box1">大家好啊
        <span class="son1">box1 son</span>
    </div>
    <div class="box2">大家好啊</div>
    <div class="box3">大家好啊</div>
</body>
</html>

-----

字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tittle</title>
    <style>
        /*正常 较细 较粗 更粗*/
        .box{
            font-weight: normal;
        }
        .box1{
            font-weight: lighter;
        }
        .box2{
            font-weight: bold;
        }
        .box3{
            font-weight: bolder;
        }
          /*- 给值*/
    /*- `100-900`只能给整百数，值越大字体越粗*/
    /*- `400`相当于正常的*/
    /*- `700`相当于`blod`*/
    </style>
</head>
<body>
    <div class="box">大家好啊</div>
    <div class="box1">大家好啊
        <span class="son1">box1 son</span>
    </div>
    <div class="box2">大家好啊</div>
    <div class="box3">大家好啊</div>
</body>
</html>
----

字体类型font-style

/*正常normal 斜体italic 倾斜oblique*/

 字体颜色 font-color

  1. 直接给关键字color
  2. 16进制
  3. rgb /*red freen blue*/
  4. rgba /*red freen blue alpha透明程度*/
posted on 2018-01-13 15:48  .Tang  阅读(189)  评论(0)  编辑  收藏  举报