字体样式指南 - Outfit字体

字体样式指南 - Outfit字体

【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts

字重使用规范

标题层级

• H1: Black (900) - 48px
• H2: ExtraBold (800) - 36px
• H3: Bold (700) - 28px
• H4: SemiBold (600) - 24px
• H5: Medium (500) - 20px

正文文本

• 主要正文: Regular (400) - 16px
• 次要正文: Light (300) - 14px
• 说明文字: ExtraLight (200) - 12px

特殊用途

• 装饰性文字: Thin (100) - 根据设计需要
• 强调文本: 比当前字重高1-2级
• 按钮文字: 比正文字重高1级

行高规范

• 标题: 1.2
• 正文: 1.5-1.6
• 长文本: 1.6-1.8

字间距规范

• 标题: -0.02em
• 正文: 0
• 大写字母: 0.1em

## 性能优化：让字体加载更快更智能 ### 策略一：按需加载字体 不要一次性加载所有字重，而是根据实际需要加载： ```javascript // 检测用户设备，按需加载字体 function loadOutfitFonts() { const userAgent = navigator.userAgent; const isMobile = /Mobile|Android|iOS|iPhone|iPad|iPod/.test(userAgent); // 移动设备只加载必要的字重 if (isMobile) { loadFont('Outfit-Regular.woff2', 400); loadFont('Outfit-Bold.woff2', 700); } else { // 桌面设备加载完整字重 loadFont('Outfit-Light.woff2', 300); loadFont('Outfit-Regular.woff2', 400); loadFont('Outfit-Medium.woff2', 500); loadFont('Outfit-Bold.woff2', 700); } } function loadFont(url, weight) { const font = new FontFace('Outfit', `url(${url})`, { weight: weight, style: 'normal' }); font.load().then((loadedFont) => { document.fonts.add(loadedFont); }); }

策略二：使用字体显示策略

/* 使用font-display控制字体加载行为 */ @font-face { font-family: 'Outfit'; src: url('fonts/webfonts/Outfit-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* 先显示备用字体，然后替换 */ } /* 或者使用optional策略 */ @font-face { font-family: 'Outfit Optional'; src: url('fonts/webfonts/Outfit-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: optional; /* 如果字体未在关键时刻加载完成，则使用备用字体 */ }

【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts