Outfit字体使用规范

Outfit字体使用规范

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

1. 字重使用规范

• 品牌标识：Black(900) 或 ExtraBold(800)
• 主标题：Bold(700) 或 ExtraBold(800)
• 副标题：SemiBold(600) 或 Medium(500)
• 正文：Regular(400) 或 Light(300)
• 引用文字：Light(300) 或 ExtraLight(200)

2. 字号搭配建议

3. 间距与对齐规则

• 标题间距：1.5倍字号高度
• 段落间距：1.2倍行高
• 字母间距：标题-0.02em，正文0em
• 对齐方式：左对齐（西文），两端对齐（中文）

### 实施步骤：创建设计系统组件库 ```css /* 设计系统CSS变量 */ :root { /* 字体变量 */ --font-outfit: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* 字重变量 */ --font-weight-thin: 100; --font-weight-extra-light: 200; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semi-bold: 600; --font-weight-bold: 700; --font-weight-extra-bold: 800; --font-weight-black: 900; /* 字号变量 */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ /* 行高变量 */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.75; } /* 预定义文本样式类 */ .text-display { font-family: var(--font-outfit); font-weight: var(--font-weight-black); font-size: var(--font-size-5xl); line-height: var(--line-height-tight); letter-spacing: -0.02em; } .text-heading { font-family: var(--font-outfit); font-weight: var(--font-weight-bold); font-size: var(--font-size-3xl); line-height: var(--line-height-tight); letter-spacing: -0.01em; } .text-subheading { font-family: var(--font-outfit); font-weight: var(--font-weight-semi-bold); font-size: var(--font-size-xl); line-height: var(--line-height-normal); } .text-body { font-family: var(--font-outfit); font-weight: var(--font-weight-regular); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); } .text-caption { font-family: var(--font-outfit); font-weight: var(--font-weight-light); font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-secondary); }

最佳实践：品牌一致性检查清单

1. 建立设计Token系统：使用CSS变量统一字体配置
2. 创建组件库：预定义文本样式组件
3. 实施代码审查：检查字体使用是否符合规范
4. 定期设计审计：审查设计稿中的字体使用
5. 培训团队成员：确保所有人理解字体使用规范

📦 挑战五：字体项目管理与版本控制

挑战分析：字体文件管理混乱导致版本不一致

字体文件分散在不同项目、不同格式，缺乏统一管理，导致版本更新困难、文件冗余和兼容性问题。

解决方案：建立科学的字体文件管理流程

项目结构标准化

project/ ├── fonts/ │ ├── otf/ # OTF格式字体 │ │ ├── Outfit-Regular.otf │ │ ├── Outfit-Bold.otf │ │ └── ... │ ├── ttf/ # TTF格式字体 │ │ ├── Outfit-Regular.ttf │ │ ├── Outfit-Bold.ttf │ │ └── ... │ ├── webfonts/ # 网页字体 │ │ ├── Outfit[wght].woff2 │ │ ├── Outfit-Regular.woff2 │ │ └── ... │ └── variable/ # 可变字体 │ ├── Outfit[wght].ttf │ └── Outfit[wght].woff2 ├── documentation/ # 字体文档 │ ├── font-usage-guide.md │ ├── design-tokens.json │ └── examples/ └── scripts/ # 构建脚本 ├── build-fonts.py └── optimize-webfonts.py

实施步骤：自动化字体构建与优化

#!/usr/bin/env python3 # scripts/build-fonts.py - 字体构建自动化脚本 import subprocess import os import shutil def build_fonts(): """构建字体文件的自动化脚本""" print("🚀 开始构建Outfit字体...") # 1. 检查依赖 dependencies = ['fontmake', 'ttx', 'woff2_compress'] missing_deps = [] for dep in dependencies: try: subprocess.run([dep, '--version'], capture_output=True, check=True) except (subprocess.CalledProcessError, FileNotFoundError): missing_deps.append(dep) if missing_deps: print(f"❌ 缺少依赖: {', '.join(missing_deps)}") print("请安装: pip install fontmake fonttools") return False # 2. 从Glyphs源文件构建 print("📦 从Glyphs源文件构建...") subprocess.run([ 'fontmake', '-g', 'sources/Outfit.glyphs', '-o', 'otf', 'ttf', 'variable', '--output-dir', 'build/', '--verbose' ], check=True) # 3. 优化网页字体 print("🌐 优化网页字体...") os.makedirs('fonts/webfonts', exist_ok=True) # 转换TTF为WOFF2 for ttf_file in os.listdir('build'): if ttf_file.endswith('.ttf'): woff2_file = ttf_file.replace('.ttf', '.woff2') subprocess.run([ 'woff2_compress', f'build/{ttf_file}' ], check=True) # 移动优化后的文件 shutil.move(f'build/{ttf_file.replace(".ttf", ".woff2")}', f'fonts/webfonts/{woff2_file}') print("✅ 字体构建完成！") return True if __name__ == '__main__': build_fonts()

最佳实践：字体版本管理策略

1. 使用Git LFS管理字体文件：避免大文件污染仓库
2. 建立字体版本号系统：遵循语义化版本控制
3. 创建字体变更日志：记录每次更新的变化
4. 实施自动化测试：使用FontBakery进行质量检查
5. 定期更新字体文件：获取最新的优化和修复

# 使用Makefile自动化字体构建 make build # 构建字体文件 make test # 运行字体质量测试 make proof # 生成字体预览文档

📋 快速开始指南：立即应用Outfit字体

步骤1：获取字体文件

# 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts # 或直接下载需要的字体格式 cd Outfit-Fonts/fonts

步骤2：选择适合的格式

• 网页项目：使用fonts/webfonts/中的WOFF2文件
• 桌面设计：使用fonts/otf/中的OTF文件
• 跨平台应用：使用fonts/ttf/中的TTF文件
• 现代项目：尝试fonts/variable/中的可变字体

步骤3：配置字体加载

<!-- 网页项目HTML配置 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用Outfit字体的网站</title> <link rel="stylesheet" href="css/fonts.css"> <style> /* 或者内联CSS */ @font-face { font-family: 'Outfit'; src: url('fonts/webfonts/Outfit-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } body { font-family: 'Outfit', sans-serif; } </style> </head> <body> <h1>欢迎使用Outfit字体</h1> <p>这是一个使用Outfit字体的示例页面。</p> </body> </html>

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