master

分支 (1)

管理

管理

master

vue3-template
/
font.html

<!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">

    <style>
    @font-face {
      /* 注意重命名字体名称要和字体包名称一样*/
      font-family: "MiSans-Regular";
      /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
      src: url("./src/assets/font/MiSans-Regular.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
            /* 注意重命名字体名称要和字体包名称一样*/
            font-family: "MiSans-Heavy";
            /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
            src: url("./src/assets/font/MiSans-Heavy.ttf") format("truetype");
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            /* 注意重命名字体名称要和字体包名称一样*/
            font-family: "MiSans-Light";
            /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
            src: url("./src/assets/font/MiSans-Light.ttf") format("truetype");
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            /* 注意重命名字体名称要和字体包名称一样*/
            font-family: "MiSans-Medium";
            /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
            src: url("./src/assets/font/MiSans-Medium.ttf") format("truetype");
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            /* 注意重命名字体名称要和字体包名称一样*/
            font-family: "MiSans-Normal";
            /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
            src: url("./src/assets/font/MiSans-Normal.ttf") format("truetype");
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            /* 注意重命名字体名称要和字体包名称一样*/
            font-family: "MiSans-Semibold";
            /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
            src: url("./src/assets/font/MiSans-Semibold.ttf") format("truetype");
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            /* 注意重命名字体名称要和字体包名称一样*/
            font-family: "MiSans-Thin";
            /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
            src: url("./src/assets/font/MiSans-Thin.ttf") format("truetype");
            font-weight: normal;
            font-style: normal;
        }
        .title {
            /* vue是单页面应用所以弊端就是他会显示到你的页面上 */
            /* 隐藏了之后，所有的title类名都会隐藏，要在真正显示的地方加上display:block使其显示 */

            font-family: "MiSans-Thin";
        }
    </style>
</head>

<body>
    <div class="title">
        要压缩的字,让优秀成为一种习惯！
    </div>

</body>

</html>