Question

我想显示单词或unicode字形，以便它们与可视区域（容器大小）成比例。也就是说，如果单词只是一个字符，或者我们只有一个unicode字形，则该单词会更大，因此它会填充空间，至少在所有面上填充10％。但是，如果它是一个较长的单词，我们说“你好”或“相应地”，它会缩小单词的大小，以保持边缘周围的填充。如果您调整浏览器窗口的大小，它将仅使用CSS自动响应地调整文本大小以填充区域。

第一个代码片段显示了实现此目标的简单/标准方式。它显示了字体大小是静态的，单个字母没有填充宝贵的空间，较大的单词不适合容器。

#a, #b, #c {
  font-size: 16px;
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 10px;
  margin: 10px;
  background: yellow;
}

<div id='a'>a</div>
<div id='b'>hello</div>
<div id='c'>consequentially</div>

我想做的是某种方式-动态地-使它看起来像这样（我对其进行了静态硬编码以演示它的外观）。

div {
  width: 50px;
  height: 50px;
  background: yellow;
  text-align: center;
  margin: 10px;
}

#a {
  font-size: 36px;
}

#c {
  font-size: 5px;
}

<div id='a'>a</div>
<div id='b'>hello</div>
<div id='c'>consequentially</div>

问题是如何使字体根据单词/字符需要多长时间占用的大小来动态调整字体大小。

我想知道是否有纯CSS 的方法，但是如果没有，那么如何用普通的JavaScript做到这一点。

如何按容器大小成比例地缩放单词或unicode字形

0 个答案: