我可以使用200vh等将字体设置为相对于视口的大小(如果我只是将其放在正文中)。但是如何使它的大小适合完全适合容器的大小呢?也就是说,我希望在文本的每一侧都有一定的边距,例如8%的宽度,并让文本填充其余的84%。如何使用HTML / JS / CSS做到这一点?



body {
  font-size: 70vh;
  display: flex;
  text-align: center;
  justify-content: center;
}

hello

最佳答案

这种方法不是完美的像素,但会产生近似结果。
通过将文本包装起来(例如用<span>包裹),您可以获得初始文本宽度和字体大小,这将用于使用容器的宽度来计算最终字体大小。



window.addEventListener('resize', calcFontSize);

var textEl = document.querySelector('span'),
textElParent = textEl.parentNode,
textFontSize = parseFloat(window.getComputedStyle(textEl, null).getPropertyValue('font-size')),
textWidth = textEl.clientWidth,
spaceToFill;

function calcFontSize() {
  spaceToFill = textElParent.clientWidth;
  textEl.style.fontSize = (spaceToFill * textFontSize)/textWidth + "px";
}

calcFontSize();

html {
  background-color: #fff;
}
body {
  background-color: #f3f3f3;
  display: flex;
  text-align: center;
  justify-content: center;
  margin: 0 8%;
}

<body>
  <span>hello</span>
</body>

09-12 08:14