web-dev-qa-db-ja.com

フォントサイズは自動で調整されます

私はタイトルが言うことをやろうとしている。 font-sizeはパーセンテージにすることができます。だから私の推測はfont-size: 100%;はそれを行いますが、いいえ。

以下に例を示します。 http://jsfiddle.net/xVB3t/

助けてもらえますか？

（jsを使用してプログラムで行う必要がある場合は問題ありません）

javascripthtmlcssfontsfont-size
20
Diego

この質問はあなたを助けるかもしれませんが、これはjQueryを介してそれを解決しますが、私はあなたに警告します：

固定サイズのコンテナに合わせてダイナミックテキストを自動サイズ調整

幸運を。

その質問のOPはプラグインを作成しました ここへのリンクがあります （＆ download ）

ところで Gabyが指摘したように これはCSSのみで行うことができないため、jQueryを提案しています。

14
Trufa

CSSではできません。

100％は、計算されたfont-size親要素の。

参照： http://www.w3.org/TR/CSS2/fonts.html#font-size-props

JQueryソリューションについては、 固定サイズのコンテナに合わせてダイナミックテキストを自動サイズ調整

5
Gabriele Petrioli

私はこれを仕事で探していて、tnt-roxの答えが好きでしたが、余分なオーバーヘッドがあり、それをカットできることに気づかずにはいられませんでした。

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

オーバーヘッドを削減すると、onresizeイベントに追加すると、オーバーヘッドが少し速くなります。

特定の要素内のフォントをサイズに合わせてサイズ変更するだけの場合は、次のようなこともできます

window.onload = function(){
    var scaledFont = function(el){
            if(el.style !== undefined){
                el.style.fontSize = (el.offsetWidth*0.35)+'%';
            }
            return el;
        }
        navs = document.querySelectorAll('.container>nav'),
        i;
    window.onresize = function(){
        for(i in navs){
            scaledFont(navs[i]);
        }
    };
    window.onresize();
};

ニコラスの答えにもオーバーヘッドが追加されていることに気付きました。少し整理しました。パフォーマンスの観点から、私は実際にはwhileループを使用し、適切なループが見つかるまでゆっくりとサイズを下げることを好むわけではありません。

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");

そして、jqueryを使用した以前のコードの例を次に示します。

$(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();
});
3
Eeems

少し遅れましたが、これは私がこの問題に取り組む方法です：

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に設定すると、それに比例して拡大縮小されます。

1
tnt-rox

ここに別の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");
0
nicolaas thiemen francken

ここに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();
0
Karl Adler

使用しているテキストの高さを見つける方法は次のとおりです。シンプルで、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;
}
0
Launch9