Html网页使用HarmonyOSSansSC+JetBrainsMono字体示例涉及文件字体文件效果 index.

涉及文件

字体文件

效果

index.html

<!DOCTYPE html>
<html>
<head>
    <title>你好</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>我用的字体是</p>
    <p>【JetBrainsMono+HarmonyOS_Sans_SC_Regular】</p>
    <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
    <p>abcdefghijklmnopqrstuvwxyz</p>
    <p>0123456789</p>
</body>
</html>

style.css

@font-face {
  font-family: "JetBrainsMono";
  src: url("./font/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HarmonyOS";
  src: url("./font/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html,body{
    font-family: "JetBrainsMono", "HarmonyOS";
}