字体配置
你可以通过以下方式向主题添加字体：
- 在全局配置 setting_schema.json 中添加 type 为 font_picker 的配置项，并通过谷歌字体库选择字体。
- 使用自定义字体或者其他第三方解决方案。
备注
通常情况下，字体是一个单独的资源，在浏览器渲染任何文本之前需要下载，这会影响商店的整体性能。
将谷歌字体添加到主题
1. 添加 font_picker 控件类型的配置，允许商家在主题编辑器中选择字体。此控件返回含有字体名字的字符串。
2. 获取谷歌字体 CSS 样式
访问 font_picker 控件的返回值，只是单纯的字体名字的字符串；还需要通过谷歌字体 API 获取字体资源 CSS 样式。例如：
https://fonts.googleapis.com/css?family=Bodoni%20Moda
会返回如下 CSS 样式：
/* latin-ext */
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/bodonimoda/v7/aFT67PxzY382XsXX63LUYL6GYFcan6NJrKp-VPjfJMShrpsGFUt8oU7a8Il4snrJcwDiodAY.woff) format('woff');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/bodonimoda/v7/aFT67PxzY382XsXX63LUYL6GYFcan6NJrKp-VPjfJMShrpsGFUt8oU7a8Id4snrJcwDioQ.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
提示
为了提高字体访问效率，我们对全局配置 setting_schema.json 中使用的 font_picker 类型的配置进行了优化，我们会在 SSR 阶段通过谷歌 API 对这些配置的字体尝试获取 CSS 样式并注入到 head 标签中，如下图所示。以满足主题 CSR 阶段能尽快请求字体资源文件。
<style>
/* arabic */
@font-face {
font-family: 'El Messiri';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/elmessiri/v22/K2FhfZBRmr9vQ1pHEey6GIGo8_pv3myYjuXwe55ijDzspLpHh2rHkg.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* cyrillic */
@font-face {
font-family: 'El Messiri';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/elmessiri/v22/K2FhfZBRmr9vQ1pHEey6GIGo8_pv3myYjuXwe55jjDzspLpHh2rHkg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
</style>
3. 引用所选的字体文件
引用所选字体以展示任何特定的 CSS 样式，例如 font-family、font-weight 和 font-style
.title1 {
font-family: Old Standard TT;
font-style: normal;
font-weight: 400;
letter-spacing: 0em;
line-height: 1.4;
}
自定义字体
使用大多数第三方字体解决方案，你有以下选项将字体包含在你的主题中：
第三方托管字体
如果字体由第三方托管，那么他们通常会提供一个 <link> 标签，以便在你的主题中包含该字体：
<link rel="stylesheet" href="[font-url]">
提示
<link> 标签通常包含在 theme.html 文件或你选择的 layout 文件中。
在你的主题中托管字体
如果你有自己的字体文件，请按照以下步骤将字体包含在你的主题中：
如果你计划通过 SHOPLINE CLI 推送你的主题到商店、上传主题 ZIP 文件、使用 SHOPLINE GitHub 集成，或通过 SHOPLINE 在管理后台代码编辑器上传字体文件，那么你应该将字体存储在主题的 assets 文件夹中。
- 将字体文件添加到 assets 目录。
- 创建一个
@font-faceCSS 规则代码，以便你可以引用字体。使用 asset_url helper 输出字体文件的 URL：
@font-face {
font-family: 'Font name';
src: url('{{ asset_url '[font-file-name]' }}') format('[font-format]');
}
这篇文章对你有帮助吗？
