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

 我来答
育知同创教育
2016-11-04 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部
在做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));
持枪仗红尘
2016-11-04 · TA获得超过371个赞
知道小有建树答主
回答量:274
采纳率:85%
帮助的人:109万
展开全部
用JS吧亲,或者用前端自适应框架,推荐bootstrap
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式