如何在Observable Framework中基于现有主题修改字体

• 核心问题是CSS导入顺序错误，需先导入官方主题，再加载自定义字体，避免主题基础样式被覆盖。
• Observable的near-midnight主题已基于--sans-serif变量定义全网站字体，无需单独给body、标题元素重复设置font-family，直接修改变量即可完成全局替换。

修正后的style.css代码：

@import url("observablehq:theme-near-midnight.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

:root {
  --sans-serif: "Inter", sans-serif;
}

关键说明 #

1. 调整导入顺序：先加载官方主题，确保布局、颜色等基础样式优先生效；再导入自定义字体，后续的变量覆盖只会替换字体属性，不会破坏原有主题的其他样式逻辑。
2. 利用主题变量：near-midnight主题的所有字体相关样式都已绑定到--sans-serif变量，仅修改该变量就能实现全局字体替换，无需重复编写元素选择器的font-family规则。

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