标签：style blog io color ar 使用 sp for div
在做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所示
| in | in | in | in | in |
| in | in | in | in | in |
| in | in | in | in | in |
但往往情况会是这样的
| in | in | in | in | in |
| in | in | in | in | in |
| in | in | in |
这样的情况就会导致容器被这些字的体积加两个空闲位置撑破了，因此就要进行接下来这一步，进行修正，调整字体大小，准确的说是减小，知道刚好装得下位置：
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; }
这里面还进行了最大字体设置，免得只有一个字的时候，字体过分的大。
好了今天就到这里。
标签：style blog io color ar 使用 sp for div
原文地址：http://www.cnblogs.com/iforever/p/4090773.html
