it-swarm.com.de

Schriftgröße wird automatisch angepasst

Ich versuche zu tun, was der Titel sagt. Ich habe gesehen, dass font-size ein Prozentsatz sein kann. Meine Vermutung war also, dass font-size: 100%; es tun würde, aber nein.

Hier ist ein Beispiel: http://jsfiddle.net/xVB3t/

Kann ich bitte etwas Hilfe bekommen?

(Wenn es notwendig ist, programmgesteuert mit js zu arbeiten, gibt es kein Problem.)

19
Diego

Diese Frage könnte Ihnen helfen, aber ich warne Sie, dass dies durch jQuery gelöst wird:

Dynamischer Text in automatischer Größe zum Füllen von Behältern mit fester Größe

Viel Glück.

Das OP dieser Frage hat ein Plugin gemacht, hier ist der Link dazu (& Download )

Übrigens, ich schlage vor, jQuery, weil da Gaby wies dies nicht möglich ist, obwohl nur CSS und Sie sagten, Sie wären bereit, js zu verwenden ...

13
Trufa

Kann nicht mit CSS gemacht werden.

100% bezieht sich auf den berechneten font-size des übergeordneten Elements.

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

Eine jQuery-Lösung finden Sie unter Dynamischer Text in automatischer Größe zum Füllen fester Container

5

Ich habe mich hier für die Arbeit umgesehen und mochte die Antwort von Tnt-rox, aber ich konnte nicht umhin zu bemerken, dass es einen zusätzlichen Aufwand gab, der ausgeschnitten werden konnte.

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

Durch das Ausschneiden des Overheads wird es etwas schneller ausgeführt, wenn Sie es zu einem Onresize-Ereignis hinzufügen.

Wenn Sie nur die Schrift in einem bestimmten Element so einstellen möchten, dass die Größe angepasst wird, können Sie auch Folgendes tun:

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

Ich habe gerade bemerkt, dass Nicolaas 'Antwort auch etwas mehr Aufwand hatte. Ich habe es ein bisschen aufgeräumt. Aus Sicht der Performance bin ich nicht wirklich ein Fan davon, eine while-Schleife zu verwenden und die Größe langsam nach unten zu verschieben, bis Sie eine passende gefunden haben.

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

Und hier ist ein Beispiel für meinen früheren Code, der jquery ..__ verwendet.

$(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

Ein bisschen spät, aber so gehe ich an dieses Problem heran:

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

Die Basisdokumentschriftart ist jetzt festgelegt.

Für die restlichen Elemente in der dom setzen Sie die Schriftgrößen auf% oder em und skalieren sie proportional.

1
tnt-rox

Hier ist eine weitere jQuery-Lösung ... 

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

hier habe ich eine mootools lösung:

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

Hier finden Sie eine Möglichkeit, die Höhe des Texts zu ermitteln, den Sie verwenden .. __ Es ist einfach und verwendet nur Javascript. Sie können dies verwenden, um Ihren Text relativ zur gewünschten Höhe anzupassen.

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