浏览器宽度变化时如何使字体始终位于中间？

Posted 2023-03-05

【中文标题】浏览器宽度变化时如何使字体始终位于中间？

【英文标题】：How to make font always in the middle when browser width changes?

【发布时间】：2021-11-01 10:19:52

【问题描述】：

我有以下示例来演示尝试保持在 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>

【问题讨论】：

这就是响应式设计。 html 应该根据设备自动适应/调整。

@HR01M8055 我不明白。如果您指的是 div 的位置，我知道。我是说字体在 div 中摆动的位置，但字体大小是固定的，div 宽度是固定的，改变浏览器的宽度应该不会影响它。

您无法“修复”居中元素的摆动。那是浏览器在调整大小期间不断地重新渲染页面。您甚至可以注意到浏览器窗口中的控件在调整大小期间摆动，这就是操作系统在做同样的事情。

@skyline3000 我不认为你明白我在说什么。使用 GIF 动画查看更新后的问题。

尝试应用过渡来平滑它。

【参考方案1】：

p
    text-align: center;

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

您可以通过将其放入“p”或不同的“h”标签来指定您的文本，并全局应用给定的 css

【参考方案2】：

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

span.text 
 backface-visibility: hidden;

span.flex 
 backface-visibility: hidden;

基本原理

让我们假设一个宽度为 1000 像素的视口。中心点是 500px。 如果视口宽度为 1001px，则中心点为 500.5px

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

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

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

现在，当您调整视口大小时，绿色区域内的字体不会重新渲染。所以，你看不到抖动

您可以阅读https://dassur.ma/things/forcing-layers/这篇文章以获得更清晰的信息。

【讨论】：

嘿，这似乎行得通！这是什么魔法？您能否在回答中加入一些解释？

抱歉有一个后续问题，虽然抖动是固定的，但我发现字体有时会偏离一点，如果绿色框从某个位置开始，就会保持这种状态。无论绿框在哪里，如何使字体始终保持在绿框的中心？为什么字体跟随视口的中心而不是绿框的中心，而绿框的宽度和高度是固定的？

保持奇数的宽度值（例如：31px）。那应该解决这个问题。否则，如果可能，请使用图像而不是字体