根据html容器大小和显示文字多少调节字体大小

在做html相关的东西的时候经常会遇到这样的问题,容器大小(长x宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路:

首先要知道网页中所说的字体大小的px指的是字体的宽和高,也就是说在35px显示一个中文字符,该字符占去35x35的空间。知道这个之后,我们就可以想办法动态的根据容器大小和包含内容多少显示文字了。

首先要做的就是计算一个字符串的长短(一个中文字符记1个,一个英文字符记0.5个),我这里使用了简单的判断,当蚊子Unicode编码大于255的时候计算一个汉字字符,小于255的时候计算0.5个汉字字符:

var L=0.0;
for(var i in str){
    L+=(str.charCodeAt(i)>255)?1:0.5;
}
L=Match.ceil(L);

也许机制的你已经注意到了,在最后我对长度进行了向上舍入,如果不进行这个操作也可以,但是为了不要那么多麻烦的小数直接给他向上舍入。

下一步就是进行计算字体大小了,我将每一个字体看做一个小方块,容器看做一个大方块,接下来就是计算如何更合理的用小方块填满大方块了。首先,直接数学思维计算出字体大小:

var font_size=Math.floor(Math.sqrt(parseInt(width)*parseInt(height)/L));

这里计算的font_size是一个刚好合适的情况,如下面图2014-11-11 1所示

ininininin
ininininin
ininininin
图 2014-11-11 1

但往往情况会是这样的

 

ininininin
ininininin
 ininin 
图 2014-11-11 2

这样的情况就会导致容器被这些字的体积加两个空闲位置撑破了,因此就要进行接下来这一步,进行修正,调整字体大小,准确的说是减小,知道刚好装得下位置:

var rows=Math.floor(width/font_size);
var lines=Math.ceil(L/rows);
while(lines*rows*font_size*font_size>width*height){
   font_size--;
   rows=Math.floor(width/font_size);
   lines=Math.ceil(L/rows);
}

这里是检测所有位置大小的总和(包括用到的位置和空闲位置),直到它刚好小于等于容器体积,此时的字体就是满足要求的字体。

下面看看完整程序:

fontSize=function(width,height,str,maxSize){
  var L=0.0;
  for(var i in str){
   //汉字大于255,英文小于255,也可以使用/[\u4e00-\u9aff]/g.test(str[i])
   L+=(str.charCodeAt(i)>255)?1.0:0.5;
  }
  L=Math.ceil(L);
  var font_size=Math.floor(Math.sqrt(parseInt(width)*parseInt(height)/L));
  //看下是否真的放得下
  var rows=Math.floor(width/font_size);
  var lines=Math.ceil(L/rows);
  while(lines*rows*font_size*font_size>width*height){
   font_size--;
   rows=Math.floor(width/font_size);
    lines=Math.ceil(L/rows);
  }
  return font_size>maxSize?maxSize:font_size;
 }

这里面还进行了最大字体设置,免得只有一个字的时候,字体过分的大。

好了今天就到这里。

send me~

转载于:https://www.cnblogs.com/iforever/p/4090773.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值