html - 如何让浏览器宽度变化时字体始终居中？

Question

我有以下示例来演示尝试保留在 div 中间的字体，使用普通文本操作和 Flex 显示操作。两者似乎都将字体放在中间，但是，当您的浏览器未最大化并且您尝试更改浏览器的宽度时，两种字体都会在 div 内摆动(您必须慢慢地执行此操作才能看到效果)。

我制作了一个动画 GIF 来展示我正在谈论的内容:

由于字体大小是固定的，并且封闭 div 的宽度和高度也是固定的，因此更改浏览器的宽度不应影响封闭 div 中字体的位置。

如何使字体在中间绝对稳定(必须是字体，而不是图像，如果需要的话可以是 SVG)，从而在浏览器宽度变化时不会摆动？

div {
  display: flex;
  justify-content: center;
  margin: 10px;
}

span.text {
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  background: green;
}

span.flex {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  background: green;
}

<div>
  <span class="text">+</span>
</div>
<div>
  <span class="flex">+</span>
</div>

Answer 1

这是字体的子像素渲染问题。通过创建转换层，我们可以以某种方式修复这种抖动。尝试 backface-visibility:hidden; 对于 span 元素

span.text {
 backface-visibility: hidden;
}
span.flex {
 backface-visibility: hidden;
}

基本原理

我们假设视口(viewport)宽度为 1000px。中心点是500px。 如果视口(viewport)宽度为1001px，则中心点为500.5px

这个十进制像素值称为子像素。浏览器以子像素值渲染元素。但是，它不会以子像素渲染字体。

因此，在 1000px 和 1001px 视口(viewport)情况下，字体 char(+) 的中心点都是 500px。而绿色框的中心点为 500px 和 500.5px。

为了解决这个问题，我们可以为绿色框创建一个图层。将图层视为缓存区域，除非必要，否则不会重新渲染。通过对元素应用变换，您可以将其绘制在图层中。在这里，我使用了 backface-visibility:hidden; 这是一个与转换相关的属性。您还可以使用 Transform 属性来产生类似的结果。

现在，当您调整视口(viewport)大小时，绿色区域内的字体不会重新渲染。因此，您不会看到抖动

您可以阅读https://dassur.ma/things/forcing-layers/为了更清晰地阅读这篇文章。