根据文本长度和窗口大小调整字体大小答案

【问题标题】：Adjust font size based on text length and window resize根据文本长度和窗口大小调整字体大小
【发布时间】：2014-06-01 19:00:30
【问题描述】：

我正在使用此代码根据元素标题内的文本长度调整文本大小。在用户调整浏览器的大小之前，这很有效。如果用户的窗口变小，可以做些什么来调整文本大小。例如，如果窗口宽度小于 600 像素，则更改字体大小。

如何在页面加载时做到这一点，执行代码现在所做的事情 - 而且还可以在调整浏览器大小时更改字体大小？

$(".title").css('font-size', function () { // get length of text for title and adjust font size
    var $numWords = $(this).text().length;
    if (($numWords >= 1) && ($numWords < 40)) {
        return "26px";
    }
    else if (($numWords >= 40) && ($numWords < 60)) {
        return "24px";
    }
    else if (($numWords >= 60) && ($numWords < 100)) {
        return "22px";
    }
    else if (($numWords >= 100)) {
        return "20px";
    }
});

【问题讨论】：

也许您想试试FitText？它完全符合您的目标。

标签： javascript jquery

【解决方案1】：

<div id="cont" style="font-family: Verdana; background-color: #ccc;">
    <div id="textContent">fox jump over the lazy dog...fox jump over the lazy dog...fox jump over the lazy dog</div>
</div>  
<script>
    var textContainer = document.getElementById('cont');
    var text = document.getElementById('textContent');
    var textLength = text.innerText.length;
    var firstLoadWidth;

    if (textLength >= 1 && textLength < 40) {
        cont.style.fontSize = '26px';
    }
    else if (textLength >= 1 && textLength < 60) {
        cont.style.fontSize = '24px';
    }
    else if (textLength >= 1 && textLength < 100) {
        cont.style.fontSize = '22px';
    }
    else if (textLength > 100) {
        cont.style.fontSize = '20px';
    }

    window.addEventListener('load', function () {
        firstLoadWidth = window.innerWidth;
    });
    window.addEventListener('resize', function () {
        var getSize = window.innerWidth / firstLoadWidth;
        getSize <= 1 ? text.style.fontSize = getSize + 'em' : text.style.fontSize = '1em';
    }, false);
</script>

【讨论】：

【解决方案2】：

您可以为此使用 jQuery 的 resize() 函数 (http://api.jquery.com/resize/)

$(document).ready(function() {
    onResize()
});

onResize = function() {
    if(window.width() < 600){
        // Do stuff
     }
}

$(window).bind('resize', onResize);

【讨论】：

好的，我怎样才能结合调整大小功能，而且在调整大小事件之前让页面在初始加载时设置字体大小？
通过调用相同的函数 onload 为好。

【解决方案3】：

您可以像这样测量文本的实际渲染大小：

var text = $(this).text();
var tmp = $("<div/>").css({position: "absolute"}).text(text);
$("BODY").append(tmp);
var width = tmp.width();
tmp.remove();

如果您确保 div 的样式与页面上的样式相同（相同的字体、粗细、大小），那么这可以告诉您它将有多大。应该可以迭代它以搜索适合可用空间的大小（具有一些合理的截止）。如果一个页面上有成百上千个这样的标题，这会很慢，但对于几个标题应该没问题。

【讨论】：

【解决方案4】：

只需在字体大小中使用百分比

p {
font-size:200%;
}

百分比取决于父标签“div”的宽度

【讨论】：