如何在 Magento 2 中更改子主题的字体

Posted by

如何在 Magento 2 中更改子主题的字体

默认情况下,Luma 主题使用名为“Open Sans”、“Helvetica Neue”、Helvetica、Arial、sans-serif 的字体系列,您可以在此处查看。

您可以将此字体用于您的商店,但是,如果您想将其更改为另一种字体。

我想更改字体为:font-family: ‘Inter’, sans-serif; 具体使用方法如下:

  • 第 1 步:声明新的字体
    • 访问 https://fonts.google.com/ 免费字体
    • 选择您要使用的字体
    • 将路径 vendor\magento\theme-frontend-blank\web\css\source\ 中名为 _typography.less 的文件复制到路径 app\design\frontend\panduola\mok\web\css\source\
    • 更改字体
inter 字体

打开地址:https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap

找到

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYAZ9hiJ-Ek-_EeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

删除 _typography.less 里面原来的代码


& when (@media-common = true) { 删除xxxxxx }

复制上面字体代码到 _typography.less 文件中,结果如下:


& when (@media-common = true) {
    /* latin */
   @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
   src:      url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYAZ9hiJ-Ek-_EeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  } 
}
  • 第 2 步:更改默认字体系列名
    • 将路径 vendor\magento\theme-frontend-luma\web\css\source\ 中名为 _variables.less 的文件复制到路径 app\design\frontend\panduola\mok\web\css\source\下面
    • 我们更改变量 @font-family-name__base、@font-family__base 的值,更改后如下:

// Fonts
@font-family-name__base: ‘Inter’;
@font-family__base: @font-family-name__base, sans-serif;

//

  • 我们需要正确导入字体系列名称
  • 第3步 测试并查看结果,运行以下命令行:
php bin/magento setup:upgrade 
php bin/magento setup:static-content:deploy -f 
php bin/magento cache:flush

参考: https://www.youtube.com/watch?v=sdoYJuhHBfo