CSS字体大小以保持相同的字宽
CSS字体大小以保持相同的字宽
提问于 2018-06-29 05:35:41
我试图让单词"Hello"，"Projects"，"Social“和"Contact”相应地调整它们的字体大小，以便所有单词都是相同的宽度，而不是必须逐个像素。
我认为我是在使用视窗宽度的一些东西，但这并不是我想要的效果。
要获得所需的效果，请参见图片。
回答 2
Stack Overflow用户
发布于 2018-06-29 05:49:41
您可以使用vw单位调整font-size和letter-spacing
.title {
font-size: 15vw;
padding: 20px 0;
font-family: arial;
}
.title:first-child {
letter-spacing:5vw;
}<div>
<div class="title">
Hello
</div>
<div class="title">
Projects
</div>
</div>
Stack Overflow用户
发布于 2018-06-29 05:44:42
var d = document.getElementById("master");
// set your margin... depends from font style
var margin= 2;
function font(){
var lett = document.getElementById("master").clientWidth;
setInterval(function(){font()},0)}
function getCount(matchResult) {
return matchResult ? matchResult.length : 0;
}
function alert(){
var pm = document.getElementById("master").querySelectorAll('*');
var num ;
for (num = 0; num < pm.length; num++){
var str = pm[num].textContent;
var countA = getCount(str.match(/A/g));
var countB = getCount(str.match(/B/g));
var countC = getCount(str.match(/C/g));
var countD = getCount(str.match(/D/g));
var countE = getCount(str.match(/E/g));
var countF = getCount(str.match(/F/g));
var countG = getCount(str.match(/G/g));
var countH = getCount(str.match(/H/g));
var countI = getCount(str.match(/I/g));
var countJ = getCount(str.match(/J/g));
var countK = getCount(str.match(/K/g));
var countL = getCount(str.match(/L/g));
var countM = getCount(str.match(/M/g));
var countN = getCount(str.match(/N/g));
var countO = getCount(str.match(/O/g));
var countP = getCount(str.match(/P/g));
var countQ = getCount(str.match(/Q/g));
var countR = getCount(str.match(/R/g));
var countS = getCount(str.match(/S/g));
var countT = getCount(str.match(/T/g));
var countU = getCount(str.match(/U/g));
var countV = getCount(str.match(/V/g));
var countW = getCount(str.match(/W/g));
var countX = getCount(str.match(/X/g));
var countY = getCount(str.match(/Y/g));
var countZ = getCount(str.match(/Z/g));
var counta = getCount(str.match(/a/g));
var countb = getCount(str.match(/b/g));
var countc = getCount(str.match(/c/g));
var countd = getCount(str.match(/d/g));
var counte = getCount(str.match(/e/g));
var countf = getCount(str.match(/f/g));
var countg = getCount(str.match(/g/g));
var counth = getCount(str.match(/h/g));
var counti = getCount(str.match(/i/g));
var countj = getCount(str.match(/j/g));
var countk = getCount(str.match(/k/g));
var countl = getCount(str.match(/l/g));
var countm = getCount(str.match(/m/g));
var countn = getCount(str.match(/n/g));
var counto = getCount(str.match(/o/g));
var countp = getCount(str.match(/p/g));
var countq = getCount(str.match(/q/g));
var countr = getCount(str.match(/r/g));
var counts = getCount(str.match(/s/g));
var countt = getCount(str.match(/t/g));
var countu = getCount(str.match(/u/g));
var countv = getCount(str.match(/v/g));
var countw = getCount(str.match(/w/g));
var countx = getCount(str.match(/x/g));
var county = getCount(str.match(/y/g));
var countz = getCount(str.match(/z/g));
var countspace = getCount(str.match(/ /g));
var groupa = 22*(counti+countj+countl);
var groupb = 28*(countI+countf+countt);
var groupc = 33*(countr);
var groupd = 50*(countJ+countc+countk+counts+countv+countx+county+countz);
var groupe = 56*(countL+counta+countb+countd+counte+countg+counth+countn+counto+countp+countq+countu);
var groupf = 61*(countF+countT+countZ);
var groupg = 67*(countA+countB+countE+countK+countP+countS+countV+countX+countY);
var grouph = 72*(countC+countD+countH+countN+countR+countU+countw);
var groupi = 78*(countG+countO+countQ);
var groupj = 83*(countM+countm);
var groupk = 94*(countW);
var groupl = 28*(countspace);
var totalsize = (groupa+groupb+groupc+groupd+groupe+groupf+groupg+grouph+groupi+groupj+groupk+groupl)/100;
var lett = pm[num].clientWidth;
var final = Math.floor(lett / totalsize) ;
pm[num].style.fontSize=final-margin+"px";
}
setInterval(function(){alert()},0)
}
window.onload = function(){
font();
alert();
}div {text-align:center;
width:350px;
margin:0px;
padding:0px;}
p{
background-color:gray;
margin:0px;
padding:0px;
color:white}
.orange{
background-color:orange;}
.red{
background-color:red;}<body>
<div id="master">
<p>Text using font-master.js </p>
<p>How simply is that </p>
<p class="orange">Hello</p>
<p class="red">Project</p>
</div>
</body>
你可以用我的js。即插即用：https://github.com/foxreaper/font-master
文本将适合您的div或sreen大小...如果你有任何问题，请让我知道。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51091542
复制相关文章
相似问题
腾讯云开发者
