/* ========================================================================== typography.css —— 全站统一字体配置（唯一字体来源） -------------------------------------------------------------------------- 维护说明： 1. 本文件是全站字体的**唯一**定义处。新增页面/组件时，字号一律引用 下方 --fs-* 令牌或使用 .t-* 工具类，禁止再写死 px 值。 2. 字体方案：全站统一使用**无衬线**单一家族（思源黑体 Noto Sans SC 体系）。 衬线字体一律禁用——回退链中不得出现任何衬线族，末端只允许 sans-serif。 标题与正文靠「字重 + 字号」拉开层级，而不是换字体族——这样跨页面 永远一致，也不会因为某台设备缺字体而回退到衬线字形。 3. 数字/年份使用 Barlow Condensed（压缩体，用于统计数字与时间轴）， 其回退链末端同样是无衬线家族。 4. 大字号统一用 clamp() 内建响应式，不再依赖媒体查询逐个覆盖。 ========================================================================== */ :root { /* ---------- 1. 字体族：全站唯一家族（纯无衬线，无任何衬线回退） ---------- */ /* 系统字体栈：不依赖任何 Web 字体 / 外部 CDN，离线可用、零第三方请求。 链首按平台优先级排列，末位 sans-serif 兜底。 */ --font-sans: "PingFang SC", /* macOS / iOS 优先 */ "Microsoft YaHei", /* Windows */ "Source Han Sans SC", /* 思源黑体（本地已装，与 Noto Sans SC 同源） */ "Hiragino Sans GB", /* macOS 旧版 */ "WenQuanYi Micro Hei", /* Linux */ sans-serif; /* 数字/年份专用：Barlow Condensed / Oswald 为 Web 字体，已不再外链加载， 缺失时自动回退到上方无衬线系统字体栈（保持纯无衬线，不引入衬线字形）。 */ --font-num: "Barlow Condensed", "Oswald", var(--font-sans); /* 兼容别名：历史代码中的 --font-display / --font-body 一律指向同一家族， 保证旧选择器无需逐条修改即可获得统一字体。 */ --font-display: var(--font-sans); --font-body: var(--font-sans); /* ---------- 2. 字号层级（响应式内建） ---------- */ --fs-display: clamp(38px, 5.2vw, 66px); /* 格言巨字 */ --fs-h1: clamp(25px, 3.6vw, 46px); /* 页面主标题 / 区块主标题 */ --fs-h2: clamp(24px, 3.0vw, 40px); /* 次级主标题 */ --fs-h3: clamp(22px, 2.4vw, 32px); /* 文章标题 */ --fs-h4: clamp(20px, 1.9vw, 24px); /* 卡片标题 */ --fs-h5: 22px; /* 小节强调标题 */ --fs-lg: 20px; /* 大号辅助文本 */ --fs-md: 18px; /* 导航 / 强调正文 */ --fs-article: 17px; /* 文章正文 */ --fs-body: 16px; /* 正文基准 */ --fs-sm: 15px; /* 次要文本 / 按钮 */ --fs-xs: 13px; /* 辅助说明 */ --fs-2xs: 12px; /* 标签 / 版权（可读性下限） */ /* 数字层级 */ --fs-num-xl: clamp(38px, 4.2vw, 62px); /* 统计大数字 */ --fs-num-lg: 34px; /* 时间轴年份 */ --fs-num-md: 26px; /* 新闻日期 */ --fs-num-sm: 20px; /* 小号数字 */ /* ---------- 3. 字重层级 ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* ---------- 4. 行高层级 ---------- */ --lh-none: 1; /* 纯数字 */ --lh-tight: 1.15; /* 巨型标题 */ --lh-heading: 1.3; /* 标题 */ --lh-snug: 1.5; /* 小标题 / 卡片标题 */ --lh-body: 1.7; /* 正文基准 */ --lh-relaxed: 1.85; /* 段落型正文 */ --lh-loose: 2; /* 文章正文 */ /* ---------- 5. 字距 ---------- */ --ls-tight: -.01em; --ls-normal: 0; --ls-wide: .05em; } /* ========================================================================== 基础元素：所有页面共享的字体基线 ========================================================================== */ html { -webkit-text-size-adjust: 100%; /* 防止 iOS 横屏字号被放大 */ } body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; /* 缺字重时不合成假粗体，避免跨设备形态不一 */ } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--fw-bold); line-height: var(--lh-heading); margin: 0; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); } h3 { font-size: var(--fs-h4); } h4 { font-size: var(--fs-md); } h5 { font-size: var(--fs-body); } h6 { font-size: var(--fs-sm); } p { margin: 0 0 1em; } /* 表单与按钮默认不继承字体，必须显式统一 */ button, input, select, textarea { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-snug); } /* 按钮文本层级：默认 15px，触摸目标不小于 44px */ button { min-height: 44px; } strong, b { font-weight: var(--fw-bold); } small { font-size: var(--fs-xs); } /* ========================================================================== 语义工具类：新组件直接套用，避免再写死字号 ========================================================================== */ .t-display { font-size: var(--fs-display); font-weight: var(--fw-black); line-height: var(--lh-tight); } .t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); } .t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); } .t-h5 { font-size: var(--fs-h5); font-weight: var(--fw-bold); line-height: var(--lh-snug); } .t-lead { font-size: var(--fs-md); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); } .t-body { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); } .t-article { font-size: var(--fs-article); font-weight: var(--fw-regular); line-height: var(--lh-loose); } .t-sm { font-size: var(--fs-sm); line-height: var(--lh-snug); } .t-xs { font-size: var(--fs-xs); line-height: var(--lh-snug); } .t-num { font-family: var(--font-num); font-weight: var(--fw-bold); line-height: var(--lh-none); } /* 富文本兜底：CMS 正文里若残留 font 标签或内联字体，强制回归站点字体 */ .article-body font, .article-body [style*="font-family"], .rich-text font, .rich-text [style*="font-family"] { font-family: var(--font-sans) !important; } /* ========================================================================== 响应式微调 - 大字号已由 clamp() 自动缩放，此处只处理固定层级的小屏收敛 ========================================================================== */ @media screen and (max-width: 500px) { :root { --fs-h5: 20px; --fs-lg: 18px; --fs-md: 16px; --fs-article: 16px; /* 移动端文章正文不低于 16px */ --fs-body: 16px; /* 正文基准永不低于 16px */ --lh-loose: 1.9; /* 窄屏行高收紧，避免过于松散 */ --fs-num-lg: 26px; --fs-num-md: 22px; } }