在低于配置分辨率的窗口中, CSS3 scale 属性会产生质量不佳的效果

这里还有其他一些问题，涉及调整幻灯/步骤的大小/缩放，使其适合浏览器窗口。本问题涉及 CSS scale 属性产生的视觉效果。据我所知，当浏览器窗口的内容区域太小，无法容纳给定分辨率时，scale 值将小于 1。分辨率（以 px 表示）通过默认值或 data-width 和 data-height 属性在 impress 根元素中指定。这将不会“完美”地将演示内容放入具有高于配置分辨率的窗口（高分辨率显示器上常见）。此外，当窗口小于配置分辨率时（scale 值小于 1），将产生重叠效果。我认为（！）重叠效果是由浏览器在渲染“场景”时（例如 1920x1080）在原生分辨率（例如 1024x576，常见的 beamer 分辨率）中进行缩放时产生的。浏览器的向量图形光栅化器所做的锯齿化和抗锯齿处理被破坏了（如果我错了，请纠正我）。

这是原生分辨率字体光栅化的放大截图：

这是缩放后字体光栅化的放大截图：

您可以看到，缩放后的场景具有更多的重叠效果，而不是原生分辨率图像。我尝试在没有使用 CSS scale 属性的情况下实现总是适合幻灯的方法，使用 vw 和 vh 属性，幻灯的宽高比为 16:9。这种方法可以将 font-size 设置为 4vh 等，以缩放幻灯中的所有内容。使用 em 来调整所有内容时，应该会工作得很好。我没有使用 impress.js 来实现此示例，因此还需要进一步研究这种更改是否可以集成到 impress.js 中。