HTML 적응형 글꼴 크기

이 기사에서는 특정 참조 값이 있는 HTML 적응형 글꼴 크기를 주로 소개합니다. 이제 모든 사람과 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.

개발 과정에서 사용자 정의 글꼴 크기를 설정해야 할 필요성이 발생했습니다. 인터페이스 돔의 너비와 높이를 글꼴 크기에 맞추기 위해 이제 개발 아이디어를 공유하겠습니다

페이지 돔 요소의 너비와 높이가 제한되면 모든 요소에 동일한 글꼴 크기를 설정할 수 없습니다. , 그리고 글꼴 크기를 너무 작게 설정하는 것은 인터페이스의 미에 도움이 되지 않기 때문에 제가 개발한 아이디어는 JS를 통해 DOM의 글꼴 크기를 동적으로 제어하는 ​​것, 즉 JS를 통해 돔의 너비와 높이를 구하는 것입니다. 그런 다음 글꼴 크기가 dom의 너비와 높이에 적응할 수 있을 때까지 글꼴 크기를 12px로 누적합니다.

***.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을 수정해야 한다는 점에 유의해야 합니다. 콘텐츠 줄바꿈 안 함, 콘텐츠 오버플로, 상자 크기 등을 설정해야 할 수도 있습니다. 실제 상황에 따라 직접 설정하세요

여러 DOM 적응형 글꼴 크기를 설정해야 하는 경우 이 아이디어를 사용하여 처리할 수도 있습니다. with it

관련 추천:

HTML 하이퍼링크 자세히 설명

위 내용은 HTML 적응형 글꼴 크기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!