如何正确使用Shopify的font_picker设置

如何正确使用Shopify的font_picker设置

本人兼职 Shopify 前端开发，如有需要可以加v abc939039210

对于刚入行或者没有研究过字体的同学，可能会对 font_picker 的使用存在误解（会误以为只要在settings设置好font_picker,然后通过font-family直接调用就可以）。

本文主要告诉的如何正确使用 Shopify 的 font_picker

设置font_picker

font_picker设置通过生成动态选择界面取代了嵌入式选项，并允许您从Shopify的字体库中进行选择，而无需手动指定可用选项。一旦将此设置添加到settings_schema.json文件中，商家可以从主题编辑器访问Shopify的字体库，并选择他们的首选字体。

代码

  {
    "type": "font_picker",
    "id": "type_body_font",
    "default": "assistant_n4",
    "label": "字体"
  }

引入字体样式

接下来，我们还需要在主题的样式表中引入字体，这样是同学们会漏掉的一步

相关参数可以查看字体过滤器。

代码

{%- liquid
  assign body_font = settings.type_body_font
%}
{% style %}
{{ body_font | font_face }}
body {
  font-family: {{ body_font.family }};
}
{% endstyle %}

在上面的示例中，我们可以看到我们已经成功的引入字体并使用它，但是你可以看到我们设置了 Bold 并没有明显加粗（不同浏览器加粗情况会有所不同）。

为此，我们还需要为其 bold 匹配文本元素样式。（对于字体的不同属性我们都需要为其配置文本元素样式，如果没有配置，则会按照浏览器自身的规则进行处理）

多样式代码

{%- liquid
  assign body_font = settings.type_body_font
  assign body_font_bold = body_font | font_modify: 'weight', 'bold'
  assign body_font_italic = body_font | font_modify: 'style', 'italic'
  assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

{% style %}
{{ body_font | font_face }}
{{ body_font_bold | font_face }}
{{ body_font_italic | font_face }}
{{ body_font_bold_italic | font_face }}
body {
  font-family: {{ body_font.family }};
}
{% endstyle %}

通过上图我们可以看出，是否匹配文本元素样式两者存在明显差距