首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS字体大小以保持相同的字宽

CSS字体大小以保持相同的字宽
EN

Stack Overflow用户
提问于 2018-06-29 05:35:41
回答 2查看 480关注 0票数 1

我试图让单词"Hello","Projects","Social“和"Contact”相应地调整它们的字体大小,以便所有单词都是相同的宽度,而不是必须逐个像素。

我认为我是在使用视窗宽度的一些东西,但这并不是我想要的效果。

要获得所需的效果,请参见图片。

EN

回答 2

Stack Overflow用户

发布于 2018-06-29 05:49:41

您可以使用vw单位调整font-sizeletter-spacing

代码语言:javascript
复制
.title {
  font-size: 15vw;
  padding: 20px 0;
  font-family: arial;
}

.title:first-child {
  letter-spacing:5vw;
}
代码语言:javascript
复制
<div>
  <div class="title">
    Hello
  </div>
  <div class="title">
    Projects
  </div>
</div>

票数 1
EN

Stack Overflow用户

发布于 2018-06-29 05:44:42

代码语言:javascript
复制
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();

}
代码语言:javascript
复制
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;}
代码语言:javascript
复制
<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大小...如果你有任何问题,请让我知道。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51091542

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档