Javascript 字体大小自动调整以适应

我试着做标题上说的事。我看到

字体大小可以是一个百分比。所以我猜
字体大小：100%
可以，但不行

以下是一个例子：

我能得到一些帮助吗

（如果有必要用js编程，那么就没有问题）
用CSS做不到

100%与父元素的计算字体大小有关

参考：

对于jQuery解决方案，请看
，这个问题可能会帮助您解决问题，但我警告您，这可以通过jQuery解决问题：


祝你好运

这个问题的OP制作了一个插件，（&）

顺便说一句，我建议使用jQuery，因为这无法通过CSS完成，而且你说你愿意使用js…
这里我有一个mootools解决方案：

Element.implement("fitText", function() {
                var e = this.getParent();
                var maxWidth = e.getSize().x;
                var maxHeight = e.getSize().y;
                console.log(maxWidth);
                var sizeX = this.getSize().x;
                var sizeY = this.getSize().y;
                if (sizeY <= maxHeight && sizeX <= maxWidth)
                    return;

                var fontSize = this.getStyle("font-size").toInt();
                while( (sizeX > maxWidth || sizeY > maxHeight) && fontSize > 4 ) {
                    fontSize -= .5;
                    this.setStyle("font-size", fontSize + "px");
                    sizeX = this.getSize().x;
                    sizeY = this.getSize().y;
                }
                return this;
            });

            $$("span").fitText();

Element.implement（“fitText”，function（））{
var e=this.getParent（）；
var maxWidth=e.getSize（）.x；
var maxHeight=e.getSize（）.y；
console.log（最大宽度）；
var sizeX=this.getSize（）.x；
var sizeY=this.getSize（）.y；
如果（sizeY maxHeight）和fontSize>4）{
字体大小-=.5；
此.setStyle（“字体大小”，fontSize+“px”）；
sizeX=this.getSize（）.x；
sizeY=this.getSize（）.y；
}
归还这个；
});
$$（“span”）.fitText（）；
有点晚了，但我就是这样处理这个问题的：

document.body.setScaledFont = function() {
    var f = 0.35, s = this.offsetWidth, fs = s * f;
    this.style.fontSize = fs + '%';
    return this
}
document.body.setScaledFont();

现在已设置基本文档字体

对于dom中的其余元素，将字体大小设置为%或em，它们将按比例缩放。
我在研究这一问题，我喜欢tnt rox的答案，但我忍不住注意到它有一些额外的开销，可以减少。

如果将其添加到onresize事件中，减少开销会使其运行更快一些

如果您只希望将特定元素中的字体设置为调整大小以适应，还可以执行以下操作


我只是注意到尼古拉斯的回答也有一些额外的开销。我把它清理了一点。从性能的角度来看，我不太喜欢使用while循环，然后慢慢缩小尺寸，直到找到合适的为止。

下面是另一个jQuery解决方案

/**
 * Resizes page header font-size for the text to fit.
 * basically we add a hidden span into the header,
 * put the text into it and then keep reducing the super large font-size
 * for as long as the height of the span exceeds the super
 * tall line-height set for the test (indicating there is more than one line needed
 * to show the text).
 */
function setPageHeaderFontSize(selectorString) {
    jQuery(selectorString).each(
        function(i, el) {
            var text = jQuery(el).text();
            var length = text.length;
            if(length) {
                var id = "TestToSeeLengthOfElement_" + i;
                jQuery(el).append("<span style='visibility: hidden; width: 100%; position: absolute; line-height: 300px; top: 0; left: 0; overflow: visible; display: table-cell;' id='"+id+"'>"+text+"</span>");
                var innerEl = jQuery("#"+id);
                var height = 301;
                var fontSize = 200;
                while(height > 300 && fontSize > 10) {
                    height = jQuery(innerEl).css("font-size", fontSize).height();
                    fontSize--;
                }
                jQuery(innerEl).remove();
                jQuery(el).css("font-size", fontSize+"px");
            }
        }
    );
}

//you can run it like this... using any jQuery enabled selector string (e.g. h1.pageHeaders works fine). 
setPageHeaderFontSize("#MyDiv");

/**
*调整页眉字体大小以适合文本。
*基本上，我们在标题中添加了一个隐藏跨距，
*将文本放入其中，然后继续缩小超大字体大小
*只要跨距的高度超过超高
*为测试设置的高线高度（表示需要多条线
*显示文本）。
*/
函数setPageHeaderFontSize（选择器字符串）{
jQuery（selectorString）。每个(
功能（i，el）{
var text=jQuery（el）.text（）；
var length=text.length；
if（长度）{
var id=“testtoseeelengthofelement”+i；
jQuery（el）.append（“+text+”）；
var innerEl=jQuery（“#”+id）；
var高度=301；
var-fontSize=200；
而（高度>300&&fontSize>10）{
height=jQuery（innerEl）.css（“font-size”，fontSize）.height（）；
字体大小--；
}
jQuery（innerEl.remove（）；
jQuery（el）.css（“字体大小”，fontSize+“px”）；
}
}
);
}
//你可以这样运行它。。。使用任何启用jQuery的选择器字符串（例如h1.pageHeaders可以正常工作）。
setPageHeaderFontSize（“MyDiv”）；
以下是一种查找所用文本高度的方法。
它很简单，只使用javascript。可以使用此选项相对于所需高度调整文本

