下面是我总结的css中关于字体尺寸的知识，欢迎高手拍砖！

前端开发过程中，我们经常会遇到设置某个div固定显示几行文本；这时我们需要精确计算每个字号字体的宽度和高度。

下面是w3school中描述的尺寸的单位：

单位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
em

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如，如果某元素以 12pt 显示，那么 2em 是24pt。

在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)

我做了一个工具，用来展示字体高度和宽度对照表：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>测试字体宽度和高度</title>

        <script src="http://code.jquery.com/jquery.min.js"></script> <!--这个永远是最新版本的CDN-->

        <style>

        body,html{

            height: 100%;

            font-size:100%;

        }

        div{bordor 1px green dotted;}

        div,p,h1,h2{

            margin:0;

            padding:0;

        }

        h1,h2{

            text-align:center;

            margin:3px 0;

        }

        div.content{

            width:90%;

            margin:auto;

            border:yellow 1px solid;

            overflow:auto;

            padding:10px;

            text-align:center;

        }

        div#font{

            border:1px red dotted;

            height:230px;

            overflow:auto;

        }

        div#font p{

            border:1px green dotted;

        }

        .hidden{

            display:none;

        }

        div.fontlist{

            border:1px red dotted;

            height:400px;

            overflow:auto;

        }

        table.result{

            border-left:1px solid blue;

            border-bottom:1px solid blue;

            width:50%;

            margin:auto;

        }

        table.result th,table.result td{

            border-right:1px solid blue;

            border-top:1px solid blue;

            padding:5px;

        }

        .fl{

            float:left;

        }

        .fr{

            float:right;

        }

        .clearboth{

            clear:both;

        }

        .hidden{

            display:none;

        }

        div.Top_Error{

            position:fixed;

            bottom:0;

            left:0;

            z-index:99;

            width:50%;

            overflow:auto;

            color:red;

            background-color:white;

            border:1px green solid;

        }

        .red{

            color:red;

        }

        </style>

    </head>

    <body>

        <h1>测试字体宽度和高度</h1>

        <div class="content">

        <input type="button" class="test" value="获取字体高度"/>

        <h2>字体</h2>

        <div id="font">

        </div>

        <h2>结果</h2>

        <div class="fontlist">

        <table cellspacing="0" class="result">

            <caption>结果</caption>

            <thead>

            <tr>

            <th>字体大小</th>

            <th>字体高度</th>

            <th>字体宽度</th>

            </tr>

            </thead>

            <tbody></tbody>

        </table>

        </div>

        </div>

    <script>

        //初始化

        $(function(){

            initPage();

        })

        function initPage(){

            var $font = $('div#font');

            setFontSize('px',10,30);

            setFontSize('em',1,10,'red');

            //滚动条置顶

            $font.scrollTop(0);

        }

        //点击按钮[测试字体宽度和高度]

        $('input[type=button].test').click(function(){

            var $tbody = $('table.result tbody');

            $tbody.empty();

            var sbody="";

            sbody +=getFontSize();

            $tbody.append(sbody);

            //滚动条置顶

            $tbody.scrollTop(0);

        })

        //获取字体高度-宽度

        function setFontSize(sunit,b,e,classname){

            var $font=$('<div></div>');

            if(classname==undefined){

                classname="";

            }

            else

            {

                classname=" "+classname;

            }

            for(var i=b;i<=e;i++){

                var p = $('<div class="font fl'+ classname +'"></div>');

                p.css('fontSize',i + sunit);

                p.text('字');

                p.attr('title','字体大小'+i + sunit)

                $font.append(p);

            }

            $('div#font').append($font);

            $('div#font').append('<div class="clearboth"></div>');

        }

        //获取字体高度-宽度

        function getFontSize(){

            var sbody="";

            var classname="";

            $('div#font .font').each(function(i,val){

                var p = $(val);

                var title=p.attr('title').replace('字体大小','');

                if(title.indexOf('em')>-1){

                    classname="red";

                }

                sbody +="<tr class='"+ classname +"'>";

                sbody +="<td>"+ title + "</td>";

                sbody +="<td>"+ p.height() +"</td>";

                sbody +="<td>"+ p.width() +"</td>";

                sbody +="</tr>";

                console.log(title);

            });

            return sbody;

        }

        //获取当前日期

        var DateFormat = function (date,itype) {

            if (!(date instanceof Date)) {

                date = date.replace(/-/g, "/");

                date = new Date(date);

            }

            var month = date.getMonth() + 1;

            var year = date.getFullYear();

            var day = date.getDate();

            var Hour = date.getHours();

            var second = date.getSeconds();

            var minute = date.getMinutes();

            var NewDate="";

            if (month < 10) {

                month = "0" + month;

            }

            if (day < 10) {

                day = "0" + day;

            }

            NewDate = year + "-" + month + "-" + day;

            if(itype == 2){

                NewDate +=":" + Hour +":" + second +":" + minute;

            }

            return NewDate;

        }

        //组织错误提示窗口

        function setError(sError){

            var div = $('div.Top_Error');

            if(div.length == 0){

                div='<div class="Top_Error"><div class="fr"><button onclick="hiddenerr()" class="hiddenerr">关闭</button></div><div class="ErrContent"><ul></ul></div></div>';

                $('body').append(div);

            }

            div = $('div.Top_Error ul');

            var p = '<p>' + DateFormat(Date(),2) + '</p>';

            p += '<p>' + sError + '</p>';

            div.append('<li>' + p + '</li>')

            console.log($('.Top_Error .toggle'));

        }

        //全局错误捕获

        window.onerror = function (sMsg, sUrl, sLine) {

            var sContent = "<p>信息：" + sMsg + "</p>" + "<p>网页：" + sUrl + "</p>" + "<p>行：" + sLine + "</p>";

            //alert(sContent);

            setError(sContent);

            return true;

        }

    </script>

    </body>

