css服务端字体+媒体查询+css函数

一、服务端字体

　　1、下载字体文件

　　2、使用

@font-face {
  font-family: fontname;
  src: url("./font/fontfile.ttf");
}

.div {
  font-family: fontname;
}

二、媒体查询

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

三、css函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        :root {
            --myleft: 100;
        }

        .out {
             300px;
            height: 300px;
            background: red;
            position: relative;
            --mytop: 100;
        }

        .out:before {
            content: "";
             100px;
            height: 100px;
            background: green;
            position: absolute;
            top: calc(var(--mytop) * 1px);
            left: calc(var(--myleft) * 1px);
        }
    </style>
</head>
<body>
<div class="out"></div>
</body>
</html>