CSS中字體尺寸總結

時間 2019-12-11

標籤 css 字體尺寸總結欄目 CSS 简体版

原文原文鏈接

下面是我總結的css中關於字體尺寸的知識，歡迎高手拍磚！css

前端開發過程當中，咱們常常會遇到設置某個div固定顯示幾行文本；這時咱們須要精確計算每一個字號字體的寬度和高度。html

下面是w3school中描述的尺寸的單位：前端

單位	描述
%	百分比
in	英寸
cm	釐米
mm	毫米
em	1em 等於當前的字體尺寸。jquery 2em 等於當前字體尺寸的兩倍。app 例如，若是某元素以 12pt 顯示，那麼 2em 是24pt。ide 在 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>