企业官网建设流程全解析

开发页面时，字体、排版规范、功能图标、品牌 Logo 素材分散在不同网站，每每切换多个页面，烦的一批，还容易出现页面视觉风格不统一的问题。

6 款有字体自托管、字号标准化、通用界面图标、后台图标、通用图标、品牌标识六大场景。日常我将全部站点统一归类到职场人导航zcrdh.com的自定义区，形成固定的项目开发流程，前端、UI、内容开发从业者直接拿走。下图就是我的，给你们亮亮相！第一步添加分类，起一个自己喜欢的名字，再到右侧的编辑里添加聚合职场人导航中，添加已经收录的99%市面职场人、打工人、办公人实用的工具都有，或是手动添加冷门的小众网站。

一、Fontsource：Google Fonts 优质替代，网页字体自托管方案

适用场景：企业官网、后台管理系统、长期迭代的网页项目，适合需要稳定字体加载、统一全站文字视觉规范的开发场景。

二、Type Scale：在线字号排版工具，快速生成标准化文字层级

轻量化在线排版辅助工具，可视化调节文字缩放比例，一键生成完整模块化字号阶梯，调整完成后可直接导出 CSS 代码复制到项目中。 搭建组件库、博客页面、资讯官网时优先使用，提前统一全站字号标准，后续所有页面直接复用规范，省去反复调试字号的步骤。

三、Phosphor Icons：多粗细 SVG 图标，适配产品官网界面

核心优势是提供 6 种粗细样式，从细线条到双色填充全覆盖不会出现图标风格割裂的情况，支持单独导出 SVG 文件，兼容 Figma 与主流前端框架。

四、Tabler Icons：后台管理系统专用标准化图标库

统一 2px 描边 SVG 图标，基于 24×24 标准网格绘制，线条规整，非常适配 OA 系统、数据看板、商户后台等功能性页面。

五、Font Awesome：通用图标兜底工具，快速补充交互标识

数千款矢量图标仅需一行代码即可调用，图标大小、颜色、描边均可通过 CSS 自定义配置。 一般不作为项目主力图标库，多用于应急补充，页面缺少按钮交互、状态提示、简易装饰图标时，基本都能找到匹配素材。

六、Simple Icons：开源品牌 SVG 标识库，技术栈展示专用

一键复制代码即可引入页面。页面视觉层次更干净，无需手动抠图、调整 Logo 尺寸。

基于聚合导航的标准化开发流程

零散收藏书签只能临时应急，把这 6 个工具统一收纳到职场人导航并分类归档，能够形成固定工作流程，新项目直接复用：

1. 项目初始化阶段：使用 Fontsource 引入项目字体，通过 Type Scale 生成全站字号 CSS 规范；
2. 主体页面开发：官网、产品落地页选用 Phosphor Icons；后台管理系统统一使用 Tabler Icons；
3. 交互图标补充：页面缺少通用小图标时，用 Font Awesome 兜底；
4. 品牌展示模块：技术栈、合作方 Logo 全部从 Simple Icons 选取。