火狐浏览器中使用antialiased与grayscale出现无效属性值求助

首先，你遇到的「Invalid property value」报错很明确——Windows版本的Firefox 60.0.1并不支持-moz-osx-font-smoothing这个CSS属性。这个属性是Firefox专门为macOS系统设计的，用来优化OS X平台的字体渲染效果，放到Windows版Firefox里自然就成了无效属性，浏览器会直接标记报错。

至于-webkit-font-smoothing: antialiased，这是Chrome、Safari这类WebKit内核浏览器的私有属性，Firefox本身不识别-webkit-前缀的属性，所以只会默默忽略它，不会报错。

接下来给你针对性的解决办法：

分平台适配CSS #

你可以针对不同系统的Firefox分别设置属性，同时保留对Chrome的支持：

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    /* 适配Chrome、Safari等WebKit内核浏览器 */
    -webkit-font-smoothing: antialiased;
    /* 适配macOS平台的Firefox */
    -moz-osx-font-smoothing: grayscale;
    /* 尝试适配Windows平台的Firefox（部分版本支持） */
    -moz-font-smoothing: antialiased;
}

额外优化建议 #

1. Windows版Firefox的字体平滑限制：
   Windows系统的Firefox字体渲染逻辑和macOS、Chrome差异较大，它更多依赖系统本身的字体平滑设置。如果-moz-font-smoothing: antialiased对你的版本无效，你可以检查系统的「ClearType文本」设置（Windows控制面板里的显示选项），开启ClearType通常能提升字体渲染的平滑度。

2. 字体选择优化：
   使用跨平台表现更一致的无衬线字体，比如：

   body {
       font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
   }
   

   这类字体在不同系统和浏览器里的渲染效果更统一，能减少平滑度差异带来的视觉感受不同。

3. 字号调整：
   避免使用过小的字号（比如小于12px），小字号在不同渲染引擎下更容易出现模糊或锯齿，适当放大字号能自然提升可读性和平滑感。

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