/* ======================================== typography.css — 字体声明 & 排版规范 作用： 1. 声明自托管字体的 @font-face（拉丁文 + 阿拉伯文） 2. 定义全站标题和正文的字号、行高 3. 阿拉伯文 RTL 模式下切换为专用字体 ======================================== */ /* ===== 拉丁字体 — 自托管（不从 Google Fonts CDN 加载） ===== */ /* DM Serif Display：标题专用衬线字体，仅 Regular 400 一个字重 */ @font-face { font-family: 'DM Serif Display'; src: url('../../assets/fonts/latin/DMSerifDisplay-Regular.woff2') format('woff2'), url('../../assets/fonts/latin/DMSerifDisplay-Regular.woff') format('woff'); font-weight: 400; font-display: swap; /* 先显示系统字体，加载完成后替换，避免白屏 */ } /* DM Sans：正文无衬线字体，需要 Regular(400) + Medium(500) + Bold(700) 三个字重 */ @font-face { font-family: 'DM Sans'; src: url('../../assets/fonts/latin/DMSans-Regular.woff2') format('woff2'), url('../../assets/fonts/latin/DMSans-Regular.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('../../assets/fonts/latin/DMSans-Medium.woff2') format('woff2'), url('../../assets/fonts/latin/DMSans-Medium.woff') format('woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('../../assets/fonts/latin/DMSans-Bold.woff2') format('woff2'), url('../../assets/fonts/latin/DMSans-Bold.woff') format('woff'); font-weight: 700; font-display: swap; } /* ===== 阿拉伯文字体 — 自托管 ===== */ /* Tajawal：阿拉伯文无衬线字体，同样需要三个字重 */ @font-face { font-family: 'Tajawal'; src: url('../../assets/fonts/arabic/Tajawal-Regular.woff2') format('woff2'), url('../../assets/fonts/arabic/Tajawal-Regular.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Tajawal'; src: url('../../assets/fonts/arabic/Tajawal-Medium.woff2') format('woff2'), url('../../assets/fonts/arabic/Tajawal-Medium.woff') format('woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Tajawal'; src: url('../../assets/fonts/arabic/Tajawal-Bold.woff2') format('woff2'), url('../../assets/fonts/arabic/Tajawal-Bold.woff') format('woff'); font-weight: 700; font-display: swap; } /* ===== 基础排版 ===== */ /* 正文默认样式 */ body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-text); } /* 标题：使用衬线字体，字重 400（DM Serif Display 只有 Regular） */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.15; color: var(--color-text); } /* 响应式字号 — 使用 clamp() 实现平滑缩放 clamp(最小值, 首选值, 最大值) 首选值使用 vw 单位，随视口宽度变化，但不会低于最小值或超过最大值 */ h1 { font-size: clamp(2.25rem, 5vw, 4rem); } /* 36px → 64px */ h2 { font-size: clamp(1.75rem, 4vw, 3rem); } /* 28px → 48px */ h3 { font-size: clamp(1.5rem, 3vw, 2rem); } /* 24px → 32px */ h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); } /* 20px → 24px */ /* 段落底部间距 */ p { margin-block-end: var(--space-md); } /* ===== 阿拉伯文覆盖 ===== 当 时，所有标题和正文切换为 Tajawal 字体 */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: var(--font-ar); }