使字体占据特定字体大小的空间

Question

假设我有按钮，里面有文本“提交”，字体大小为 16 像素。

现在我希望“提交”文本占据相同的空间，就好像它的字体大小为 32 像素，字体大小为 16 像素一样。

有没有办法做到这一点？ 我尝试使用 line-height 但无法获得所需的结果。

Answer 1

您可以通过将 32px 字体缩放 0.5 倍来转换按钮内容。 由于变换是绘制时的操作，它们不会影响按钮的布局或大小。 像这样：

 button { display:block; font-size: 32px; } button.size16 span { display: block; transform: scale(0.5); }

 <button class="size32"><span>Submit</span></button> <button class="size16"><span>Submit</span></button>

Answer 2

您还可以使用 em 单位作为元素的字体大小。 它的设计使您可以从基本字体大小进行缩放，例如 2em 将使跨度文本的大小是基本字体大小的两倍

如果你只是想让你的文本适合一个容器，那么你可以使用fittext插件之类的东西

 body { font-size: 16px; } span { border: 1rem solid #370DD7; background-color: white; padding-inline: 0.5rem; }.bigtext { font-size: 2em; }

 <span>This is some text</span> <span class='bigtext'>This is bigger text</span>

Answer 3

字体大小是决定文本占用多少空间的属性。

因此，当您将 32px 作为字体大小时，这意味着文本将占用 32px。 而且，当你放 16px 时，它只会占用 16px。

您现在所期望的无法完成，而且似乎也不是有效的要求。

您能否更详细地描述您的确切要求。

你是想让文本占据整个 32px 还是只是父级有 32px。

也尝试分享代码片段。