在 Mozilla 中使用抗锯齿和灰度时属性值无效

Posted 2023-03-06

【中文标题】在 Mozilla 中使用抗锯齿和灰度时属性值无效

【英文标题】：Invalid property value when using antialiased and grayscale in Mozilla

【发布时间】：2018-11-09 16:13:08

【问题描述】：

字体平滑在 Mozilla（版本 60.0.1（64 位））中不起作用。我在我的 CSS 中添加了代码

body,html
margin: 0;
padding: 0;
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

我在 Mozila 收到 Invalid property value。

它在 Chrome 中显示

知道为什么它不起作用吗？ 你会帮我解决这个问题吗？ 提前致谢

【问题讨论】：

你使用的是什么操作系统？

@ChaseIngebritson，我检查了 Windows 10 也检查了 Mac 书。今天我刚刚更新了我的浏览器

我添加了一篇关于您问题原因的最佳猜测的帖子。可能您在 Macbook（25 之前）上使用的是旧版本的 Firefox。

【参考方案1】：

最可能的情况是您使用非 Mac OS X/macOS 操作系统来运行 Firefox。

MDN web docs entry on font-smooth 指定：

Firefox 实现了一个类似的属性，但具有不同的值：-moz-osx-font-smoothing。它仅适用于 Mac OS X/macOS。

据我所知，大多数网络浏览器默认启用亚像素渲染，而不是抗锯齿字体。 This Usability Post article 解释了为什么这仍然是 Mac OS X/macOS 浏览器中启用的功能：

亚像素渲染为您在浅色背景上的典型深色文本提供了最佳的字体清晰度。但是，在 Mac OS X 上，如果反过来，将浅色文本设置在深色背景上，则会得到相当丑陋的效果，即文本变得过于粗体，溢出线条。对于深色背景上的浅色文本，从亚像素渲染切换到抗锯齿会使其看起来更亮，从而抵消粗体效果。

编辑：还要注意-moz-osx-font-smoothing: grayscale; 属性仅适用于 Mac OS X/macOS Firefox 25+。可以在Bugzilla's Bug 857142 上找到错误报告。

【讨论】：

我使用的是 Windows 10，我从 google 下载了最新的 Firefox，并将我的 Firefox 从版本 60.0.1（64 位）更新到版本 61.0b（32 位）。但我得到了同样的问题。我知道 MDN 网络文档链接。虽然出现在 CSS3 字体的早期（2002 年）草案中，但 font-smooth 已被删除，并且该规范不在标准轨道上。