> For the complete documentation index, see [llms.txt](https://ascent.webvista.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ascent.webvista.studio/webvista-studio-docs/quan-ju-she-zhi/pai-ban-zi-ti.md).

# 排版（字体）

Shopify 模板中的字体设置允许您为整个商店选择和应用标题字体和正文字体。通过调整字体样式，您可以确保商店的视觉效果与品牌形象一致，同时提高内容的可读性。Shopify支持的字体可参考

<figure><img src="/files/GmoYyxXgl1XxQWpx0qP7" alt=""><figcaption></figcaption></figure>

### 使用步骤

* **进入字体设置**
  * 在 Shopify 后台，导航到“自定义主题”页面。
  * 打开模板设置并展开“字体”设置部分。
* **设置标题字体**
  * 在“标题字体”部分，点击“更改”按钮。
  * 从字体库中选择您喜欢的字体，并调整字体样式（如粗体、斜体等）。
  * 设置标题字体字间距，可选项有稍小，正常，稍大，偏大
  * 选择后，点击“保存”应用更改。
* **设置正文字体**
  * 在“正文字体”部分，点击“更改”按钮。
  * 选择适合正文内容的字体，并调整样式。
  * 设置正文字体字间距，可选项有稍小，正常，稍大
  * 完成选择后，点击“保存”应用。
* **设置装饰性字体**
  * 在“装饰性字体”部分，点击“更改”按钮。
  * 选择适合的字体，并调整样式。
  * 设置装饰性字体字间距，可选项有稍小，正常，稍大
  * 完成选择后，点击“保存”应用。

<mark style="color:orange;">装饰性字体最好选择草写或非传统风格，以增强设计的创造力和独特性。</mark>

* **字体优化**
  * 注意，选择不同的字体可能会影响网站的加载速度。建议选择加载速度较快的系统字体或已优化的网络字体。
  * 如果对字体性能有疑问，您可以点击提供的链接了解更多信息。

### 建议

* **对比与协调**：确保标题字体和正文字体在风格上既有对比，又能协调一致。通常，无衬线字体和衬线字体的搭配会产生不错的效果。
* **品牌契合度**：选择符合品牌调性的字体组合。比如，奢侈品牌可以选择更经典的衬线字体，而科技品牌则更适合现代的无衬线字体。
* **可读性**：无论选择何种字体组合，确保正文字体具有良好的可读性，尤其是在移动设备上。

### 几种常见搭配

#### 1. **Playfair Display + Lato**

* **标题字体**：Playfair Display (优雅的衬线字体，适合用于高端和时尚品牌)
* **正文字体**：Lato (现代、易读的无衬线字体，适合长篇文本)

#### 2. **Montserrat + Merriweather**

* **标题字体**：Montserrat (时尚的无衬线字体，适合现代风格的商店)
* **正文字体**：Merriweather (可读性强的衬线字体，适合提升文本的温暖感)

#### 3. **Oswald + Open Sans**

* **标题字体**：Oswald (简洁、醒目的无衬线字体，适合大标题)
* **正文字体**：Open Sans (广泛使用的无衬线字体，适合各类商店)

#### 4. **Raleway + Roboto**

* **标题字体**：Raleway (精致的无衬线字体，适合优雅和现代风格)
* **正文字体**：Roboto (多功能的无衬线字体，具备良好的可读性)

#### 5. **Bebas Neue + Source Sans Pro**

* **标题字体**：Bebas Neue (极具表现力的无衬线字体，适合强烈的视觉效果)
* **正文字体**：Source Sans Pro (简洁、实用的无衬线字体，适合长篇阅读)

#### 6. **Muli + Georgia**

* **标题字体**：Muli (轻盈的无衬线字体，适合清新、简约风格)
* **正文字体**：Georgia (经典的衬线字体，提升文字的可读性和权威感)