gpt4 book ai didi

javascript - 如何调整 CSS/JS 中字体的大小,使其相对于其容器的两侧有一定的边距?

转载 作者:行者123 更新时间:2023-12-02 21:46:34 25 4
gpt4 key购买 nike

我可以使用 200vh 等制作相对于视口(viewport)大小的字体(如果我只是将其放入正文中)。但是如何使其大小完全适合容器呢?也就是说,我希望文本的每一侧都有一定的边距,例如宽度的 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>

关于javascript - 如何调整 CSS/JS 中字体的大小,使其相对于其容器的两侧有一定的边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60235628/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com