字体与图标资源

这页适合作为“界面视觉基础素材入口”。字体和图标选型看起来像小事，但它们会持续影响界面一致性、加载性能、跨平台显示和品牌感。

先按用途选

• 终端和编辑器：优先编程字体
• 中文正文排版：优先中文字体
• Web 页面主字体：优先可控的 Web 字体方案
• 组件图标系统：优先统一来源的图标库
• 品牌图标和社媒图标：优先品牌类图标集

真正重要的不是资源越多越好，而是项目里是否能长期保持“同一层级用同一套视觉规则”。

编程字体

# 通过 Scoop 安装
scoop bucket add nerd-fonts
scoop install FiraCode-NF
scoop install JetBrainsMono-NF

中文字体

Web 字体

Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

自托管（推荐）

使用 Fontsource：

pnpm add @fontsource-variable/inter

import "@fontsource-variable/inter";

字体加载优化

/* font-display 控制加载行为 */
@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-display: swap; /* 先用系统字体，加载完切换 */
}

<!-- 预加载关键字体 -->
<link
  rel="preload"
  href="/fonts/inter.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

推荐搭配方式

一个比较稳的组合通常是：

• 代码区：一种编程字体
• 中文正文：一种中文主字体
• 英文 / UI：一种无衬线 UI 字体
• 图标：一种主图标库

尽量不要在同一个项目里长期混用过多字体和图标风格，否则界面会显得很散。

图标库

UnoCSS Icons（本项目使用）

<!-- 直接用 class -->
<span class="i-carbon-home" />
<span class="i-mdi-github" />

支持所有 Iconify 图标集。

Lucide

pnpm add lucide-vue-next

<script setup>
import { Home, Settings, User } from "lucide-vue-next";
</script>

<template>
  <Home :size="24" />
</template>

其他图标资源

SVG Sprite

<!-- 定义 -->
<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9v9a1 1 0 01-1 1H4a1 1 0 01-1-1z" />
  </symbol>
</svg>

<!-- 使用 -->
<svg width="24" height="24"><use href="#icon-home" /></svg>

Favicon 生成

<!-- 现代 Favicon 方案 -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

常见问题

本地好看，线上字体很慢

优先检查：

• 是否用了过多字重
• 是否加载了完整字符集
• 是否能改为自托管
• 是否给关键字体做了预加载

图标风格不统一

通常是因为不同组件来源不一致。更稳的做法是：

• 选定一个主图标库
• 只在少数品牌图标场景引入第二套
• 给图标尺寸、线宽和语义命名定规则

为什么 Favicon 改了却不生效

浏览器缓存很重，优先尝试：

• 强制刷新
• 文件名加版本
• 检查不同平台是否还在读旧的 PNG / Apple 图标

风险提醒

• 商用项目要确认字体和图标授权范围
• 不要为了“看起来丰富”而加载大量无用字重和图标资源
• 中文字体体积很大，Web 场景尤其要控制加载成本

延伸阅读

• 设计资源库
• 图像与视频处理
• UnoCSS / Tailwind CSS 速查

参考链接

• Google Fonts — 免费字体
• Fontsource — 自托管字体
• Iconify — 图标框架
• Nerd Fonts — 终端字体补丁