html如何實現自適應字號

小編給大家分享一下html如何實現自適應字號，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在開發過程中有遇到需要根據界面dom的寬高來設置自適應字號大小，現將開發思路分享

在頁面dom元素的寬和高都有限制的情況下，無法為所有的元素設置同樣的字號大小，而將字號設置過小又不利于界面美觀，所以我開發的思路是通過JS來動態控制dom中的字號大小，即通過JS獲取dom的寬度和高度，再將字號從12px開始累加，直到字號可以適應dom的寬高為止，最后得到的字號即為需要的字號

這里我是使用angularjs開發的，故將編寫的指令貼出來以供參考

***.directive("doCalculateFontsize",['$timeout',function ($timeout) {
    /*
    *   通用的字體大小自適應，通過在改變字體大小的同時計算dom元素的寬高是否超界實現
    * */
    return function(scope, element, attr) {
        attr.$observe("doCalculateFontsize",function (interpolatedValue) {
            if(interpolatedValue!=undefined&&interpolatedValue!="") {
                var maxwidth = parseInt(attr.domMaxWidth);
                var maxheight = parseInt(attr.domMaxHeight);
                var th = parseInt(attr.domTotalHeight);
                var text = attr.doCalculateFontsize;
                var nowsize = 12;
                var maxsize = 200;
                angular.element(element).css("visibility", "hidden").html(text).css("font-size", nowsize + "px");

                for (; nowsize < maxsize; nowsize++) {
                    var nowwidth = angular.element(element)[0].offsetWidth;
                    var nowheight = angular.element(element)[0].offsetHeight;

                    if (nowwidth >= maxwidth || nowheight >= maxheight) {
                        break;
                    }
                    else {
                        angular.element(element).css("font-size", nowsize + "px").css("marginTop", (th - 0.5 * nowheight) + "px").css("visibility", "visible");
                    }
                }
            }
            else{
                angular.element(element).css("visibility", "visible").html("").css("font-size", "12px");
            }
        })
    };
}])

這里我是在字號累加之前將dom元素隱藏，在已經取得需要的字號以后再將dom元素設置可見，在本地測試時未發現有界面閃爍等異常，如界面需要處理的元素過多或者需要作定時刷新數據時，可能需要考慮頁面的性能問題

需要注意的是，在css中需要對dom元素的樣式做一些設置，如可能需要設置內容不換行、內容溢出、box-sizing等，根據實際情況自行設置

如果需要設置多個dom自適應字號時，也可以使用這個思路處理

以上是“html如何實現自適應字號”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！