javascript - 根据容器的宽高设置字体大小

Question

我正在尝试编写一个脚本，以便可以根据容器的宽度、高度和文本长度来设置font-size。

这就是我到目前为止所做的。

    window.onload = function () {
    var defaultDimensions = 300;
    var boxWidth = window.innerWidth / Math.floor(window.innerWidth / defaultDimensions);
    var boxes = document.getElementsByClassName('feed');
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].style.width = boxWidth + 'px';
        boxes[i].style.height = boxWidth + 'px';
    }
};
var getFontSizeStatus = function (text) {
    var chars = 250; // Maximum Characters
    var height = 300; // Default Height
    if (text.length < chars) {
        chars = text.length;
    }
    if ((window.innerWidth / Math.floor(window.innerWidth / height)) < height) {
        height = window.innerWidth / Math.floor(window.innerWidth / height);
    }
    height = (height / 10) * 8; // .feed-text height is 80% of .feed's height

    var size = height / chars;
    return size + 'em';
}

这是完整的代码，fiddle.

当前代码可以正常工作，但字体大小与容器高度、宽度和文本长度的比例需要固定。

Answer 1

我会尝试使用像 fitText 这样的 jQuery 插件

http://fittextjs.com/