菜单

字形管理

相关源文件

Nerd Fonts 中的字形管理系统负责组织、映射并提供对 Nerd Fonts 中包含的各种字形(图标)的访问。该系统管理从 SVG 源文件到各种格式(如 Unicode 码点、CSS 类和 shell 变量)的字形表示的工作流程。

有关 Nerd Fonts 中包含的特定图标集的信息,请参阅支持的字形。有关这些字形如何集成到字体中的详细信息,请参阅字体修补系统

系统概览

字形管理系统由多个相互连接的组件组成,这些组件以各种格式定义、映射和公开字形。

字形管理架构

来源:src/svgs/icons.tsv glyphnames.json css/nerd-fonts-generated.min.css css/nerd-fonts-generated.css

字形定义与映射

SVG 源文件

字形系统的基础是存储在 src/svgs/ 目录中的 SVG 矢量图形文件集合。每个 SVG 文件代表一个将包含在字体中的字形。

SVG 文件示例包括

  • css_nf.svg: CSS 徽标
  • vitruvian_nf.svg: 维特鲁威人图标
  • chuck_nf.svg: ChucK 编程语言徽标
  • ruby_nf.svg: Ruby 编程语言徽标

来源:src/svgs/css_nf.svg src/svgs/vitruvian_nf.svg src/svgs/chuck_nf.svg src/svgs/ruby_nf.svg

使用 icons.tsv 进行字形映射

icons.tsv 文件是中央映射文件,它将 SVG 文件与以下内容关联起来:

  1. 数字偏移量(码点)
  2. 在 shell 变量和 CSS 类中使用的逻辑名称

icons.tsv 的格式

offset | name (in i_*.sh) | filename (.svg)

例如

000 | i_custom_folder_npm | npm-folder_nf.svg
001 | i_custom_folder_git | git-folder_nf.svg
001 | i_custom_folder_git_branch

请注意,第三个条目是一个别名(与前一个条目具有相同的偏移量但名称不同),因此省略了文件名。

来源:src/svgs/icons.tsv15-19

字形标识符和命名约定

字形标识符遵循结构化的命名约定

i_[prefix]_[name]

其中

  • i_ 是所有字形的通用前缀
  • [prefix] 表示字形所属的集合(例如,customseti
  • [name] 是字形的具体名称

此约定出现在 icons.tsv 中,并延伸到 shell 变量和 CSS 类。

输出格式

字形管理系统生成多种输出格式,以便在不同上下文中使用字形。

JSON 映射 (glyphnames.json)

glyphnames.json 文件将字形标识符映射到其 Unicode 字符和码点,主要用于网页集成。

glyphnames.json 的结构

来源:glyphnames.json1-6

Shell 变量 (i_*.sh)

Shell 变量文件提供变量定义,用于在终端应用程序中使用字形。这些文件根据字形名称中使用的前缀命名(例如,前缀为 i_seti_ 的字形使用 i_seti.sh)。这些文件被聚合到一个综合性的 i_all.sh 文件中。

CSS 生成

CSS 文件根据 JSON 映射生成,并提供 CSS 类,用于在 Web 应用程序中使用字形。

CSS 结构

来源:css/nerd-fonts-generated.css8-36 css/nerd-fonts-generated.min.css1-7

字形集

Nerd Fonts 将字形组织成集合,每个集合在标识符中都有自己的前缀

字形集前缀

前缀描述示例
cod-VSCode/Codiconscod-account, cod-activate_breakpoints
custom-自定义 Nerd Fonts 图标custom-ada, custom-asm, custom-css
dev-开发者相关图标dev-aarch64, dev-angular, dev-css3
seti-Seti 图标seti_stylus, seti_project

来源:glyphnames.json src/svgs/icons.tsv22-29

添加新字形

向 Nerd Fonts 添加新字形的过程包括以下步骤

新字形工作流程

来源:src/svgs/icons.tsv1-13

icons.tsv 中的条目格式

添加新字形时,您需要按照以下格式向 icons.tsv 添加一个条目

[next-offset] | i_[prefix]_[name] | [filename].svg

对于别名,请使用相同的偏移量但不同的名称,并省略文件名

[same-offset] | i_[prefix]_[alias-name]

如文件注释中所述

如果您向目录添加 SVG 文件,您也需要在此处添加一行。保持数字连续。您可以通过添加具有相同偏移量但不同名称的新行来添加别名;这些行上请省略文件名。

来源:src/svgs/icons.tsv5-8

字形使用

字形管理系统支持在不同上下文中使用字形

使用选项

来源:css/nerd-fonts-generated.css glyphnames.json

网页使用示例

终端使用示例

结论

Nerd Fonts 中的字形管理系统提供了一个全面的框架,用于在不同平台和应用程序中定义、组织和使用字形。通过理解该系统,用户可以有效利用提供的字形,贡献者也可以向项目中添加新的字形。

有关系统特定方面的更多详细信息,请参阅字形定义图标集