已发布的页面未使用 theme-set 的 --font-family 和 --header-font-family

错误
1

在已发布的页面上，无法使用主题设置的 --font-family 和 --heading-font-family。

重现步骤：

  • 创建一个主题并在 CSS 中输入以下内容
:root {
    --font-family: CommonTestFont;
    --heading-font-family: CommonTestHeaderFont;
}
  • 并在 color-definitions 中输入以下内容
:root {
    --font-family: ColDefTestFont;
    --heading-font-family: ColDefTestHeaderFont;
}

常规页面将按以下顺序使用它们（优先级高 - 低）

  • 在 common 中定义的变量
  • 由站点设置定义的变量
  • 在 color-definitions 中定义的变量

image

已发布的页面将按以下顺序使用它们（优先级高 - 低）

  • 由站点设置定义的变量
  • 在 color-definitions 中定义的变量
  • 在 common 中定义的变量

image

这里发生了两件事。

  1. color-definitions CSS 文件将站点设置定义的字体变量放在主题 color-definitions 部分的 :root 之后，覆盖了它们
  2. 在已发布的页面上，CSS 加载顺序不同，因为 color-definitions CSS 加载在页面的 body 中，所以其中定义的变量覆盖了主题 common CSS。
1 个赞