html自适应字号

 

目前完成了一个可以自适应字号的插件，可以提供使用，项目地址，插件介绍

 

---

 

在开发过程中有遇到需要根据界面dom的宽高来设置自适应字号大小，现将开发思路分享

在页面dom元素的宽和高都有限制的情况下，无法为所有的元素设置同样的字号大小，而将字号设置过小又不利于界面美观，所以我开发的思路是通过JS来动态控制dom中的字号大小，即通过JS获取dom的宽度和高度，再将字号从12px开始累加，直到字号可以适应dom的宽高为止，最后得到的字号即为需要的字号

这里我是使用angularjs开发的，故将编写的指令贴出来以供参考

app.directive("autoFontSize",['$timeout',function ($timeout) {
    return {
        restrict:'A',
        link:function(scope, element, attr) {
            attr.$observe("autoFontSize",function (interpolatedValue) {
                if(interpolatedValue!=undefined&&interpolatedValue!="") {
                    var maxWidth = parseInt(attr.domMaxWidth);
                    var maxHeight = parseInt(attr.domMaxHeight);
                    var text = attr.autoFontSize;
                    var nowSize = 12;
                    var maxSize = 200;
                    angular.element(element).html(text);
                    for (; nowSize < maxSize; nowSize+=2) {
                        angular.element(element).css("font-size", nowSize + "px");
                        var nowWidth = $(element)[0].offsetWidth;
                        var nowHeight = $(element)[0].offsetHeight;
                        if (nowWidth >= maxWidth || nowHeight >= maxHeight) {
                            angular.element(element).css("font-size", (nowSize-2) + "px");
                            break;
                        }
                    }
                }
                else{
                    angular.element(element).html("").css("font-size", "12px");
                }
            })
        }
    }
}])

<style type="text/css">
    .font-cont{
        width: 200px;
        height:50px;
        line-height: 50px;
        overflow: hidden;
        box-sizing: border-box;
        text-align: center;
    }
    .font-cont span{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
</style>

<div class="font-cont">
    <span auto-font-size="{{text}}" dom-max-width="200" dom-max-height="50"></span>
</div>

 

 

 

这里我是在字号累加之前将dom元素隐藏，在已经取得需要的字号以后再将dom元素设置可见，在本地测试时未发现有界面闪烁等异常，如界面需要处理的元素过多或者需要作定时刷新数据时，可能需要考虑页面的性能问题

需要注意的是，在css中需要对dom元素的样式做一些设置，如可能需要设置内容不换行、内容溢出、box-sizing等，根据实际情况自行设置

如果需要设置多个dom自适应字号时，也可以使用这个思路处理。

原文地址: html 自适应字号

代码在github中的传送门：github--自适应字号