根据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所示

in in in in in
in in in in in
in in in in in

图 2014-11-11 1

但往往情况会是这样的

in in in in in
in in in in in
  in in in  

图 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~

时间: 11-10

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

Xshell调节字体大小和样式

有时候没有看着字体太小的,好难受, 调节字体大小: ALT+P快捷键打开

【转】苹果电脑怎么设置分辨率和调节字体大小

原文网址:https://jingyan.baidu.com/article/95c9d20da2a25eec4f75614c.html 在苹果电脑中,用户可能对系统的字体和分辨率的设置不太满意,就需要自己调大小了,那么mac系统怎么设置分辨率和调节字体大小呢?下午特意写了一个详细的图文教程叫大家如何分辨率和调节字体大小,接下来我就教大家怎么设置. 工具/原料 苹果电脑一台 方法/步骤 首先点击在桌面底部的dock栏,找到“系统偏好设置”.   然后在打开的系统偏好设置找到显示器选项.   进入

Python+PyCharm的一些基本设置:安装使用、注册码、显示行号、字体大小和快捷键等常用设置

一 下载与安装 软件下载,软件文档下载:http://www.jetbrains.com/pycharm/download/ 如下图: 官方网站下载:http://www.oschina.net/p/pycharm 此外本人提供网盘下载,这个版本无需破解,下载安装即可使用:http://pan.baidu.com/s/1c2INnRM 二 注册码 注册码转自:http://www.cnblogs.com/zdz8207/p/python_learn_note_18.html PyCharm4注册

改变TextView文字中部分字体大小

我想把TextView设置成如下图所示的效果,一开始我是想用textView.setText("已为<font size=18sp>88</font>位")类似的代码实现,于是发现android自带的这样一个方法Html.fromHtml(),即可以实现在文字里加入html标签的样式,但是该方法font标签并没有size这个属性,只有color和face.因此只能通过big和small来控制字体大小,代码如下:textView.setText(Html.from

嵌入式Qt-4.8.6显示中文并且改变字体大小和应用自己制作的字体库

问题: QT4.8.6在移植到开发板上的时候,中文支持是必不可少的,如何让QT支持中文,如何制作QT支持的字体文件,如何使QT UI编辑器中的字号与开发板中的字号一致. 详解: 1>如何让QT支持中文  QT程序中指明的字体和字号在/opt/qt-4.8.6/lib/fonts目录下没有对应的字库文件时,QT会选择某一个存在的字库文件来显示:那么,如果你的系统中只有需要一种字体和字号,那么则可以将fonts目录下不需要的字库文件全部删掉,只保留这个需要的字体文件即可. 上面是一种很方便的做法,无

固定textview大小,根据文字多少调整字体自适应textview大小

/** * 文件名 AutoResizeTextView.java * 包含类名列表 com.haier.internet.conditioner.haierinternetconditioner2.view * 版本信息 版本号 * 创建日期 2014年9月9日 * 版权声明 */ package com.haier.internet.conditioner.haierinternetconditioner2.view; /*** 类名 * @author 王洪贺<br/>* 实现的主要功能

eclipse 调节字体大小

2016-06-25 1.Windows → Preferences 2.General → Appearance → Colors and Fonts → Basic → Text Font

CSS字体大小: em与px、pt、百分比之间的对比

CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争论.找到一个确定的答案是困难的, 因为这个问题,本身就是如此难以回答. 接触这些单位 1.  “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示.一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt.Ems在本质上是可伸缩的,所以2 em相当于

设置同样字体大小,chrome浏览器有时字体偏大的解决办法(转)

本文是找了在网上搜了好久才找到非常棒的一篇文章,很好的解决了这个问题. 原文地址:https://github.com/amfe/article/issues/10 这个特性被称做「Text Autosizer」,又称「Font Boosting」.「Font Inflation」,是 Webkit 给移动端浏览器提供的一个特性:当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了.而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证