如何在Shopify的product-template.liquid文件中设置文本粗体并匹配现有字体

<center>
  <font color="black" style="font-weight:700">Free Shipping & Returns</font>
</center>

2. 沿用站点当前字体样式的操作方法 #

不推荐使用已经被HTML5废弃的<font>和<center>标签，用自定义类关联主题全局样式的方式可以实现自动同步站点字体配置，操作步骤如下：

• 第一步：替换product-template.liquid里的原有代码为带自定义类的结构

<div class="product-shipping-notice">
  Free Shipping & Returns
</div>

• 第二步：打开主题Assets目录下的全局样式文件（通常命名为theme.css、base.css或者style.css），添加以下样式代码

.product-shipping-notice {
  text-align: center;
  color: #000;
  font-weight: 700;
  /* 调用主题自带的全局字体变量，自动同步站点字体配置 */
  font-family: var(--font-body-family);
  /* 如果你的主题粗体有单独的字重变量，可以替换成font-weight: var(--font-weight-bold); */
}

说明：大部分Shopify主题都会把字体、字重这类全局配置定义成CSS变量，你可以直接在主题现有样式代码里搜索font-family相关的写法，复制对应的变量名替换上面的var(--font-body-family)即可，后续在Shopify后台自定义主题修改字体时，这段文本的字体会自动同步更新，不需要再次修改代码。

内容的提问来源于stack exchange，提问作者bain