Office UI Fabric Core 使用指南

1. 项目介绍

Office UI Fabric Core 是由微软开发的一款前端 CSS 框架，专为构建与 Office 及 Microsoft 365 平台体验相一致的应用而设计。它提供了一套响应式且面向移动设备优先的样式和工具集，简化了基于 Office 设计语言进行网页开发的过程。核心库包含图标、字体、颜色方案、网格系统等基本元素，是构建统一视觉风格办公应用的基础。请注意，这与包含React组件的Office UI Fabric React是两个不同的项目。

2. 项目快速启动

要迅速上手Office UI Fabric Core，你可以通过以下几种方式集成到你的项目中：

CDN方式引入

在HTML文件中添加如下链接来直接使用最新版本：

<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/css/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/css/fabric-icons.min.css">

包管理器安装（以npm为例）

如果你的项目使用npm，可以通过命令行安装：

npm install @microsoft/fabric-core

然后在你的代码中通过CSS模块或者link标签引用。

3. 应用案例和最佳实践

在构建Office兼容界面时，遵循Office的设计原则至关重要。例如，使用Fabric提供的类型、颜色主题以及布局规则来确保UI的一致性。对于最佳实践，考虑以下几点：

• 一致性: 利用Fabric预定义的类名保持全局样式统一。
• 响应式设计: 确保应用在不同屏幕尺寸下都能良好展示，利用Fabric的栅格系统。
• 可访问性: 遵循WCAG标准，使用Fabric内置的支持无障碍的组件和样式。

示例代码片段，展示如何使用Fabric基础样式：

<div class="ms-Grid">
    <div class="ms-Grid-row">
        <div class="ms-Grid-col ms-u-lg6 ms-u-md8 ms-u-sm10 ms-u-xl7">
            <h2 class="ms-font-xl">标题</h2>
            <p class="ms-font-m">这是正文内容，展示了Office UI Fabric的文字和布局风格。</p>
        </div>
    </div>
</div>

4. 典型生态项目

Office UI Fabric Core被广泛应用于构建Microsoft Office相关的Web应用和服务，包括但不限于Outlook Web Access、SharePoint Online以及各种Office Add-ins。这些项目通常结合Office UI Fabric React中的组件和Fabric Core的样式，共同创建高度一致的用户体验。开发者可以在自己的Office Add-in或者企业级应用中借鉴这些生态项目的设计模式和实现方法，以提升产品的专业度和用户熟悉度。

---

此文档为你快速入门Office UI Fabric Core提供了基础指导。深入学习时，请参考其官方文档以获取更多详细信息和高级特性的使用方法。