字体 - Shopify主题开发文档

您可以通过以下方式为主题添加字体：

使用 Shopify 字体库中的字体
使用自定义字体

提示
一般来说，字体是一种独立的资源，需要在渲染任何文本之前由浏览器下载，这会影响商店的整体性能。为了提高主题的性能，商家可以使用已安装在客户电脑上的系统字体，从 Shopify 字体库的系统字体类别中选择字体。

Shopify 字体库

Shopify 的字体库是一个字体集合，其中包括系统字体、精选的 Google 字体以及 Monotype 的授权字体。这些字体可在所有 Shopify 在线商店中免费使用，并以 WOFF 和 WOFF2 两种格式提供。
如果字体的 Unicode 范围可用，则每种字体的文件都包含以下 Unicode 范围：

这些字体涵盖了广泛的使用情况。不过，由于授权限制，Shopify 无法包含某些字体。如果您需要使用范围更广的字符，可以使用系统字体、Typekit 和其他解决方案。

要了解有关使用 Shopify 字体库的更多信息，请参阅在主题中添加 Shopify 字体。

注意事项
字体文件的个人访问权限目前不可用

系统字体

系统字体是已经安装在用户电脑上的字体。这样浏览器就无需在渲染文本前下载字体，从而使主题的性能更佳。系统字体与可用字体一起列出，并带有系统徽章，而且会显示在主题编辑器字体选择器的系统字体类别下。

如果选择使用系统字体，那么用于呈现文本的字体将取决于用户的操作系统。有三种通用的系统字体类型。以下是这些类型中的字体示例：

mono – Menlo、Consolas、Monaco、Liberation Mono 和 Lucida Console
sans-serif – BlinkMacSystemFont、Segoe UI、Roboto、Ubuntu 和 Helvetica Neue
serif – Iowan Old Style、Apple Garamond、Baskerville、Times New Roman、Droid Serif、Times 和 Source Serif Pro

自定义字体

如果您想使用Shopify字体库中没有的字体，可以使用Typekit等第三方解决方案中的字体。

对于大多数第三方字体解决方案，你都有以下几种将字体添加到主题中的选择：

通过第三方托管引用字体
将字体文件上传到您的主题

如果您在主题中包含自定义字体，并希望为商家提供选择字体的功能，那么您需要为选择创建一个设置，例如选择设置。然后，在定义相关元素使用哪种字体时，您可以在 CSS 中引用该设置值。

第三方托管字体

如果字体是由第三方托管的，那么他们通常会提供一个<link>标记，以便在你的主题中包含该字体：

<link rel="stylesheet" href="[font-url]">

提示
标签<link>通常包含在 theme.liquid 或你选择的布局文件中。

在主题中托管字体

如果您有自己的字体文件，请按照以下步骤将字体添加到主题中：

非管理员

如果您打算使用 Shopify CLI 将主题推送到商店、上传主题 ZIP 文件、使用 Shopify GitHub 集成，或通过 Shopify 主题商店将字体与主题一起发布，则应将字体存储在主题的 assets 文件夹中。这些步骤应在本地代码编辑器中执行，而不是在管理员代码编辑器中。

将字体文件添加到 assets 目录。
创建 @font-face CSS 规则，以便引用字体。使用 asset_url filter输出字体文件的 URL

@font-face {
  font-family: "Font name";
  src: url("{{ '[font-file-name]' | asset_url }}") format("[font-format]");
}

shopify管理员

如果您想通过 Shopify 管理器为现有主题添加字体，则应将字体存储在 Shopify 管理器的 “文件 “部分。这是因为通过管理代码编辑器将某些类型的字体上传到 assets 目录可能会导致文件损坏。

将字体文件上传到 Shopify 管理器的 “内容”>”文件 “部分。
创建 @font-face CSS 规则，以便引用字体。使用file_url filter 输出字体文件的 URL：

@font-face {
  font-family: "Font name";
  src: url("{{ '[font-file-name]' | file_url }}") format("[font-format]");
}

为您的主题添加 Shopify 字体

以下内容概述了如何在主题中使用 Shopify 字体库中的字体：

1.添加 font_picker 类型设置，允许商家在主题编辑器中选择字体。该设置的值将作为字体对象返回。

2.使用以下 font filters之一加载所选字体或其任何变体：

使用 font_face filter插入默认的 @font-face 声明。
使用 font_url filter访问 CDN URL，以便创建自定义 @font-face 声明。
使用 font_modify filter访问同一系列的字体变体。例如粗体和斜体样式。

3.引用所选字体来设置任何特定的 CSS 样式，如 font-family、font-weight 和 font-style。

原文：https://shopify.dev/docs/themes/architecture/settings/fonts

字体