Shopify 店铺字体与行高设置

Shopify OS 2.0 Dawn 模板的默认字体是 Assistant,可以从 Google Fonts 查看:

https://fonts.google.com/specimen/Assistant

由于 Assistant 并不是用户的系统自带字体,因此实际需要从网络下载。从 HTML 源码亦可看出:

@font-face {
  font-family: Assistant;
  src: url("https://fonts.shopifycdn.com/assistant/assistant_n4...");
}

为了加快店铺加载速度,我们可以在模板自定义中修改为系统默认字体。按 Shopify 的开发文档所述

https://shopify.dev/themes/architecture/settings/fonts#system-fonts

可以选择以下三种系统文件类型:

  • mono – 等宽字体
  • sans-serif – 无衬线字体
  • serif – 衬线字体

在店铺后台模板 – 模板设置 – 版式中,可以修改标题与正文的字体,如下图:

Assistant 需要从网络下载

因此我们可以修改为系统字体:

选择 Sans-serif

选择 Sans-serif 后保存,HTML 代码可见变化:

:root {
        --font-body-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
... }

如此避免了从网络下载字体,而系统默认字体其实也很漂亮。

修改行高

可以通过代码修改:

京ICP备12052177号-1