css使用自定义字体教程

开源字体库

• 站长字体 --字体资源丰富
• fontke --字体资源丰富
• 阿里inconfont --阿里图标库的字体，就是字体比较少

使用字体文件

一般下载的字体文件是.ttf格式，也有的是woff、woff2、otf等

定义字体

css文件使用@font-face定义一个字体：

font-family必写，为字体随便起一个名字

src必写，字体文件的路径

font-display选填，建议写上，字体文件加载完成前是否显示原生字体

1@font-face {
2  font-family: "font";
3  src: url("./assets/font/HarmonyOS_Sans_SC_Medium.subset.woff2");
4  font-display: swap;
5}

使用字体

定义好字体之后，在需要使用的元素上，直接加font-family就可以了，值需要跟定义的名字一致

1#root {
2  font-size: 16px;
3  font-family: "font";
4}

本站字体

logo--- 汉仪霹雳体简

全站--- 鸿蒙字体