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

成都創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站重做改版、廣南網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城系統(tǒng)網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為廣南等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

在開(kāi)發(fā)過(guò)程中有遇到需要根據(jù)界面dom的寬高來(lái)設(shè)置自適應(yīng)字號(hào)大小，現(xiàn)將開(kāi)發(fā)思路分享

在頁(yè)面dom元素的寬和高都有限制的情況下，無(wú)法為所有的元素設(shè)置同樣的字號(hào)大小，而將字號(hào)設(shè)置過(guò)小又不利于界面美觀，所以我開(kāi)發(fā)的思路是通過(guò)JS來(lái)動(dòng)態(tài)控制dom中的字號(hào)大小，即通過(guò)JS獲取dom的寬度和高度，再將字號(hào)從12px開(kāi)始累加，直到字號(hào)可以適應(yīng)dom的寬高為止，最后得到的字號(hào)即為需要的字號(hào)

這里我是使用angularjs開(kāi)發(fā)的，故將編寫(xiě)的指令貼出來(lái)以供參考

***.directive("doCalculateFontsize",['$timeout',function ($timeout) {
    /*
    *   通用的字體大小自適應(yīng)，通過(guò)在改變字體大小的同時(shí)計(jì)算dom元素的寬高是否超界實(shí)現(xiàn)
    * */
    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");
            }
        })
    };
}])

這里我是在字號(hào)累加之前將dom元素隱藏，在已經(jīng)取得需要的字號(hào)以后再將dom元素設(shè)置可見(jiàn)，在本地測(cè)試時(shí)未發(fā)現(xiàn)有界面閃爍等異常，如界面需要處理的元素過(guò)多或者需要作定時(shí)刷新數(shù)據(jù)時(shí)，可能需要考慮頁(yè)面的性能問(wèn)題

需要注意的是，在css中需要對(duì)dom元素的樣式做一些設(shè)置，如可能需要設(shè)置內(nèi)容不換行、內(nèi)容溢出、box-sizing等，根據(jù)實(shí)際情況自行設(shè)置

如果需要設(shè)置多個(gè)dom自適應(yīng)字號(hào)時(shí)，也可以使用這個(gè)思路處理

以上是“html如何實(shí)現(xiàn)自適應(yīng)字號(hào)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！