在HTML/CSS边框上禁用子像素抗锯齿

Question

我正在使用CSS的transform:scale来放大一些元素，现在原先为1px solid black的边框因为它们现在是1.4px左右的，所以会有一些亚像素渲染 - "抗锯齿"。它看起来在所有现代浏览器上都有点模糊，但具体如何取决于浏览器。

我能为某些元素禁用亚像素渲染吗？

- commonpike

---

浏览器特定的解决方案，例如带有供应商前缀的CSS，也是可以接受的。 - commonpike

如果您使用CSS规则来转换/缩放元素，为什么不在同一规则中调整边框呢？ - Cholesterol

我应该提到比例是动态的 - 用JavaScript完成。我没有尝试使用相同的JavaScript调整边框宽度，例如border-width:0.71px或其他什么 - 这可能是一个解决方案。 - commonpike

Answer 1

使用 transform: scale(ratio) 进行缩小时遇到了类似的问题，但是在子像素渲染中边框会完全消失而不是模糊。

由于我处于类似的用例（使用JS进行动态缩放），所以我决定实现原作者在评论中提出的javascript解决方案。

container.style.transform = "scale(" + ratio + ")";
elementWithBorder.style.border = Math.ceil(1 / ratio) + "px solid lightgray";

在升级情况下，我建议使用Math.floor()来避免边框过于“肥胖”。

- Efulefu

Answer 2

设置 perspective 属性似乎就可以解决问题：

.subpixel-modal {
    transform: translate(-50%, -50%);
    perspective: 1px;
}

- Tim

---

有人知道这是如何工作的吗？ - Alex von Brandenfels

Answer 3

由于标准显示器的72 dpi无法呈现分数像素大小，所以它会变得模糊，我相信您已经理解了。此外，在规范中没有任何内容可以影响边框的渲染或抗锯齿。

像素宽度为2可能会给您带来更好的结果，但几乎所有东西都会变得模糊。

一些视网膜设备和显示器确实支持亚像素边框宽度，但是在跨浏览器支持方面并没有一致的解决方案。

在我的测试中，我发现从角落缩放比默认情况下从中心缩放效果更好。以及逐步增加四分之一或半个像素。

transform: scale(1.25);
transform-origin: left top;

- Serg Chernata

Answer 4

你可以使用以下CSS控制WebKit中的文本抗锯齿效果： -webkit-font-smoothing: antialiased; 有时候强制使用3D加速，例如： -webkit-transform: translate3d(0, 0, 0); 也可以帮助消除锯齿（至少在我的经验中使用旋转时是这样的）。

- Jan Drewniak

---

谢谢，这是正确的，但我想问的是非文本元素的别名效果 - 具体来说是边框。它们不受“-webkit-font-smoothing”的影响，而“translateZ”技巧也没有效果... - commonpike