在CSS 2D栅格化中有反别名子像素的方法吗？

Question

似乎HTML/CSS引擎将值舍入到最近的整个px单元。将大小调整到非离散值(浮点数)是很整洁的。

编辑:经过更仔细的观察(至少在Chrome中)，是的，引擎将宽度/高度旋转到最近的物理像素。如果您放大，那么有更多的物理像素要别名，因此，它可以使事物更接近其指定的十进制大小。有关证据，请参见https://jsfiddle.net/yu55vk1p/1。首先，您会看到大小为0.25的div呈现为宽度为0px。最后三个div呈现为宽度为1px。放大后，它们会呈现出不同的大小。

编辑:在意识到发生了什么之后，我想我真正的问题是“我们能有反混叠吗？”答案似乎是否定的(至少在默认情况下不是这样)。

经过进一步的研究，试图应用CSS变换的反混叠方法确实适用于反混叠，但对于原来2D宽度/高度仍然与物理像素混叠的内容，则采用反混叠。例如，比较两个示例：

1. https://jsfiddle.net/yu55vk1p/2
2. https://jsfiddle.net/yu55vk1p/3

您会注意到，当转换为1.5px时，三个可见的div是模糊的，因为它们位于3D空间中的两个像素之间(物理像素？)。但是，你也会注意到前两个div仍然是不可见的，最后三个div是相同大小和同样模糊的，这是一个强烈的指示，二维渲染被别名为物理像素，转换成一个纹理，然后反别名之后。

所以，人们说用变换启用的反混叠并不能真正帮助2D光栅，而这似乎是首先发生的。

在纹理被发送到3D渲染之前，我们能进行2D栅格化吗？

Answer 1

Jquery的创建者John编写了这个可能让您感兴趣的关于亚像素的文章。

此外，在此之前也有过关于堆栈溢出的类似问题，这可能会给我们带来深刻的见解。

Answer 2

有各种各样的度量，您可以使用css定义元素大小。

这里有一个完整的表：：units.htm

Unit    Description/Example
%   Defines a measurement as a percentage relative to another value, typically an enclosing element.    p {font-size: 16pt; line-height: 125%;}
cm  Defines a measurement in centimeters.   div {margin-bottom: 2cm;}
em  A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.    p {letter-spacing: 7em;}
ex  This value defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter x.  p {font-size: 24pt; line-height: 3ex;}
in  Defines a measurement in inches.    p {word-spacing: .15in;}
mm  Defines a measurement in millimeters.   p {word-spacing: 15mm;}
pc  Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.    p {font-size: 20pc;}
pt  Defines a measurement in points. A point is defined as 1/72nd of an inch.   body {font-size: 18pt;}
px  Defines a measurement in screen pixels. p {padding: 25px;}
vh  1% of viewport height.  h2 { font-size: 3.0vh; }
vw  1% of viewport width    h1 { font-size: 5.9vw; }
vmin    1vw or 1vh, whichever is smaller    p { font-size: 2vmin;}