</html>

示例代码

下面是运行截图：

可以参照博文：

http://www.cnblogs.com/leejersey/p/3662612.html

CSS中字体尺寸总结的更多相关文章

  1. 有关CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  2. CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  3. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  4. CSS中的尺寸单位

    绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...

  5. [css 实践篇]CSS中的尺寸单位

    绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...

  6. css中字体大小在不同浏览器兼容性问题

    css中使用font-size设定字体大小,不同浏览器的字体height一样,但是width不同,比如在火狐和谷歌中,font-size:20px,字体的高度变为20px,但是谷歌的字体宽度比火狐长 ...

  7. 认识CSS中字体图标

    前端之HTML,CSS(十一) 字体图标 使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...

  8. css中字体单位px,pt,em,百分比之间的区别和用法

    px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素htm ...

  9. css 中字体大小

    css属性font-size可以用来设置字体的大小, 可是有时候看到大小的设置是font:bold 20px/24px Verdana, Geneva, sans-serif; 这里的20px/24p ...

随机推荐

  1. UITabBarController+微博简单模拟1

    UITabBarController是IOS中很常用的一个viewController.UITabBarController通常作为整个程序的rootViewController,而且不能添加到别的c ...

  2. Ubuntu下安装arm-linux-gcc

    安装步骤: 这里采用友善之臂发布的arm-linux-gcc-4.4.3.tar.gz软件包. 一.将压缩包arm-linux-gcc-4.4.3.tar.gz存放在opt目录下. 执行解压命令:su ...

  3. java教程

    http://www.xfonlineclass.com/ http://java.itcast.cn/ http://www.xasxt.com/index.php/list/161 [UI]htt ...

  4. 表达式 - PHP手册笔记

    PHP是一种面向表达式的语言.表达式的定义可以描述为,任何有值的东西. PHP支持全等运算符===(值和类型均相同)和非全等运算符!==(值或者类型不同). PHP的三元条件运算符貌似和C语言不太一样 ...

  5. windows程序设计读书笔记1——创建窗口

    第一个win32程序,简单的创建窗口: #include <windows.h> LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ...

  6. Lwip lwip_recvfrom函数一个数据包不能分多次读取。

    最近在写一个基于Lwip协议栈的网络程序,对于一包数据,想先获得包头信息,再根据包头信息读取后面的数据,但是调用recvfrom后,发现读取后面的数据读取不到,进一步查阅发现,原来对于UDP协议,一次 ...

  7. MYSQL 的 3 类数据类型

    1.数据型: bool,float,double decimal(M,D) M是小数位数(精度)的总数,D是小数点(标度)后面的位数.DECIMAL整数最大位数(M)为65. smallint 小的整 ...

  8. 2014第6周五JS调试

    今天才发现chrome调试前端尤其是JS真是很方便,难怪之前公司几个前端高手都用chrome的开发者工具来调试.把今天知道的chrome调试方法收集整理一下,在今后的开发调试中都可能会用到: Prof ...

  9. Python中and和or

    转自:http://unei66.blog.163.com/blog/static/544640292010320745886/ python中的and和or 4.6. and 和 or 的特殊性质在 ...

  10. 【Android】Intent中使用Extra传递数据

    传值方法一 Intent intent = new Intent(); Bundle bundle = new Bundle(); //该类用作携带数据 bundle.putString(" ...