其他分享
首页 > 其他分享> > CSS——字体

CSS——字体

作者：互联网

1、字体样式font-family、颜色color

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
            .class1 {
                font-family: "楷体";
                font-size: 20px;
                color: black;
            }
        </style>
    </head>

    <body bgcolor="aquamarine">
        <center>
            <p class=class1>
                举头望明月，低头思故乡。
            </p>
        </center>
    </body>

</html>

2、字体大小font-size（绝对大小）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
            .class1 {
                font-size: 20px;
            }
            
            .class2 {
                font-size: 30px;
            }
            
            .class3 {
                font-size: 40px;
            }
            
            .class4 {
                font-size: xx-small;
            }
            
            .class5 {
                font-size: x-small;
            }
            
            .class6 {
                font-size: large;
            }
            
            .class7 {
                font-size: x-large;
            }
        </style>
    </head>

    <body bgcolor="aquamarine">
        <center>
            <p class=class1>
                举头望明月，低头思故乡。（20px）
            </p>
            <p class=class2>
                举头望明月，低头思故乡。（30px）
            </p>
            <p class=class3>
                举头望明月，低头思故乡。（40px）
            </p>
            <p class=class4>
                举头望明月，低头思故乡。（xx-smaall）
            </p>
            <p class=class5>
                举头望明月，低头思故乡。（x-small）
            </p>
            <p class=class6>
                举头望明月，低头思故乡。（large）
            </p>
            <p class=class7>
                举头望明月，低头思故乡。（x-large）
            </p>
        </center>
    </body>

</html>

绝对大小定义字体大小有两种方式：

（1）直接以px为单位定义字体大小。

（2）以关键字：xx-small，x-small，small，medium，large，x-large，xx-large定义字体大小。

3、字体的显示形式font-style

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
        
        
            .class3 {
                font-style:italic;
            }
                .class4 {
                font-style:normal;
            }
            
            .class5 {
                font-style:oblique;
            }
            
        </style>
    </head>

    <body bgcolor="aquamarine">
        <center>
        
    
            <p class=class3>
                举头望明月，低头思故乡。
            </p>
            <p class=class4>
                举头望明月，低头思故乡。
            </p>
            <p class=class5>
                举头望明月，低头思故乡。
            </p>
        
        </center>
    </body>

</html>

4、字体形式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
            .class4 {
                text-decoration: line-through;
            }
            
            .class5 {
                text-decoration: none;
            }
            
            .class6 {
                text-decoration: overline;
            }
            
            .class7 {
                text-decoration: underline;
            }
        </style>
    </head>

    <body bgcolor="aquamarine">
        <center>

            <p class=class4>
                举头望明月，低头思故乡。
            </p>
            <p class=class5>
                举头望明月，低头思故乡。
            </p>
            <p class=class6>
                举头望明月，低头思故乡。
            </p>
            <p class=class7>
                举头望明月，低头思故乡。
            </p>

        </center>
    </body>

</html>

 5、字体加粗（九级）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
            .class1 {
                font-weight: 100;
            }
            
            .class2 {
                font-weight: 300;
            }
            
            .class3 {
                font-weight: 600;
            }
            
            .class4 {
                font-weight: 800;
            }
            
            .class5 {
                font-weight: 900;
            }
        </style>
    </head>

    <body bgcolor="aquamarine">
        <center>

            <p class=class1>
                举头望明月，低头思故乡。
            </p>
            <p class=class2>
                举头望明月，低头思故乡。
            </p>
            <p class=class3>
                举头望明月，低头思故乡。
            </p>
            <p class=class4>
                举头望明月，低头思故乡。
            </p>
            <p class=class5>
                举头望明月，低头思故乡。
            </p>

        </center>
    </body>

</html>

 

标签：故乡,举头,字体,望明月,font,低头,CSS,size
来源： https://www.cnblogs.com/zhai1997/p/11413933.html