css学习-字体使用 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体font学习</title>
    <style>
        /* 引入外部字体，起一个名字，使用src路径引入即可 */
        /* 字体不只是表示字，也可以是字体图表 */
        @font-face {
            font-family: "open-font";
            /* 字体也分为otf woff ttf等多种，我们在引入时，加上format，格式化，
            如果浏览器可以解析这个类型的字体就加载，如果不可以解析，就不加载， */
            src: url("") format("opentype");
        }
        h1{
            /* 引入一般字体 */
            font-family: 'Courier New', Courier, monospace;
        }


        h2{
            /* 字重，400表示正常，700表示加粗，一般使用normal和blod即可 */
            font-weight: bold;
            /* 字号，表示字体的大小，我们可以使用单词描述，也可以使用px单位，
            还可以使用百分比，100%表示正常
            还可以使用em单位，1em表示100% */
            font-size: small;
        }

        h3{
            /* 文本颜色定义 */
            color: red,rgb(red, green, blue),rgba(red, green, blue, alpha);
        }

        p{
            /* 定义行高 */
            line-height: 1.2em;
        }
        span{
            /* 定义字体风格，包括倾斜等风格 */
            font-family: 'Courier New', Courier, monospace;
            font-size: large;
            line-height: 1.5em;
            font-weight: 100;
            font-style: italic;
            
            font:bold italic 45px/1.5em 'Courier New', Courier, monospace;
        }
        h4{
            /* 将字体转换成小型大写 */
            font-variant: small-caps;
            /* 文本大写转换 */
            text-transform: capitalize;
        }

        h5{
            text-decoration-line: underline;
            /* 去除下划线 */
            text-decoration: none;
        }

        h6{
            /* 定义文本阴影 定义颜色，偏移量，模糊度*/
            text-shadow: gray 5px 5px 3px;
            /* 定义空白和换行 */
            white-space: pre-line
        }
    </style>
</head>
<body>
    
</body>
</html>
posted @ 2022-11-10 21:28  open520  阅读(48)  评论(0)    收藏  举报