当前位置： 首页 > news >正文

Outfit字体终极指南：9种字重的专业几何无衬线字体实战

news 2026/4/28 14:07:32

Outfit字体终极指南：9种字重的专业几何无衬线字体实战

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

Outfit字体是一款现代化的几何无衬线字体，专为品牌自动化公司Outfit.io设计，提供从纤细到粗犷的完整9种字重体系。这款开源字体不仅免费商用，还支持多种格式和可变字体技术，为设计师和开发者提供了全面的排版解决方案。在前80字内，我们已经明确了Outfit字体的核心关键词：几何无衬线字体、9种字重、开源免费、可变字体、品牌设计。

🔧 技术架构深度解析

模块化字体文件组织

Outfit字体采用精心设计的模块化文件结构，确保在不同应用场景下的最佳兼容性和性能表现：

字体格式对比表：

格式类型文件位置适用场景文件大小浏览器支持
OTF格式fonts/otf/专业设计软件（Adobe系列）中等设计软件专用
TTF格式fonts/ttf/桌面系统安装、跨平台应用较大全平台支持
Web字体fonts/webfonts/网页开发、现代浏览器较小Chrome, Firefox, Safari, Edge
可变字体fonts/variable/响应式设计、动态效果单个文件现代浏览器（IE不支持）

源码结构与构建系统

项目基于Google Fonts工作流，采用Unified Font Repository v0.3结构。核心配置文件sources/config.yaml定义了字体构建的基本参数：

sources: - Outfit.glyphs axisOrder: - wght familyName: Outfit

构建系统通过Makefile实现自动化流程：

# 手动构建字体 make build # 生成所有字体格式 make test # 运行FontBakery质量测试 make proof # 生成HTML证明文档 make images # 创建PNG样本图片

图1：Outfit字体品牌形象展示，突出"on-brand production revolution"理念和完整的9种字重体系

🎯 字重体系与应用场景实战

9种字重的技术规格与应用

Outfit字体覆盖了完整的CSS字重数值范围，为不同设计场景提供精准控制：

字重名称CSS数值适用场景视觉特征
Thin100高端品牌标识、精致标题极致纤细，优雅精致
ExtraLight200副标题、引文轻盈优雅，层次分明
Light300长文本、正文内容清晰易读，阅读舒适
Regular400标准正文、默认文本平衡美观，通用性强
Medium500强调文本、按钮标签中等粗细，功能性强
SemiBold600小标题、导航菜单半粗体，适度强调
Bold700主标题、关键信息粗体，视觉焦点
ExtraBold800广告标语、海报标题极粗体，强烈冲击
Black900超大标题、品牌标识超粗体，最大权重

字重选择的技术考量

在实际项目中，字重选择需要考虑以下技术因素：

  1. 可读性与视觉层次：正文推荐使用Regular(400)或Light(300)，标题使用Bold(700)以上
  2. 响应式设计适配：移动端适当增加字重（+100）以补偿小屏幕可读性
  3. 品牌一致性：建立固定的字重使用规范，确保品牌视觉统一

图2：Outfit字体在不同字重下的视觉对比，展示"hard or soft"、"loud or quiet"的情感表达差异

🚀 多平台集成实战指南

网页开发集成方案

