CSS中字体尺寸总结

下面是我总结的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

posted @ 2014-09-11 13:46  前端E龙  阅读(2293)  评论(0)  编辑  收藏  举报