如何将Vaadin Flow 24.1全局字体大小重置为24.0版本设置？

临时恢复至24.0字体大小的方案 #

方式一：通过全局CSS覆盖主题变量 #

在项目的frontend/styles/shared-styles.css（或其他全局样式文件）中添加以下代码：

html {
  --lumo-font-size-xs: 0.75rem;
  --lumo-font-size-s: 0.875rem;
  --lumo-font-size-m: 1rem;
  --lumo-font-size-l: 1.125rem;
  --lumo-font-size-xl: 1.25rem;
  --lumo-font-size-xxl: 1.5rem;
  --lumo-font-size-xxxl: 2rem;
}

以上是Vaadin 24.0中Lumo主题的默认字体大小变量，覆盖后即可还原原有显示效果。

方式二：通过Java代码设置主题变量 #

若习惯用Java控制样式，可在UI初始化方法中添加：

@Override
protected void init(VaadinRequest request) {
  getElement().getStyle().set("--lumo-font-size-xs", "0.75rem");
  getElement().getStyle().set("--lumo-font-size-s", "0.875rem");
  getElement().getStyle().set("--lumo-font-size-m", "1rem");
  getElement().getStyle().set("--lumo-font-size-l", "1.125rem");
  getElement().getStyle().set("--lumo-font-size-xl", "1.25rem");
  getElement().getStyle().set("--lumo-font-size-xxl", "1.5rem");
  getElement().getStyle().set("--lumo-font-size-xxxl", "2rem");
}

全局自定义字体大小 #

如果不需要严格还原24.0的字体，可自行调整上述变量的数值。比如修改基础字号--lumo-font-size-m为1.1rem，其他字号会按Lumo的默认比例自动适配；也可以单独调整每个变量，实现自定义的字体层级。

官方修复进展 #

官方已针对该字体大小变更问题创建修复任务，预计后续补丁版本会正式解决，届时无需手动修改即可恢复原有字体大小。

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