在 Shopper App 中自定义店铺字体
Shopper App 中的【字体】模块可帮助您统一配置店铺 App 各页面的字体样式，从而保持品牌一致性并提升内容可读性。
在 App 设计编辑器中，您可以设置【主字体】和【辅助字体】，并针对标题、商品名称、价格及正文等关键内容区域精细调整字体样式。所有可用字体均来自 Google Fonts，可确保在不同设备上的兼容性与稳定显示效果。
本文将介绍如何在 Shopper App 中找到字体相关设置，并说明如何针对不同内容类型进行配置。同时，您也将了解如何预览、保存并发布设置，使字体样式生效于整个店铺 App。
字体设置概览与访问路径
店铺 App 的所有字体相关设置均集中管理于 App 设计编辑器的【字体】部分。您可按以下步骤进入字体设置：
- 从 SHOPLINE 后台前往 【渠道】 >【 Shopper App】> 【App 设计】，然后点击【设计】。
在编辑器左侧面板中，点击【字体】。
在此页面中，您可以为 App 内不同内容区域配置字体样式，相关设置分为以下类别：
- 字体：设置整个 App 使用的【主字体】与【辅助字体】
- 标题：自定义不同层级标题的字体样式
- 商品标题：调整商品名称的字体显示方式
- 价格：定义商品价格的字体样式
- 正文：配置一般文字内容的字体样式
Shopper App 以【主字体】与【辅助字体】作为 App 的基础字体。这两种字体仅能在【字体】分类中进行选择与管理。
在【标题】、【商品标题】、【价格】与【正文】等其他分类中，您可以选择套用主字体或辅助字体，并进一步调整其显示方式，包括字体样式、字号、是否大写以及行高等设置。
| 注意：【字体】模块中提供的所有字体均来自 Google Fonts，可确保在不同设备上的一致渲染效果与良好兼容性。 |
设置主字体与辅助字体
在【字体】分类中，您可以通过设置【主字体】与【辅助字体】来定义店铺 App 的基础字体样式。这两种字体将作为其他字体设置的基础。
每种字体均包含以下两个部分：
- 优先字体：优先使用的字体
- 后备字体：当首选字体不支持某些字符时（例如中文、日文或阿拉伯文），系统会自动使用的备用字体
配置主字体与辅助字体
如需配置主字体或辅助字体，请按以下步骤操作：
- 在【字体】分类中，找到【主字体】或【辅助字体】。
在【优先字体】下，点击【重选】，并从 Google Fonts 中选择所需字体。
在【后备字体】下，点击【重选】，并选择一个后备字体，以确保在字符不受支持时文字仍可正常显示。
- （可选）点击【恢复默认】，以还原默认字体设置。
- 在右侧预览区查看字体变更效果。
- 点击【保存】以保留设置，或点击【发布】以立即应用设置。
字体的应用方式说明
此处设置的【主字体】与【辅助字体】本身不会直接决定具体样式，而是会在【标题】、【商品标题】、【价格】与【正文】等分类中被引用。
在这些分类中，您可以选择使用主字体或辅助字体，并进一步调整字体大小、字重、是否大写以及行高等显示细节。
设置跨页面的标题字体
【标题】分类用于配置店铺 App 中各类标题的字体样式，例如页面标题与区块标题。不同层级的标题可分别独立设置。
可用标题层级
Shopper App 在不同页面中支持以下标题层级：
- Heading 1：首页与自定义页面中的组件标题
- Heading 2：商品详情页与购物车页面中的组件标题
- Heading 3：商品详情页中的区块标题与评价标题
- Heading 4：商品详情页中的属性标题
每个标题层级均可独立配置。
设置标题字体
如需配置标题字体，请按以下步骤操作：
- 在 App 设计编辑器的【字体】分类中，点击【标题】。
在【字体】下，选择使用【主字体】或【辅助字体】。
- 找到需要设置的标题层级（一级标题 – 四级标题）。
根据需要调整以下设置：
- 风格：选择字体字重（例如 Regular 400）
- 强制大写：启用后将文字显示为全大写
- 字号：拖动滑块或输入数值设置字号
- 默认行高：启用以使用默认行高，或关闭后自定义行高
- 如需配置其他标题层级，请重复上述步骤。
- 在右侧预览区查看效果。
- 点击【保存】以保留设置，或点击【发布】以立即应用。
设置商品列表页的商品标题字体
【商品标题】分类用于配置商品名称在店铺 App 中的显示方式，该设置适用于【商品列表页】中的商品标题。
如需配置商品标题字体，请按以下步骤操作：
- 在 App 设计编辑器的【字体】面板中，点击【商品标题】。
在【字体】下，选择使用【主字体】或【辅助字体】。
在【商品列表页商品标题】下，调整以下设置：
- 风格：选择字体字重（例如 Regular 400）
- 字号：拖动滑块或输入数值设置字号
- 默认行高：启用以使用默认行高，或关闭后自定义行高
- 在右侧预览区查看效果。
- 点击【保存】以保留设置，或点击【发布】以立即应用。
设置商品列表页的价格字体
【价格】分类用于配置商品价格在店铺 App 中的显示方式。该设置适用于商品列表页中显示的原价、促销价与会员价。
如需配置价格字体，请按以下步骤操作：
- 在 App 设计编辑器的【字体】面板中，点击【价格】。
在【字体】下，选择使用【主字体】或【辅助字体】。
在【商品列表页售价】下，调整以下设置：
- 风格：选择字体字重（例如 Regular 400）
- 字号：拖动滑块或输入数值设置字号
在【商品列表页划线价】下，调整以下设置：
- 风格：选择字体字重（例如 Regular 400）
- 字号：设置划线价的字体大小
- 在右侧预览区查看效果。
- 点击【保存】以保留设置，或点击【发布】以立即应用。
设置正文字体
【正文】分类用于配置店铺 App 中的一般文字内容，例如商品名称、描述、公告与辅助说明文字。
可用正文字体类型
Shopper App 支持以下三种正文字体尺寸：
- 正文－大字：商品名称与分类标题
- 正文－常规：描述性文字，例如公告、摘要、促销信息与评价
- 正文－小字：辅助信息，例如时间、状态与备注
每种正文字体类型均可独立设置。
配置正文字体样式
如需配置正文字体，请按以下步骤操作：
- 在 App 设计编辑器的【字体】面板中，点击【正文】。
在【字体】下，选择使用【主字体】或【辅助字体】。
针对每种正文字体类型（正文－大字／常规／小字），调整以下设置：
- 风格：选择字体字重（例如 Regular 400）
- 字号：拖动滑块或输入数值设置字号
- 默认行高：启用以使用默认行高，或关闭后自定义行高
- 如需设置其他正文字体类型，请重复上述步骤。
- 在右侧预览区查看效果。
- 点击【保存】以保留设置，或点击【发布】以立即应用。
注意与最佳实践
- 先设置字体，再调整样式：建议先在【字体】分类中设置主字体与辅助字体，再于【标题】、【商品标题】、【价格】与【正文】中调整样式，以确保整体排版一致。
- 合理搭配主字体与辅助字体：可将主字体用于主要内容，将辅助字体用于辅助信息，以建立清晰的视觉层级。
- 发布前务必预览效果：请在右侧预览区检查字体显示效果，确保在不同页面上均清晰易读。
- 选择合适的字号与行高：避免使用过小的字号或过紧的行距，尤其是正文字体，以提升移动设备上的阅读体验。
- 多语言内容请启用后备字体：建议保留后备字体设置，以确保首选字体不支持的字符（如中文、日文或阿拉伯文）可正常显示。
- 别忘了发布设置：只有点击【发布】后，字体设置才会对顾客可见。