字体样式指南 - Outfit字体

字体样式指南 - Outfit字体【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts字重使用规范标题层级H1: Black (900) - 48pxH2: ExtraBold (800) - 36pxH3: Bold (700) - 28pxH4: SemiBold (600) - 24pxH5: 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考