无法复现PyData文档字体：Segoe UI Semibold未正常显示求助

我尝试复刻PyData文档的字体样式，直接从官网获取了自定义CSS，但页面标题始终显示普通Segoe UI，而目标效果是Segoe UI Semibold。修改CSS中的字体权重参数后没有任何变化。

当前custom.css代码：

html {
  /*****************************************************************************
  * Font features used in this theme
  */

  // base font size - applied at body/html level
  --pst-font-size-base: 1rem;

  // heading font sizes based on a medium contrast type scale
  // - see: https://github.com/Quansight-Labs/czi-scientific-python-mgmt/issues/97#issuecomment-2310531483
  --pst-font-size-h1: 2.625rem;
  --pst-font-size-h2: 2.125rem;
  --pst-font-size-h3: 1.75rem;
  --pst-font-size-h4: 1.5rem;
  --pst-font-size-h5: 1.25rem;
  --pst-font-size-h6: 1rem;

  // smaller than heading font sizes
  --pst-font-size-milli: 0.9rem;

  // Font weights
  --pst-font-weight-caption: 300;
  --pst-font-weight-heading: 600;

  // Font family
  // These are adapted from https://systemfontstack.com/ */
  --pst-font-family-base-system: -apple-system, "BlinkMacSystemFont", "Segoe UI",
    "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --pst-font-family-monospace-system: "SFMono-Regular", "Menlo", "Consolas",
    "Monaco", "Liberation Mono", "Lucida Console", monospace;
  --pst-font-family-base: var(--pst-font-family-base-system);
  --pst-font-family-heading: var(--pst-font-family-base-system);
  --pst-font-family-monospace: var(--pst-font-family-monospace-system);
}

$line-height-body: 1.65;
$fa-font-path: "vendor/fontawesome/webfonts/";

对比效果：

• 我的页面渲染效果：
• PyData文档渲染效果：

解决方案 #

问题核心在于：常规的Segoe UI字体栈无法保证浏览器加载到Semibold变种，且主题默认样式可能覆盖了你的自定义变量。按以下步骤修改CSS：

1. 单独指定标题字体为Segoe UI Semibold，把标题字体家族的优先级提到最高；
2. 直接为标题元素强制应用样式，确保权重足够覆盖主题默认设置。

修改后的custom.css代码：

html {
  /*****************************************************************************
  * Font features used in this theme
  */

  // base font size - applied at body/html level
  --pst-font-size-base: 1rem;

  // heading font sizes based on a medium contrast type scale
  // - see: https://github.com/Quansight-Labs/czi-scientific-python-mgmt/issues/97#issuecomment-2310531483
  --pst-font-size-h1: 2.625rem;
  --pst-font-size-h2: 2.125rem;
  --pst-font-size-h3: 1.75rem;
  --pst-font-size-h4: 1.5rem;
  --pst-font-size-h5: 1.25rem;
  --pst-font-size-h6: 1rem;

  // smaller than heading font sizes
  --pst-font-size-milli: 0.9rem;

  // Font weights
  --pst-font-weight-caption: 300;
  --pst-font-weight-heading: 600;

  // Font family
  // 为标题单独指定Segoe UI Semibold，优先加载粗体变种
  --pst-font-family-heading: "Segoe UI Semibold", "Segoe UI", -apple-system, "BlinkMacSystemFont", 
    "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --pst-font-family-base-system: -apple-system, "BlinkMacSystemFont", "Segoe UI",
    "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --pst-font-family-monospace-system: "SFMono-Regular", "Menlo", "Consolas",
    "Monaco", "Liberation Mono", "Lucida Console", monospace;
  --pst-font-family-base: var(--pst-font-family-base-system);
  --pst-font-family-monospace: var(--pst-font-family-monospace-system);
}

// 强制为标题元素应用样式，确保覆盖主题默认设置
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pst-font-family-heading) !important;
  font-weight: var(--pst-font-weight-heading) !important;
}

$line-height-body: 1.65;
$fa-font-path: "vendor/fontawesome/webfonts/";

额外检查点 #

• 确认你的系统已安装Segoe UI Semibold字体（Windows默认自带，macOS/Linux可能需要手动安装）；
• 用浏览器开发者工具（F12）查看标题元素的计算样式，确认font-family和font-weight已正确应用。

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