css3自定义字体

发布于:2022-07-26 ⋅ 阅读:(144) ⋅ 点赞:(0)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义字体</title>
        <style>
            @font-face {
                font-family: "三哥体";/* 必需。规定字体的名称 */
                src: url("font/濑户字体.TTF");/* 必需。定义字体文件的 URL */
            }
            @font-face {
                font-family: "毛爷爷体";
                src: url("font/maozedong.ttf");
            }
            @font-face {
                font-family: "mfd体";
                src: url("font/MFDingDing_Noncommercial-Regular.otf");
            }
            @font-face {
                font-family: "vam体";
                src: url("font/Vampyriqua.ttf");
            }
            .box{
                font-family: "三哥体";
                font-size: 200px;
            }
            .box1{
                font-family: "毛爷爷体";
                font-size: 200px;
            }
            .box2{
                font-family: "mfd体";
                font-size: 200px;
            }
            .box3{
                font-family: "vam体";
                font-size: 200px;
            }
            /* 自定义字体 */
        </style>
    </head>
    <body>
        <div class="box">
            法外狂徒张三
        </div>
        <div class="box1">
            法外狂徒张三
        </div>
        <div class="box2">
            法外狂徒张三
        </div>
        <div class="box3">
            法外狂徒张三
        </div>
    </body>
</html>