Chrome中CSS calc属性无效导致Bootstrap 5 fs-1字体大小不生效

问题原因 #

该问题是典型的calc()语法错误导致的兼容性差异：
CSS 规范明确要求 calc() 内的加减运算符两侧必须保留空格，你看到的无效属性值calc(1.375rem+1.5vw)中，+号前后没有空格，属于语法不规范。
Safari 对非标准语法的容错度更高，因此可以正常解析该写法，但 Chromium 内核的浏览器（Chrome、Edge等）会严格校验CSS语法，直接将不符合规范的calc()判定为无效属性。
正常情况下 Bootstrap 5 原生的响应式字体大小规则已经加了空格，出现该问题一般是自定义修改Bootstrap源码、或者CSS打包压缩工具误删了calc()内的空格导致的。

解决方案 #

• 修复calc()语法：将对应样式规则修改为calc(1.375rem + 1.5vw) !important，给+号两侧各加一个空格即可，修改后所有主流浏览器都能正常解析。
• 调整压缩工具配置：如果是打包时CSS压缩工具自动移除了calc()内的空格，需要关闭压缩规则中「优化calc表达式空格」的相关配置，避免打包时误删必要空格。
• 临时覆盖规则（不需要响应式字体大小时可使用）：在全局自定义样式中添加如下规则覆盖默认样式即可：

.fs-1 {
  font-size: 2.5rem !important;
}

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