Question

似乎HTML / CSS引擎将值四舍五入到最接近的整个px单位。将大小调整为非离散值（浮点数）会很简洁。

编辑：经过仔细观察（至少在Chrome中），是的，引擎将宽度/高度舍入到最近的物理像素。如果放大，则有更多物理像素要别名，因此可以使事物更接近指定的十进制大小。有关证明，请参阅https://jsfiddle.net/yu55vk1p/1。首先，您会看到大小为0.25的div呈现为宽度为0px。最后三个div被渲染为好像它们的宽度为1px。放大后，它们将以不同的大小呈现。

编辑：在意识到发生了什么之后，我想我真正的问题是“我们能否抗锯齿”。似乎答案是否定的（至少在默认情况下不是这样）。

经过进一步调查后，尝试使用CSS变换应用抗锯齿确实应用抗锯齿，但它会对原始2D宽度/高度仍然是物理像素别名的内容应用抗锯齿功能。例如，比较两个例子：

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

你会注意到，当变换平移为1.5px时，三个可见的div是模糊的，因为它们位于3D空间中两个像素之间的中间位置（物理像素？）。但是，您还会注意到前两个div仍然不可见，最后三个div的大小相同且模糊，这是一个强烈的指示，即二维渲染别名为物理像素，转换为纹理，然后在之后消除别名。

因此，人们说用变换启用的抗锯齿并不能真正帮助首先出现的2D光栅。

在将纹理发送到3D渲染之前，我们可以进行2D光栅化吗？

Answer 1

Jquery的创建者John Resig写了这篇article about sub pixel，你可能感兴趣。

此前还有一个similar question on stack overflow可能会提供见解。

Answer 2

您可以使用各种测量来定义css的元素大小。

这里有一张完整的表格:: https://www.tutorialspoint.com/css/css_measurement_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;}

有没有办法在CSS 2D光栅化中消除别名子像素？

2 个答案: