根据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))

单元格间距的问题。默认情况下每个单元格外部/内部都有一个像素的空隙，还存在一个边框（默认不显示）。你这里有十个单元格，全部都累加起来了。

解决方案就是把边框、外边距、内边距都设为0

把第一行代码改为：

<table border="0" cellpadding="0" cellspacing="0" background="img/1.png">

其中border是单元格的边框，如果设为1以上每个单元格都会显示一条边

cellpadding是内边距（在DW里叫填充），它的作用是在单元格的边框与内容中生成一个空隙

cellspacing是外边距（在DW里叫间距），它的作用是在单元格之间产生一个空隙。

默认情况下，cellspacing和cellpadding都是1

如果只是要设置一个背景的话，样式里面写background-image:就背景就应该是在后面了，div里面的内容或者是子div都应该是在背景前面的。俩个子div层叠来做背景和内容感觉弄复杂了呢。如果你要做定位的话，应该在父div用相对属性position: relative在子div用绝对属性position: absolutediv的层级用z-index:来控制，比如z-index:-1 z-index:1 z-index:2，这个属性值越大div就越在上层,越小越在下面。

---