如何将字体缩放到父容器的宽度
如何将字体缩放到父容器的宽度
提问于 2020-05-09 17:11:19
我正在使用一个名为streamlabs.com的网站，它是一个在and、YouTube和Mixer上进行直播的全合一工具。我做了一个Photoshop覆盖与三个直播，平台的图标，他们是等距的2K分辨率(2560x1440px)。然后，我使用这与开放广播软件，也就是OBS，来流这些平台。Streamlabs允许您将网页直接嵌入到软件中并显示出来。如前所述，我已经将网页的大小设置为2560 x 1440 by；与我的OBS设置相同的大小，这将使我能够完美地逐像素对齐所有内容。
本质上，我想把视图计数和每个项目放在一起。
层次结构以浓缩的形式呈现出来：-
Parent container
Child container
Icon
View count textplatform_container
twitch_container
fab fa-twitch platform-icon
twitch-count以下是我的Firefox开发工具中的实际代码
到目前为止，我已经通过使用
#platform_container #twitch_container .fab.fa-twitch.platform-icon {
display: none !important;
}然后，我使用一个相对位置将每个子容器从大小为2560x1440的platform_container父div移开。
#platform_container #twitch_container {
position: relative;
left: 680px !important;
}每个子容器下面都是图标和实际视图计数文本，它是我试图缩小的twitch_count类，以修复它的父容器twitch_container。我正在考虑在max-width上设置twitch_container参数，然后缩放在子容器twitch_count中定义的字体。当视图计数上升时，字符数量会增加，占用更多宽度，我不想重叠到另一个div，而是缩小到父div中设置的最大宽度。
下面的截图就是这样的。所有红色箭头之间的距离应该是相等的，但是在本例中，您可以看到添加到T女巫容器中的字符越多，就会进一步扩展。我希望文本在不影响宽度的情况下缩小到一定程度。
我对CSS有一点了解，我已经尝试将max-width设置在twitch_container和抽动计数容器上，然后将字体大小设置为60 60vmin和60%，而to计数完全忽略了它的父div，大小只是因为太大而从屏幕上消失了。
有什么想法吗？
更新1
<html>
<head>
<title>Viewer Count Widget</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ff.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=QxoJqggwpIFoYwuEU6jAPg8vfi5xoaqgIlShnnH8Mh6ZzTBWezbNYVjEqi9iFbI6ZSl4Lrvm2QVmeWLI20SxNavAi9N9YykjkJe0utSTYRlUVQV_MQ1ZwrgwxGiANY4J" charset="UTF-8"></script><script src="https://cdn.polyfill.io/v2/polyfill.min.js?unknown=polyfill&features=es6|gated|always"></script>
<script src="/mixed/assets/vendor/js/manifest.js?id=01c8731923a46c30aaed"></script>
<script src="/mixed/assets/vendor/js/vendor.js?id=9e7e3700e75d5ed3493a"></script>
<script src="/mixed/assets/external/js/external.js?id=6aae1514e74721024ba5"></script>
<style id="theme"></style>
<script>
//function stubs for xsplit beta
window.SetVolume = function() {};
window.OnSceneLoad = function() {};
window.setBackGroundColor = function() {};
window.GetPlayState = function() {};
window.UpdateLocalProperty = function() {};
window.SetEvent = function() {};
</script>
</head>
<body style="margin:0px">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
<iframe
sandbox="allow-scripts"
frameborder="0"
style="width:100%;height:100%;"
seamless="true"
src="/widgets/frame/viewercount/custom"
id="sl_frame"></iframe>
<div id="custom_html">
<!-- all platforms will be added to this container -->
<div id="platform_container">
</div>
<!-- platform item -->
<script type="text/template" id="platform_item">
<span style="font: {font_weight} {font_size} '{font}'; margin:20px" id="{platform}_container">
<i class="fab fa-{platform} platform-icon" style="color:{platform_color};"></i>
<img class="platform-img" width="{font_size}" height="{font_size}">
<span style="color:{font_color}" class="{platform}-count"></span>
</span>
</script>
</div>
<style id="custom_css">
</style>
<style>
#sl_frame {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
</style>
<input type="hidden" id="simulate" value="" />
<script src="/mixed/assets/widgets/js/viewercount.js?id=baf2989d9a92071b21d6"></script>
<input type="hidden" id="token" value="BDFF52B12D5C0F0452E5" />
<input type="hidden" id="profile" value="" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"></script>
<!-- include Google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52139786-2', 'auto');
ga('send', 'pageview');
</script>
<!-- sentry -->
</body>
</html>更新2
我还是不能让它起作用。这是我的Streamlabs仪表板的三个选项卡上的代码行: HTML、CSS和JS。不幸的是，我不能共享URL，因为它包含敏感信息。
HTML
<!-- all platforms will be added to this container -->
<div id="platform_container">
</div>
<!-- platform item -->
<script type="text/template" id="platform_item">
<span style="font: {font_weight} {font_size} {font}" id="{platform}_container">
<i class="fa fa-{platform} platform-icon" style="color:{platform_color};"></i>
<img class="platform-img" width="{font_size}" height="{font_size}">
<span style="color:{font_color}" class="{platform}-count"></span>
</span>
</script>CSS
#platform_container {
display: flex;
border: 2px solid orange;
}
/* Twitch */
#platform_container #twitch_container {
border: 3px dashed blue;
max-width: 100px;
text-align: center;
margin-right: 20px;
}
#platform_container #twitch_container .twitch-count {
margin: 0;
line-height: 1;
max-width: 100px;
border: solid blue 2px;
font-size: 50px;
}
#platform_container #twitch_container .platform-icon {
display: none;
}
#platform_container #twitch_container .twitch-count::after {
content: "123456";
}JS
// Please use event listeners to run functions.
document.addEventListener('onLoad', function(obj) {
// obj will be empty for viewer count widget
// this will fire only once when the widget loads
});
document.addEventListener('onEventReceived', function(obj) {
// obj will contain information about the event
});
const textElems = document.querySelectorAll("#platform_container > span[id$="_container"] > span[class$="-count"]");
const containerElem = document.querySelector("#twitch_container");
const fs = window.getComputedStyle(textElems[0]).fontSize;
const mw = window.getComputedStyle(containerElem).maxWidth;
const maxFontSize = parseFloat(fs);
const maxWidth = parseFloat(mw);
for (i = 0; i < textElems.length; i++) {
const elem = textElems[i];
if (elem.scrollWidth > maxWidth) {
elem.style.fontSize = (maxFontSize / elem.scrollWidth) * maxWidth + "px";
}
}显示当前代码影响的屏幕截图
回答 1
Stack Overflow用户
发布于 2020-05-11 12:18:47
我的理解是，您试图根据父容器的宽度和文本内容来更改字体大小。
在这个post中有很多解决方案。
下面是一个使用JavaScript和容器的最大宽度属性更改字体大小的示例。
HTML
<div id="container">
<div class="box">
<h3 class="count">012345</h3>
</div>
<div class="box">
<h3 class="count">0</h3>
</div>
<div class="box">
<h3 class="count">0</h3>
</div>
</div>CSS
#container {
display: flex;
}
.box {
border: 1px dashed black;
max-width: 250px;
text-align: center;
margin-right: 20px;
}
.count {
margin: 0;
font-size: 150px;
line-height: 1;
}确保将max-width属性设置为每个子元素。还为视图计数元素设置初始font-size。
JS
const textElems = document.querySelectorAll(".count");
const containerElem = document.querySelector(".box");
const fs = window.getComputedStyle(textElems[0]).fontSize;
const mw = window.getComputedStyle(containerElem).maxWidth;
const maxFontSize = parseFloat(fs);
const maxWidth = parseFloat(mw);
for (i = 0; i < textElems.length; i++) {
const elem = textElems[i];
if (elem.scrollWidth > maxWidth) {
elem.style.fontSize = (maxFontSize / elem.scrollWidth) * maxWidth + "px";
}
}查看您的开发工具屏幕快照，您的textElems查询将是"#platform_container > span > span"或"#platform_container > span[id$="_container"] > span[class$="-count"]"。
这都取决于HTML标记。
更新：错误，需要用单引号替换双引号
"#platform_container > span[id$='_container'] > span[class$='-count']"
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61700680
复制相关文章
相似问题
腾讯云开发者
