我可以使用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>