function getTextHeight(text, fontSize) {
    var numberOfLines = 0;
    var STL = text;
    for(var i = 0; i < STL.length; i++){
    if(STL[i] === '<'){
        try{
            if(STL[i + 1] === 'b' && STL[i + 2] === 'r' && STL[i + 3] === '>'){
                numberOfLines++;
            }
        }
        catch(err){
            break;
        }
    }
    return (numberOfLines + 1) * fontSize;
}

函数getTextHeight（文本，fontSize）{
var numberOfLines=0；
var STL=文本；
对于（变量i=0；i

谢谢@Gaby，现在我理解了

字体大小

和百分比：）。但仍在寻找答案。@Diego，更新了答案，并在SO中链接到另一个答案@Akinator也发布了它。太简单了，我迷上了JavaScript解决方案。简单css解决了这个问题。谢谢。我在这里总结了这个答案：谢谢。这是给任何想看它的人的：非常感谢你分享解决的问题，这真的很有帮助，这就是事情应该如何做+1！@ChrisBaker的可能重复链接的问题是关于jQuery的，这个问题不是，所以我不会将它标记为重复。@PeterOlson考虑到接受答案的全部内容都链接到该答案，如果没有链接，这个接受的答案将100%无用，这是一个应该标记为重复的问题的完美示例。否则，这就是“你的答案在另一座城堡里”的一个很好的例子，这是一个无论何时你看到它都要避免和消除的问题。

function setPageHeaderFontSize(selector) {
    var $ = jQuery;
    $(selector).each(function(i, el) {
        var text = $(el).text();
        if(text.length) {
            var span = $("<span>").css({
                    visibility: 'hidden',
                    width: '100%',
                    position: 'absolute',
                    'line-height': '300px',
                    top: 0,
                    left: 0,
                    overflow: 'visible',
                    display: 'table-cell'
                }).text(text),
                height = 301,
                fontSize = 200;
            $(el).append(span);
            while(height > 300 && fontSize > 10) {
                height = span.css("font-size", fontSize).height();
                fontSize--;
            }
            span.remove();
            $(el).css("font-size", fontSize+"px");
        }
    });
}
setPageHeaderFontSize("#MyDiv");

$(function(){
    var scaledFont = function(el){
            if(el.style !== undefined){
                el.style.fontSize = (el.offsetWidth*0.35)+'%';
            }
            return el;
        };
    $(window).resize(function(){
        $('.container>nav').each(scaledFont);
    }).resize();
});

/**
 * Resizes page header font-size for the text to fit.
 * basically we add a hidden span into the header,
 * put the text into it and then keep reducing the super large font-size
 * for as long as the height of the span exceeds the super
 * tall line-height set for the test (indicating there is more than one line needed
 * to show the text).
 */
function setPageHeaderFontSize(selectorString) {
    jQuery(selectorString).each(
        function(i, el) {
            var text = jQuery(el).text();
            var length = text.length;
            if(length) {
                var id = "TestToSeeLengthOfElement_" + i;
                jQuery(el).append("<span style='visibility: hidden; width: 100%; position: absolute; line-height: 300px; top: 0; left: 0; overflow: visible; display: table-cell;' id='"+id+"'>"+text+"</span>");
                var innerEl = jQuery("#"+id);
                var height = 301;
                var fontSize = 200;
                while(height > 300 && fontSize > 10) {
                    height = jQuery(innerEl).css("font-size", fontSize).height();
                    fontSize--;
                }
                jQuery(innerEl).remove();
                jQuery(el).css("font-size", fontSize+"px");
            }
        }
    );
}

//you can run it like this... using any jQuery enabled selector string (e.g. h1.pageHeaders works fine). 
setPageHeaderFontSize("#MyDiv");

function getTextHeight(text, fontSize) {
    var numberOfLines = 0;
    var STL = text;
    for(var i = 0; i < STL.length; i++){
    if(STL[i] === '<'){
        try{
            if(STL[i + 1] === 'b' && STL[i + 2] === 'r' && STL[i + 3] === '>'){
                numberOfLines++;
            }
        }
        catch(err){
            break;
        }
    }
    return (numberOfLines + 1) * fontSize;
}