传统静态字体加载
/* 基础字体声明 - 按需加载关键字重 */ @font-face { font-family: 'Outfit'; src: url('fonts/webfonts/Outfit-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('fonts/webfonts/Outfit-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('fonts/webfonts/Outfit-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* CSS变量系统 */ :root { --font-outfit: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; --font-weight-thin: 100; --font-weight-regular: 400; --font-weight-bold: 700; } body { font-family: var(--font-outfit); font-weight: var(--font-weight-regular); line-height: 1.6; }
可变字体高级应用
/* 可变字体声明 - 单文件覆盖所有字重 */ @font-face { font-family: 'Outfit Variable'; src: url('fonts/variable/Outfit[wght].woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } /* 响应式字重调整 */ :root { --font-weight-base: 400; --font-weight-heading: 700; } @media (max-width: 768px) { :root { --font-weight-base: 500; /* 移动端增加可读性 */ --font-weight-heading: 800; } } /* 动态字重动画 */ .hero-title { font-family: 'Outfit Variable', sans-serif; font-weight: 300; transition: font-weight 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .hero-title:hover { font-weight: 800; } /* 渐进增强策略 */ @supports (font-variation-settings: normal) { .modern-browser { font-family: 'Outfit Variable', sans-serif; font-variation-settings: 'wght' var(--font-weight, 400); } } @supports not (font-variation-settings: normal) { .legacy-browser { font-family: 'Outfit', sans-serif; font-weight: var(--font-weight, 400); } }

React/Next.js项目集成

// next.config.js - 字体优化配置 module.exports = { webpack: (config, { dev, isServer }) => { // 字体文件处理 config.module.rules.push({ test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'static/fonts/', publicPath: '/_next/static/fonts/', }, }, ], }); return config; }, }; // 字体预加载组件 import Head from 'next/head'; export default function FontPreloader() { return ( <Head> <link rel="preload" href="/fonts/webfonts/Outfit-Regular.woff2" as="font" type="font/woff2" crossOrigin="anonymous" /> <link rel="preload" href="/fonts/variable/Outfit[wght].woff2" as="font" type="font/woff2" crossOrigin="anonymous" /> </Head> ); } // Tailwind CSS配置 // tailwind.config.js module.exports = { theme: { extend: { fontFamily: { outfit: ['Outfit', 'system-ui', 'sans-serif'], 'outfit-variable': ['Outfit Variable', 'system-ui', 'sans-serif'], }, fontWeight: { thin: '100', extralight: '200', light: '300', normal: '400', medium: '500', semibold: '600', bold: '700', extrabold: '800', black: '900', }, }, }, };

Flutter移动应用集成

# pubspec.yaml - 字体资源配置 flutter: fonts: - family: Outfit fonts: - asset: fonts/Outfit-Thin.ttf weight: 100 - asset: fonts/Outfit-ExtraLight.ttf weight: 200 - asset: fonts/Outfit-Light.ttf weight: 300 - asset: fonts/Outfit-Regular.ttf weight: 400 - asset: fonts/Outfit-Medium.ttf weight: 500 - asset: fonts/Outfit-SemiBold.ttf weight: 600 - asset: fonts/Outfit-Bold.ttf weight: 700 - asset: fonts/Outfit-ExtraBold.ttf weight: 800 - asset: fonts/Outfit-Black.ttf weight: 900
// Flutter主题配置 import 'package:flutter/material.dart'; class OutfitTheme { static const TextStyle headline1 = TextStyle( fontFamily: 'Outfit', fontWeight: FontWeight.w900, fontSize: 96, letterSpacing: -1.5, ); static const TextStyle headline2 = TextStyle( fontFamily: 'Outfit', fontWeight: FontWeight.w800, fontSize: 60, letterSpacing: -0.5, ); static const TextStyle bodyText1 = TextStyle( fontFamily: 'Outfit', fontWeight: FontWeight.w400, fontSize: 16, height: 1.5, ); static const TextStyle button = TextStyle( fontFamily: 'Outfit', fontWeight: FontWeight.w600, fontSize: 14, letterSpacing: 1.25, ); static ThemeData get lightTheme => ThemeData( fontFamily: 'Outfit', textTheme: TextTheme( headline1: headline1, headline2: headline2, bodyText1: bodyText1, button: button, ), ); } // 使用示例 Text( 'Outfit字体在Flutter中的应用', style: OutfitTheme.headline2, );

iOS/macOS原生应用集成

// SwiftUI字体配置 import SwiftUI struct OutfitFontManager { static func registerFonts() { // 注册所有字体文件 let fontNames = [ "Outfit-Thin", "Outfit-ExtraLight", "Outfit-Light", "Outfit-Regular", "Outfit-Medium", "Outfit-SemiBold", "Outfit-Bold", "Outfit-ExtraBold", "Outfit-Black" ] for fontName in fontNames { if let fontURL = Bundle.main.url(forResource: fontName, withExtension: "ttf"), let fontData = try? Data(contentsOf: fontURL) as CFData, let provider = CGDataProvider(data: fontData), let font = CGFont(provider) { CTFontManagerRegisterGraphicsFont(font, nil) } } } } // SwiftUI字体扩展 extension Font { static func outfit(_ weight: Font.Weight, size: CGFloat) -> Font { let fontName: String switch weight { case .thin: fontName = "Outfit-Thin" case .ultraLight: fontName = "Outfit-ExtraLight" case .light: fontName = "Outfit-Light" case .regular: fontName = "Outfit-Regular" case .medium: fontName = "Outfit-Medium" case .semibold: fontName = "Outfit-SemiBold" case .bold: fontName = "Outfit-Bold" case .heavy: fontName = "Outfit-ExtraBold" case .black: fontName = "Outfit-Black" default: fontName = "Outfit-Regular" } return Font.custom(fontName, size: size) } } // 使用示例 struct ContentView: View { var body: some View { VStack { Text("标题") .font(.outfit(.black, size: 32)) Text("正文内容") .font(.outfit(.regular, size: 16)) } .onAppear { OutfitFontManager.registerFonts() } } }

⚡ 性能优化与最佳实践

字体加载策略优化

字体加载性能对比表：

加载策略文件大小加载时间适用场景实现复杂度
传统多文件较大中等兼容性要求高低
可变字体较小快现代浏览器中
字体子集最小最快特定语言高
CDN托管-依赖网络全球分发低
关键字体预加载
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 关键字体预加载 --> <link rel="preload" href="fonts/webfonts/Outfit-Regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="fonts/webfonts/Outfit-Bold.woff2" as="font" type="font/woff2" crossorigin> <!-- 字体显示策略 --> <style> @font-face { font-family: 'Outfit'; src: url('fonts/webfonts/Outfit-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* 避免FOIT */ } /* 字体加载状态管理 */ .fonts-loading body { visibility: hidden; } .fonts-loaded body { visibility: visible; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> <!-- 字体加载检测 --> <script> document.documentElement.classList.add('fonts-loading'); Promise.all([ document.fonts.load('1em Outfit'), document.fonts.load('bold 1em Outfit') ]).then(() => { document.documentElement.classList.remove('fonts-loading'); document.documentElement.classList.add('fonts-loaded'); }); </script> </head> <body> <!-- 页面内容 --> </body> </html>

字体渲染优化

/* 跨平台字体渲染优化 */ * { /* 抗锯齿优化 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* 字体特征设置 */ font-feature-settings: "kern", "liga", "clig", "calt"; font-kerning: normal; } /* 响应式字体大小调整 */ :root { --font-size-base: 16px; --font-scale-ratio: 1.2; --font-size-sm: calc(var(--font-size-base) / var(--font-scale-ratio)); --font-size-md: var(--font-size-base); --font-size-lg: calc(var(--font-size-base) * var(--font-scale-ratio)); --font-size-xl: calc(var(--font-size-base) * var(--font-scale-ratio) * var(--font-scale-ratio)); } @media (max-width: 768px) { :root { --font-size-base: 14px; } } /* 字重与行高优化 */ body { font-family: 'Outfit', sans-serif; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } /* 可变字体精细控制 */ .variable-font-demo { font-family: 'Outfit Variable', sans-serif; font-variation-settings: 'wght' 400, 'wdth' 100, 'opsz' 16; /* 平滑过渡 */ transition: font-variation-settings 0.3s ease; } .variable-font-demo:hover { font-variation-settings: 'wght' 700, 'wdth' 110, 'opsz' 24; }

🔍 常见问题与解决方案

问题1：字体渲染不一致

症状：在不同浏览器或操作系统中字体渲染效果不一致

解决方案：

/* 统一的字体渲染设置 */ .font-render-fix { /* Windows ClearType优化 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* macOS字体平滑 */ text-rendering: optimizeLegibility; /* 字体提示优化 */ font-optical-sizing: auto; font-synthesis: weight style; /* 防止字体变形 */ font-stretch: 100%; }

问题2：可变字体兼容性问题

症状：旧版浏览器不支持可变字体技术

解决方案：

/* 渐进增强策略 */ .font-family-outfit { /* 基础字体栈 */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* 可变字体支持检测 */ @supports (font-variation-settings: normal) { font-family: 'Outfit Variable', -apple-system, BlinkMacSystemFont, sans-serif; font-variation-settings: 'wght' var(--font-weight, 400); } /* 静态字体回退 */ @supports not (font-variation-settings: normal) { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: var(--font-weight, 400); } } /* JavaScript检测与回退 */ if (!CSS.supports('font-variation-settings', 'normal')) { document.documentElement.classList.add('no-font-variations'); // 加载静态字体文件 const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'fonts/outfit-static.css'; document.head.appendChild(link); }

问题3：字体文件加载缓慢

症状：字体加载导致页面闪烁或延迟

解决方案：

// 字体加载优化脚本 class FontLoader { constructor() { this.fonts = [ { name: 'Outfit Regular', url: 'fonts/webfonts/Outfit-Regular.woff2' }, { name: 'Outfit Bold', url: 'fonts/webfonts/Outfit-Bold.woff2' } ]; this.loadFonts(); } async loadFonts() { const fontPromises = this.fonts.map(font => { return new FontFace(font.name, `url(${font.url})`, { weight: font.name.includes('Bold') ? '700' : '400' }).load(); }); try { const loadedFonts = await Promise.all(fontPromises); loadedFonts.forEach(font => document.fonts.add(font)); // 触发自定义事件 document.dispatchEvent(new CustomEvent('fontsloaded')); // 更新CSS变量 document.documentElement.style.setProperty('--fonts-loaded', 'true'); } catch (error) { console.error('字体加载失败:', error); this.fallbackToSystemFonts(); } } fallbackToSystemFonts() { document.documentElement.style.setProperty('--font-family', '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'); } } // 初始化字体加载器 new FontLoader();

问题4：字体许可证合规性

症状：不确定字体使用是否符合SIL OFL许可证要求

解决方案：

  1. 商业使用：允许免费商业使用，无需署名
  2. 修改分发：可以修改字体，但修改后的字体必须保持相同许可证
  3. 名称限制：不能使用"Outfit"作为保留字体名称
  4. 文件分发：不能单独销售字体文件，但可以嵌入软件或文档中

合规检查清单：

  • 是否保留了原始许可证文件OFL.txt
  • 是否未单独销售字体文件
  • 修改后的字体是否保持了OFL许可证
  • 是否未使用"Outfit"作为衍生字体名称

问题5：字体构建与测试

症状：需要自定义修改字体或验证字体质量

解决方案：

# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts cd Outfit-Fonts # 2. 设置Python虚拟环境 python3 -m venv venv source venv/bin/activate # Linux/macOS # venv\Scripts\activate # Windows # 3. 安装依赖 pip install -r requirements.txt # 4. 构建字体 make build # 5. 运行质量测试 make test # 6. 生成证明文档 make proof # 7. 查看测试报告 open fontbakery-report.html # macOS # xdg-open fontbakery-report.html # Linux

🛠️ 高级技巧与定制化

字体子集化优化

对于特定语言的网站，创建字体子集可以显著减少文件大小：

# 使用fonttools创建中文子集 pip install fonttools brotli # 创建中文字符子集 pyftsubset fonts/ttf/Outfit-Regular.ttf \ --output-file=fonts/subset/Outfit-Regular-CN.ttf \ --text-file=chinese-characters.txt \ --flavor=woff2 \ --with-zopfli # 创建拉丁字母子集（常见网页字符） pyftsubset fonts/ttf/Outfit-Regular.ttf \ --output-file=fonts/subset/Outfit-Regular-Latin.woff2 \ --text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?/" \ --flavor=woff2

自定义字体变体

如果需要修改Outfit字体，可以使用字体编辑工具：

  1. 修改源文件：编辑sources/Outfit.glyphs文件
  2. 调整配置：修改sources/config.yaml中的构建参数
  3. 自定义构建：
# 修改构建参数 vim sources/config.yaml # 重新构建字体 make clean make build # 验证修改结果 make test

字体性能监控

// 字体性能监控脚本 class FontPerformanceMonitor { constructor() { this.metrics = { loadTime: 0, renderTime: 0, fallbackUsed: false }; this.monitorFontPerformance(); } monitorFontPerformance() { // 监控字体加载时间 const fontLoadStart = performance.now(); document.fonts.ready.then(() => { this.metrics.loadTime = performance.now() - fontLoadStart; // 监控字体渲染时间 const renderStart = performance.now(); this.forceLayout(); this.metrics.renderTime = performance.now() - renderStart; this.logMetrics(); }).catch(error => { console.error('字体加载失败:', error); this.metrics.fallbackUsed = true; }); } forceLayout() { // 强制重排以测量渲染时间 document.body.offsetHeight; } logMetrics() { console.table({ '字体加载时间': `${this.metrics.loadTime.toFixed(2)}ms`, '字体渲染时间': `${this.metrics.renderTime.toFixed(2)}ms`, '是否使用回退字体': this.metrics.fallbackUsed ? '是' : '否', '建议优化': this.getOptimizationSuggestions() }); } getOptimizationSuggestions() { const suggestions = []; if (this.metrics.loadTime > 1000) { suggestions.push('考虑使用字体子集化'); } if (this.metrics.renderTime > 50) { suggestions.push('优化字体渲染设置'); } return suggestions.length > 0 ? suggestions.join('; ') : '性能良好'; } } // 初始化性能监控 new FontPerformanceMonitor();

📋 许可证与商业使用指南

SIL Open Font License (OFL) v1.1 关键条款

允许的行为：

  • ✅ 免费用于商业项目
  • ✅ 可以修改和分发字体
  • ✅ 可以嵌入到软件和文档中
  • ✅ 无需署名要求
  • ✅ 可以与其他字体捆绑分发

限制条件：

  • ❌ 不能单独销售字体文件
  • ❌ 修改后的字体必须保持相同许可证
  • ❌ 不能使用"Outfit"作为保留字体名称
  • ❌ 不能将字体重新授权为其他许可证

商业项目集成检查清单

  1. 许可证文件：确保OFL.txt文件随字体一起分发
  2. 字体名称：修改后的字体不能命名为"Outfit"
  3. 使用场景：可以用于网站、移动应用、桌面软件、印刷品
  4. 分发方式：可以作为软件的一部分分发，但不能单独销售
  5. 版权声明：建议保留原始版权声明

🚀 下一步行动建议

立即开始使用

  1. 选择字体格式：根据项目需求从fonts/目录选择合适格式

    • 网页开发：使用fonts/webfonts/或fonts/variable/
    • 桌面应用：使用fonts/ttf/或fonts/otf/
    • 移动应用：使用fonts/ttf/

  2. 集成到项目：

# 克隆仓库获取完整字体文件 git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts # 复制所需字体文件到项目 cp -r fonts/webfonts/*.woff2 /your-project/fonts/

  1. 性能优化：

    • 使用可变字体减少HTTP请求
    • 实施字体预加载策略
    • 考虑字体子集化

  2. 测试验证：

    • 在不同浏览器和设备上测试字体渲染
    • 使用FontBakery验证字体质量
    • 检查许可证合规性

贡献与反馈

Outfit字体项目欢迎社区贡献：

  • 提交问题和建议
  • 参与字体测试和质量验证
  • 贡献文档和改进建议

通过遵循本指南中的最佳实践，您可以充分利用Outfit字体的完整9种字重体系、现代化的几何设计和开源免费特性，为您的项目提供专业级的排版解决方案。

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

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

http://www.jsqmd.com/news/714153/

相关文章：

  • 如何快速配置Linux键盘音效：专业级个性化设置指南
  • 2026年如何选择叠螺式污泥脱水机厂家？从用户痛点看可美环保的实践路径 - 企师傅推荐官
  • OpenClaw 2.6.6 一键部署方案，Windows 本地 AI 办公助手配置
  • 【2026年最新600套毕设项目分享】基于微信平台的购物商城小程序（30195）
  • SSH配置
  • Cocos Creator 3.x 安卓打包避坑实录：从SDK报错到Release签名，一次搞定
  • Redis 持久化终极指南：RDB vs AOF vs 混合模式，保障高可用与数据零丢失（2026最新实践）
  • 开源项目ROS全覆盖路径规划完整指南：BSA算法深度解析与工业实践
  • 突破瓶颈！MySQL高级优化与企业级实战场景详解
  • 从动画师视角看UE：如何用混合空间1D（Blend Space）让角色走路更自然
  • Transformer时间序列预测实战：如何用个人业务数据替换ETTh1进行滚动预测与结果分析
  • Tinke：解密NDS游戏资源的瑞士军刀
  • 2026年Q2劳力士（Rolex）中国官方维修服务体系全面升级：匠心守护，恒动不息 - 速递信息
  • 避坑指南：Python 3.12.2 安装后，为什么在PyCharm里还是找不到解释器？
  • 键盘防误触终极方案：iwck 一键锁定输入设备保护你的工作流程
  • GitHub AgentHQ 实战指南：打造你的第一个多 Agent 协作工作流
  • 重庆市渝中区消防设备修造厂：南川报废七氟丙烷自动灭火装置回收公司 - LYL仔仔
  • 从信号波形看懂显示接口：用示波器实测RGB、LVDS、MIPI的时序与差分信号
  • Win11Debloat：Windows 11终极清理优化指南，一键打造纯净高效系统
  • 【2026 算法级安全生存指南】大模型查重探针逆向解析：哪些降重软件可以同时降低查重率和AIGC疑似率？ - nut-king
  • ViGEmBus 终极指南：让Windows游戏支持所有手柄的免费解决方案
  • OpCore-Simplify终极指南：五分钟实现黑苹果智能配置与一键生成
  • 生物信息学新手必看：用TBtools一键搞定蛋白质理化性质分析（附详细参数解读）
  • NRF24L01通信不稳定？从SPI时序到电源，手把手教你排查常见问题
  • 上海乐时宜实业：徐汇开平板定制公司推荐 - LYL仔仔
  • 从K8s到边缘终端零迁移成本，Docker WASM部署全链路拆解，含CI/CD流水线模板与安全加固checklist
  • Linux内核参数配置
  • 豆包推广TOP7测评：2026年新媒体发稿平台权威榜单与实战指南 - 博客湾
  • AMD显卡驱动终极瘦身指南：Radeon Software Slimmer完全教程
  • BOE（京东方）以创新显示赋能2026横琴-澳门国际数字艺术博览会 开启科技艺术共生新篇章