WordPress 6.5将运送 期待已久的字体库，该功能使您可以直接从网站编辑器管理字体。从表面上看，这可能主要是面向用户的工具，但是混合物中也有几种开发人员。
在这篇文章中，您将学习如何注册自定义字体集合。这是字体库的子功能，可让您定义主题或插件用户可以在其站点上安装的字体集。然后，他们可以通过使用这些字体通过 样式 面板或直接在帖子，模板和图案中。
默认情况下，WordPress带有单个集合的船舶，该集合使您可以从Google字体库中安装字体。但是，作为开发人员，您可以通过构建自定义收藏品来提供更具策划的体验。
目录
字体集合的工作方式
要在WordPress 6.5中找到字体库，您必须转到 外观>编辑器 在管理员中。然后，选择 样式 面板（半圆图标）。在该面板中，选择 排版 您应该看到一个新设置图标，该图标具有 管理字体：
如果您尚不熟悉导航界面，那会有些隐藏。但是它位于所有其他排版设置并肩作用。
单击 管理字体 按钮，新的 字体 将出现显示几个选项卡的模态，如下屏幕截图：
所示的三个选项卡是：
- 图书馆： 这将显示您主题的所有字体以及通过字体库安装的字体。
- 上传： 允许您直接从计算机上传字体文件。
- Google字体： 这是使用WordPress发行的默认字体集合，让您安装任何Google字体。
当您从中选择字体时 Google字体 收藏集，将出现一个新的面板，可让您安装您想要的网站字体的变体：
重要的是要注意，这些字体存储在用户的本地/wp-content/uploads/fonts文件夹。此过程与默认集合和您在主题中注册的任何自定义集合相同。
注册字体集合
有两种注册字体的方法。第一种方法仅使用PHP来定义集合及其字体系列。第二种方法使用PHP注册该集合，但JSON定义了字体系列。我们将在本教程中介绍这两种方法。
对于本教程，我将专注于通过主题注册自定义集合。但是，您当然可以从插件注册集合 – 您只需要更改任何文件路径即可指向您的插件文件夹。
注册功能
WordPress提供了用于注册字体集合的辅助功能wp_register_font_collection()。看看它的签名：
wp_register_font_collection( string $slug, array $args );该功能接受两个参数：
$slug： 您收藏的唯一标识符，该标识符仅包含字母数字字符，破折号和下划线。最好的做法是将其带有您的主题或插件slug。$args： 定义您的字体集合的一系列论点：name： 该系列的人类可读标签，应国际化。description： 该集合的国际化描述，在UI中显示。font_families： 一个字体家庭定义或包含文件路径的字符串或包含该集合的JSON文件的字符串（您将学习如何定义下面的家庭）。categories： 一系列类别。每个类别都应是一个包含的数组：name： 该类别的国际化标签。slug： 一个独特的sl，仅包含字母数字，破折号和下划线。
要注册字体集合，您应该在 init 钩。在本教程的其余部分中，您将使用名为的单个功能来工作themeslug_font_collections()，这是对此钩子的动作。
继续将此代码添加到您的主题functions.php文件以设置所有内容：
add_action( 'init', 'themeslug_font_collections' );
function themeslug_font_collections() {
// Register or unregister font collections here.
}字体家庭定义
在向前发展之前，重要的是要了解如何在WordPress中定义字体家庭。如果您熟悉 定义字体家庭的格式 在theme.json，这会感觉相似。
以下是一系列字体家庭的一个例子。第一个是系统字体，第二个是网络字体：
$font_families = [
[
'font_family_settings' => [
'fontFamily' => 'system-ui, sans-serif',
'slug' => 'system-ui',
'name' => __( 'System UI', 'themeslug' ),
],
'categories' => [ 'sans-serif' ]
],
[
'font_family_settings' => [
'name' => __( 'Roboto Flex', 'themeslug' ),
'slug' => 'roboto-flex',
'fontFamily' => 'Roboto Flex, sans-serif',
'fontFace' => [
[
'src' => 'https://fonts.gstatic.com/s/robotoflex/v9/NaN4epOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf3e0O-gn5rrZCu20YNYG0EACUTNK-QKavMlxGJI8dxef0jQ.woff2',
'fontWeight' => '400',
'fontStyle' => 'normal',
'fontFamily' => 'Roboto Flex',
'preview' => 'https://s.w.org/images/fonts/17.7/previews/roboto-flex/roboto-flex-400-normal.svg'
]
]
],
'categories' => [ 'sans-serif' ]
]
];字体家庭定义包括以下论点：
font_family_settings： 定义字体家族的一系列设置，该设置符合标准theme.json定义字体家庭的格式：name： 字体家族的人类可读标题。slug： 一个独特的家庭，仅包含字母数字，破折号和下划线。fontFamily： 将映射到CSS的有效值font-family价值。通常，这将是有后备家庭的家庭字体堆栈。fontFace：（选修的）一系列字体面孔映射到@font-faceCSS AT规则。这是包括URL中的Web字体的必要条件。单个面部（变体）的格式应为：fontFamily： 有效的CSSfont-family描述符。fontWeight： 有效的CSSfont-weight价值。fontStyle： 有效的CSSfont-style价值。fontStretch： 有效的CSSfont-stretch价值。src： 指向字体文件的文件URL。preview：（选修的）指向图像的文件网址，用于预览特定字体面。如果未定义，src资产加载在浏览器中以渲染预览。
preview：（选修的）指向预览字体家族的图像的文件URL。如果未定义，src最接近普通400字体面的资产已在浏览器中加载，以呈现预览。
categories： 字体系列的一系列类别sl（为收集注册）。
注册Web字体和preview图像既不提供font_family_settings也不fontFace，WordPress将通过该字体自动加载字体fontFace.src文件。这可能会对大型收藏产生性能影响，因此建议包括Web字体的预览图像。
在这一点上，您已经了解了构成该系列中的集合和字体家庭的基础部分。可以立即消费很多信息。因此，让我们看一个现实世界中的例子，然后将我们所学到的知识介绍为实践。
通过PHP注册字体集合
注册字体集合的最直接方法是通过PHP。您可以从一个文件中完成所有操作，这是理想的选择，如果您只有几个字体供收藏。如果您有很多字体，则可能需要使用下一节中描述的JSON方法。
我最喜欢的与印刷相关的网站之一是 现代字体堆栈，其中有一个全面的系统字体列表。我认为从该站点中获取一些字体堆栈并将它们带到WordPress字体库是一个好主意。这也是一个更容易的第一个示例，因为系统字体不需要字体文件。
在 – 的里面themeslug_fonts_collection()您添加到的功能functions.php之前，粘贴此代码：
wp_register_font_collection( 'modern-stacks', [
'name' => __( 'Modern Stacks', 'themeslug' ),
'description' => __( 'A collection of modern system fonts.', 'themeslug' ),
'font_families' => [
[
'font_family_settings' => [
'fontFamily' => 'system-ui, sans-serif',
'slug' => 'system-ui',
'name' => __( 'System UI', 'themeslug' ),
],
'categories' => [ 'sans-serif' ]
],
[
'font_family_settings' => [
'fontFamily' => "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif",
'slug' => 'transitional',
'name' => __( 'Transitional', 'themeslug' ),
],
'categories' => [ 'serif' ]
],
[
'font_family_settings' => [
'fontFamily' => "'Nimbus Mono PS', 'Courier New', monospace",
'slug' => 'monospace-slab-serif',
'name' => __( 'Monospace Slab Serif', 'themeslug' ),
],
'categories' => [ 'monospace', 'serif' ]
],
[
'font_family_settings' => [
'fontFamily' => "'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive",
'slug' => 'handwritten',
'name' => __( 'Handwritten', 'themeslug' ),
],
'categories' => [ 'handwriting' ]
]
],
'categories' => [
[
'name' => __( 'Handwriting', 'themeslug' ),
'slug' => 'handwriting'
],
[
'name' => __( 'Monospace', 'themeslug' ),
'slug' => 'monospace'
],
[
'name' => __( 'Sans Serif', 'themeslug' ),
'slug' => 'sans-serif'
],
[
'name' => __( 'Serif', 'themeslug' ),
'slug' => 'serif'
]
]
] );保存文件并刷新浏览器后，您应该看到 现代堆栈 重新打开时标签 字体 模态：
此时，如果要测试安装其中一种字体，只需遵循与之前的相同过程。
因为系统字体没有与之关联的字体文件，所以在/wp-content/uploads/fonts目录。
通过JSON注册字体集合
从PHP中管理字体家庭可能会变得有些笨拙，因为您为您的收藏添加了更多信息。JSON通常是存储这些较大数据集合的首选格式，WordPress支持添加字体系列为您的收集添加。
让我们将其混合一点，添加新的幻想网络字体集合。与上一节的系统字体不同，这些字体将具有将安装的物理文件。
首先，在您的内部添加此代码themeslug_font_collections()您已经创建的功能functions.php：
wp_register_font_collection( 'fantasy', [
'name' => __( 'Fantasy', 'themeslug' ),
'description' => __( 'A collection of fantasy fonts.', 'themeslug' ),
'font_families' => get_theme_file_path( 'assets/fonts/fantasy.json' ),
'categories' => [
[
'name' => __( 'Display', 'themeslug' ),
'slug' => 'display'
]
]
] );请注意font_families参数与上一节中的PHP示例大不相同。您没有传递字体家庭定义数组，而是将文件路径传递给JSON文件。
现在添加一个新的/assets/fonts/fantasy.json在您的主题中文件。您将使用它在您的收藏中注册字体家庭。
对于您的JSON文件，您可以设置两个顶级属性：
$schema： 对WordPress的引用 字体收集JSON模式，这可以在大多数现代代码编辑器中添加提示。font_families： 一系列字体家庭定义。与PHP方法的区别在于，您现在必须使用JSON格式。
在此练习中，我引用了Google字体和WordPress.org的URLsrc和preview争论。您可以通过WordPress看到一个完整的示例 font-collection.json 文件。您也可以选择使用托管这些资源的自定义URL，例如GitHub。
现在将以下代码添加到您的fantasy.json文件：
{
"$schema": "https://schemas.wp.org/trunk/font-collection.json",
"font_families": [
{
"font_family_settings": {
"name": "Henny Penny",
"fontFamily": "Henny Penny, system-ui",
"slug": "henny-penny",
"fontFace": [
{
"src": "https://fonts.gstatic.com/s/hennypenny/v17/wXKvE3UZookzsxz_kjGSfMQvt3M7tMDT.woff2",
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "Henny Penny",
"preview": "https://s.w.org/images/fonts/17.7/previews/henny-penny/henny-penny-400-normal.svg"
}
],
"preview": "https://s.w.org/images/fonts/17.7/previews/henny-penny/henny-penny.svg"
},
"categories": [ "display" ]
},
{
"font_family_settings": {
"name": "MedievalSharp",
"fontFamily": "MedievalSharp, system-ui",
"slug": "medievalsharp",
"fontFace": [
{
"src": "https://fonts.gstatic.com/s/medievalsharp/v26/EvOJzAlL3oU5AQl2mP5KdgptAqp6MwvXLDk.woff2",
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "MedievalSharp",
"preview": "https://s.w.org/images/fonts/17.7/previews/medievalsharp/medievalsharp-400-normal.svg"
}
],
"preview": "https://s.w.org/images/fonts/17.7/previews/medievalsharp/medievalsharp.svg"
},
"categories": [ "display" ]
},
{
"font_family_settings": {
"name": "Metamorphous",
"fontFamily": "Metamorphous, system-ui",
"slug": "metamorphous",
"fontFace": [
{
"src": "https://fonts.gstatic.com/s/metamorphous/v20/Wnz8HA03aAXcC39ZEX5y1330OSCthTsmaQ.woff2",
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "Metamorphous",
"preview": "https://s.w.org/images/fonts/17.7/previews/metamorphous/metamorphous-400-normal.svg"
}
],
"preview": "https://s.w.org/images/fonts/17.7/previews/metamorphous/metamorphous.svg"
},
"categories": [ "display" ]
}
]
}保存文件并刷新浏览器窗口后，您应该看到一个新的 幻想 标签带有您的注册字体 字体 模态：
与以前一样，可以像其他任何字体一样安装和使用。
通过JSON注册字体家族为该集合注册字体家族的缺点是，无法为字体文件源和预览图像引用动态URL（例如主题文件夹）。并通过第三方网站托管这些资产可以运行 主题审查指南（仅允许Google字体CDN）。在某些情况下，您可能别无选择，只能使用PHP方法。
未注册的字体收集
要解开字体集合，您必须使用wp_unregister_font_collection()功能，接受一个$slug来自先前注册的字体集合的参数：
wp_unregister_font_collection( string $slug );您可以使用此功能来解开由第三方插件注册的收集，父母主题（如果您构建子主题）甚至WordPress。因此，让我们深入研究它如何工作的现实示例。
解开Google字体集合
如果您一直在主题上进行主题，那么您现在可能知道，将整个Google字体库访问最终用户是打破主题精心制作的版式的秘诀。 并非所有字体都相同。
如果您想要更精心策划的体验，我建议禁用默认的Google字体集合，仅提供您知道的字体足够良好的主题。
要解开Google字体集合，请在您的内部添加此代码themeslug_font_collections()功能中的功能functions.php：
wp_unregister_font_collection( 'google-fonts' );当你打开 字体 模式，您只应该看到 现代堆栈 和 幻想 您之前注册的收集：
主题的局限性
自定义字体集合（以及总体字体库功能）的最大限制是，没有办法将上传的字体映射到您的语义命名字体定义中的字体定义theme.json文件。这是 推荐的练习 在主题手册和默认二十四个主题使用的命名约定中定义。
在实际层面上，这意味着用户必须定义如何在 样式 网站编辑器中的面板。使用语义名称和映射上载字体的方法，它们将自动应用于设计，但目前不支持。
对于启用字体库或定义自定义字体集合的主题构建器，请确保在用户文档中注意如何应用安装字体。
即使有了这种限制，字体收集也确实很酷，并且对于想要控制其版式的用户开辟了很多灵活性。