笔记

# Fonts 字体引入

# 推荐目录结构

assets/
├─ css/
│  └─ fonts.css
└─ fonts/
   ├─ HARMONYOS_SANS_SC_REGULAR.woff2
   └─ HARMONYOS_SANS_SC_BOLD.woff2

# 字体声明

/* 常规字重 */
@font-face {
    font-family: "HarmonyOS Sans SC";
    src: url("../fonts/HARMONYOS_SANS_SC_REGULAR.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* 粗体字重 */
@font-face {
    font-family: "HarmonyOS Sans SC";
    src: url("../fonts/HARMONYOS_SANS_SC_BOLD.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

# 常见字体格式

格式 CSS format() 说明
WOFF2 woff2 体积最小，现代网页首选
WOFF woff WOFF2 的旧浏览器兼容方案
TTF truetype 通用字体格式，文件通常较大
OTF opentype 支持较丰富的排版特性，文件通常较大
EOT embedded-opentype 仅用于兼容旧版 Internet Explorer
SVG svg 早期移动浏览器方案，现已基本淘汰

# 各格式写法

/* WOFF2 */
src: url("../fonts/my-font.woff2") format("woff2");

/* WOFF */
src: url("../fonts/my-font.woff") format("woff");

/* TTF */
src: url("../fonts/my-font.ttf") format("truetype");

/* OTF */
src: url("../fonts/my-font.otf") format("opentype");

/* EOT */
src: url("../fonts/my-font.eot") format("embedded-opentype");

/* SVG */
src: url("../fonts/my-font.svg#MyFont") format("svg");

# 多格式兼容写法

浏览器会从前往后选择第一个支持的格式。

@font-face {
    font-family: "MyFont";
    src: url("../fonts/my-font.eot");
    src:
        url("../fonts/my-font.eot?#iefix") format("embedded-opentype"),
        url("../fonts/my-font.woff2") format("woff2"),
        url("../fonts/my-font.woff") format("woff"),
        url("../fonts/my-font.ttf") format("truetype"),
        url("../fonts/my-font.otf") format("opentype"),
        url("../fonts/my-font.svg#MyFont") format("svg");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

现代项目通常只需要 WOFF2：

@font-face {
    font-family: "MyFont";
    src: url("../fonts/my-font.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

# 常用字体公共模板

以下模板根据 H:\字体文件 中现有字体整理。建议复制字体到项目的 assets/fonts/ 目录，并使用模板中的英文目录名和文件名，避免空格及中文路径带来的服务器兼容问题。

# 字体与字重

字体 包含字重 原始格式
Gilroy Light 300、Regular 400、Bold 700 OTF
Roboto Regular 400、Bold 700 TTF
Trade Gothic LT Std Light 300、Bold 700 OTF
PingFang SC Bold 700 TTF
Alibaba PuHuiTi 2.0 Light 300 至 Black 1000 OTF
HarmonyOS Sans SC Regular 400、Bold 700 WOFF2、TTF

# 完整 CSS

/* =====================
   Gilroy
===================== */

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/gilroy-light.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/gilroy-regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/gilroy-bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* =====================
   Roboto
===================== */

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto/roboto-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto/roboto-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* =====================
   Trade Gothic LT Std
===================== */

@font-face {
    font-family: "Trade Gothic LT Std";
    src: url("../fonts/trade-gothic/TradeGothicLTStd-Light.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Trade Gothic LT Std";
    src: url("../fonts/trade-gothic/TradeGothicLTStd-Bd2.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* =====================
   PingFang SC
===================== */

@font-face {
    font-family: "PingFang SC";
    src: url("../fonts/pingfang/pingfang-sc-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* =====================
   Alibaba PuHuiTi 2.0
===================== */

@font-face {
    font-family: "Alibaba PuHuiTi 2.0";
    src: url("../fonts/alibaba-puhuiti/AlibabaPuHuiTi-2-45-Light.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Alibaba PuHuiTi 2.0";
    src: url("../fonts/alibaba-puhuiti/AlibabaPuHuiTi-2-55-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Alibaba PuHuiTi 2.0";
    src: url("../fonts/alibaba-puhuiti/AlibabaPuHuiTi-2-65-Medium.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Alibaba PuHuiTi 2.0";
    src: url("../fonts/alibaba-puhuiti/AlibabaPuHuiTi-2-75-SemiBold.otf") format("opentype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Alibaba PuHuiTi 2.0";
    src: url("../fonts/alibaba-puhuiti/AlibabaPuHuiTi-2-85-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Alibaba PuHuiTi 2.0";
    src: url("../fonts/alibaba-puhuiti/AlibabaPuHuiTi-2-95-ExtraBold.otf") format("opentype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Alibaba PuHuiTi 2.0";
    src: url("../fonts/alibaba-puhuiti/AlibabaPuHuiTi-2-105-Heavy.otf") format("opentype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "Alibaba PuHuiTi 2.0";
    src: url("../fonts/alibaba-puhuiti/AlibabaPuHuiTi-2-115-Black.otf") format("opentype");
    font-style: normal;
    font-weight: 1000;
    font-display: swap;
}

/* =====================
   HarmonyOS Sans SC
===================== */

@font-face {
    font-family: "HarmonyOS Sans SC";
    src: url("../fonts/harmonyos-sans-sc/HARMONYOS_SANS_SC_REGULAR.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "HarmonyOS Sans SC";
    src: url("../fonts/harmonyos-sans-sc/HARMONYOS_SANS_SC_BOLD.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

按实际项目需要保留对应的 @font-face，不要一次加载所有字体和全部字重。中文字体文件较大，正式上线前建议转换为 WOFF2，并根据项目文字制作字体子集。

将字体文件发布到公网前，请先确认对应字体许可证允许网页嵌入和再分发。

# 公共字体变量

:root {
    --font-harmony: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    --font-puhuiti: "Alibaba PuHuiTi 2.0", "Microsoft YaHei", sans-serif;
    --font-pingfang: "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-gilroy: "Gilroy", Arial, sans-serif;
    --font-roboto: "Roboto", Arial, sans-serif;
    --font-trade-gothic: "Trade Gothic LT Std", Arial, sans-serif;
}

body {
    font-family: var(--font-harmony);
}

.font-puhuiti {
    font-family: var(--font-puhuiti);
}

.font-gilroy {
    font-family: var(--font-gilroy);
}

# 全局使用

:root {
    --font-sans: "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC",
        "Helvetica Neue", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
}

body {
    font-weight: 400;
}

strong,
b,
.font-bold {
    font-weight: 700;
}

# HTML 引入

<link rel="preload"
      href="./assets/fonts/HARMONYOS_SANS_SC_REGULAR.woff2"
      as="font"
      type="font/woff2"
      crossorigin>
<link rel="stylesheet" href="./assets/css/fonts.css">

只建议预加载首屏必用的常规字重。粗体字体由浏览器在实际使用时加载，避免占用首屏带宽。

# 单独使用

.title {
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-weight: 700;
}

.content {
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    font-weight: 400;
}

# 路径说明

  • ../fonts/：相对于 fonts.css 文件所在位置。
  • /fonts/：相对于网站根目录，适合字体统一放在站点公共目录时使用。
  • 推荐使用 WOFF2；体积更小，适合网页加载。
  • 字体文件名大小写必须与服务器中的实际文件名一致。
  • 不使用 local() 时，所有用户都会加载项目内的同一字体版本，显示更一致。