如何正确使用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": "字体"}

引入字体样式

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

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

代码

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

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

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

多样式代码

{%- liquidassign body_font = settings.type_body_fontassign 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 %}

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！