Question

我正在使用css transform:scale来扩展一些元素，现在原来1px solid black的边框会得到一些子像素渲染 - 'antialiasing' - 因为它们现在是{{1} } 或者其他的东西。它的外观究竟取决于浏览器，但它在所有现代浏览器中都很模糊。

我可以禁用某些元素的子像素渲染吗？

Answer 1

它很模糊，因为72 dpi的标准显示无法呈现小数像素大小，因为我相信你明白。此外，nothing within the spec会影响边框的渲染或锯齿。

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

某些视网膜设备和显示器支持sub-pixel border widths，但在跨浏览器支持方面没有一致的解决方案。

在我自己的测试中，我从一个角落缩放时发现了更好的结果，而不是默认的中心。以及提高四分之一或一半的金额。

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

Answer 2

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

由于我处于类似的用例（使用js进行动态缩放）中，所以我决定实施原始作者的注释中建议的javascript解决方案：

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

但是，在升级的情况下，我建议Math.floor（）避免过多地使边界“变形”。

Answer 3

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

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

Answer 4

您可以使用此css控制WebKit上的文本抗锯齿： -webkit-font-smoothing：antialiased; 有时用以下方法强制进行3D加速： -webkit-transform：translate3d（0,0,0）; 也有助于混叠（至少在我的经验中使用旋转）。