CSS如何使文本像图像一样缩放

Posted 2023-03-06

【中文标题】CSS如何使文本像图像一样缩放

【英文标题】：CSS How to make text to scale like an image

【发布时间】：2017-02-01 15:28:45

【问题描述】：

我无法弄清楚如何在调整大小时使文本表现得像图像。当我调整浏览器的大小时，文本保持与开始时一样大，并开始分成许多行。我尝试使用 VW 字体大小，但在这种情况下，文本在大屏幕上太大而在小屏幕上太小。

有我的 css 类：

.text_head_container
  font-size: 35px;
  font-size: 2.1875rem;
  color: white;
  width:60%;
  display:inline-block;

    
.img_head_container
  display:inline-block;
  width:15%;
  height:auto;

我会感谢您对此提供的任何帮助。

问候。

【问题讨论】：

我认为这在纯 css 中是不可能的，这就是为什么像 fittextjs.com 这样的库存在

如果您想要一个仅在浏览器调整大小时调整文本大小的 CSS 解决方案，则可以使用 vh 和 vw 等视口单位，否则将需要脚本。

我更新了我的答案以使用 vmin + vmax，它应该可以解决你的问题。

【参考方案1】：

你说你已经尝试过 vw。你试过这样吗？ Responsive Text 我在文本上设置了 vmin 和 vmax，这样它不会低于你设置的最小 vw，也不应该超过最大高度，它仍然是完全响应的。

.resize
  font-size: 35px;
  font-size: 6vmax;
  font-size; 1vmin;
  width:60%;
  display:inline-block;

    
.text
  display:inline-block;
  width:100%;
  height:auto;

<div class="resize">
  <p class="text"> Just some random text, Just some random text,  Just some random text, Just some random text,  Just some random text, Just some random text, Just some random text, Just some random text, </p>
</div>

【讨论】：

当窗口调整大小时，这不会调整文本大小，请阅读问题

忽略sn-p，点击链接的codepen，调整浏览器大小即可看到。

我非常接近，但我仍然不得不使用@media。感谢您的帮助并向我展示 vmin 和 vmax :)

【参考方案2】：

我怀疑媒体查询是这里唯一合理的选择：

p 
  font-size: 5vw;


@media screen and (max-width: 600px) 
  p 
    font-size: 30px;
  

【参考方案3】：

CSS 并不容易提供使字体大小与浏览器大小非线性缩放所需的功能。 vw 是你最接近的简单，如果你觉得它在大屏幕上太大而在小屏幕上太小，你将不得不做一些提升。

我建议您首先确定从 600 像素到 2k 的每 800 像素的正确尺寸，然后再确定 3k 和 4k 的尺寸，然后找到适合您构建的曲线的函数。像“在 800 像素我想要 26 像素，在 1000 像素我想要 29 像素”之类的东西，应该是你所需要的。那么任何随机的curve fitter 应该都能给你相关的功能。

一旦有了这个功能，基本上就有两个选择。

使用 calc() 实现您的曲线（并非总是可行，并且会丢失很多浏览器后备） 使用小步骤制作大量媒体查询列表，并在它们之间定义字体（可生成，但 ... ew） 监听文档调整大小事件，然后重新分配字体大小（直接或通过覆盖某些 CSS-DOM 规则，后者是大多数插件所做的）

这是simple implementation of listening for the document resize event。