html自顺应字号-百分百源码网

html自顺应字号

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要介绍了关于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自顺应字号时，也可以使用这个思绪处置