CSS 集成

概述

Nerd Fonts 提供了生成的 CSS 文件，将所有可用字形映射到易于访问的 CSS 类。这些文件是从仓库中维护的字形定义自动生成的，可供 Web 开发人员在其项目中包含。

来源：glyphnames.json css/nerd-fonts-generated.min.css

CSS 文件结构

Nerd Fonts CSS 主要由两部分组成

字体定义和基础类
单个字形类定义

来源：css/nerd-fonts-generated.min.css7

字体定义

CSS 文件以一个 @font-face 规则开始，用于加载 Nerd Fonts 符号字体。

@font-face {
    font-family: 'NerdFontsSymbols Nerd Font';
    src: url("../fonts/Symbols-2048-em Nerd Font Complete.woff2") format("woff2");
    font-weight: normal;
    font-style: normal
}

来源：css/nerd-fonts-generated.min.css7

基类

CSS 定义了三个基础类，可用于将 Nerd Font 应用于元素：

.nf, .nerd-font, .nerd-fonts {
    font-family: 'NerdFontsSymbols Nerd Font';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

来源：css/nerd-fonts-generated.min.css7

字形类

对于 Nerd Fonts 集合中的每个字形，都定义了一个对应的 CSS 类。类名遵循以下模式：

.nf-[prefix]-[name]

其中

prefix 表示图标集合（如 cod, custom, dev, fa 等）
name 是具体的图标名称

每个类都使用 :before 伪元素来插入相应的 Unicode 字符。

示例

来源：css/nerd-fonts-generated.min.css7

生成过程

CSS 文件是根据存储在 glyphnames.json 中的字形定义自动生成的。这确保了 CSS 始终与可用的字形保持同步。

glyphnames.json 文件包含所有字形的元数据，包括：

字符表示
Unicode 码点
带前缀的名称

这些信息用于生成相应的 CSS 类。

来源：glyphnames.json

图标集合

CSS 类按图标集合组织，每个集合都有自己的前缀

前缀	集合	示例类
cod	VS Code / Codicons	`.nf-cod-account`
custom	自定义图标	`.nf-custom-vim`
dev	开发者/语言图标	`.nf-dev-javascript`
fa	Font Awesome 图标	`.nf-fa-github`

来源：glyphnames.json css/nerd-fonts-generated.min.css

在 Web 项目中使用

步骤 1: 引入 CSS

在 HTML 文档中引入 Nerd Fonts CSS

步骤 2: 使用类

在 Web 项目中使用 Nerd Fonts 主要有两种方式：

方法 1: 专用图标元素

方法 2: 将图标添加到现有元素

来源：css/nerd-fonts-generated.min.css

使用示例

以下是在 Web 项目中使用 Nerd Fonts 图标的实际示例：

查找图标类

要查找图标对应的类，可以：

检查仓库中的 glyphnames.json 文件
查阅生成的 CSS 文件
使用 Nerd Fonts 网站上提供的速查表

glyphnames.json 中的字形名称通过添加 nf- 前缀直接映射到 CSS 类。

来源：glyphnames.json css/nerd-fonts-generated.min.css

版本控制

CSS 文件顶部包含版本信息注释

/*
 *# [Nerd Fonts]  Website: https://www.nerdfonts.com
 *# [Nerd Fonts]  Development Website: https://github.com/ryanoasis/nerd-fonts
 *# [Nerd Fonts]  Version: 3.3.0
 *# [Nerd Fonts]  The following is generated from the build script
 */

更新 Nerd Fonts 时，建议也更新您的 CSS 文件，以确保与任何新增或修改的字形兼容。

来源：css/nerd-fonts-generated.min.css1-6

浏览器兼容性

该 CSS 使用标准 @font-face 定义和伪元素，这些在所有现代浏览器中都受支持。对于旧版浏览器，您可能需要包含除默认使用的 WOFF2 格式之外的其他字体格式。

有关构建和发布过程的更多信息，请参阅构建与发布。

CSS 集成

概述

CSS 文件结构

字体定义

基类

字形类

生成过程

图标集合

在 Web 项目中使用

步骤 1: 引入 CSS

步骤 2: 使用类

方法 1: 专用图标元素

方法 2: 将图标添加到现有元素

使用示例

查找图标类

版本控制

浏览器兼容性

相关信息

本页内容