Wie wird die Schriftgröße basierend auf der Containergröße festgelegt?

Ich habe einen Behälter, der eine % Breite und Höhe, so dass es Skalen in Abhängigkeit von äußeren Faktoren. Ich möchte die schriftart im inneren des Behälters zu einer Konstanten Größe im Verhältnis zu der Größe der Behälter. Gibt es eine gute Möglichkeit, dies zu tun mit CSS? Die font-size: x% würde nur skalieren der schriftart nach dem original-Schriftgröße (die wäre 100%).

InformationsquelleAutor der Frage FurtiveFelon | 2012-04-24

29

Können Sie in der Lage, dies zu tun mit CSS3 mithilfe von Berechnungen, jedoch wäre es wahrscheinlich sicherer sein, JavaScript zu verwenden.

Hier ist ein Beispiel: http://jsfiddle.net/8TrTU/

Mit JS ändern Sie die Höhe des Textes, dann einfach binden Sie diese gleiche Berechnung für ein resize-Ereignis aus, während die Größe so skaliert werden, während der Benutzer die Einstellungen vorgenommen werden, oder aber Sie erlaubt die änderung der Größe der Elemente.

InformationsquelleAutor der Antwort Matthew Riches
146

Wenn Sie möchten, um die schriftart-Größe als Prozentsatz der viewport-Breite, verwenden Sie die vwEinheit:
```
#mydiv { font-size: 5vw; }
```
Die andere alternative ist die Verwendung von SVG eingebettet in den HTML-Code. Es wird nur ein paar Zeilen. Die font-size-Attribut, um das element text wird interpretiert als "user units", etwa jene der viewport definiert. Also, wenn Sie definieren viewport 0 0 100 100 dann eine font-size von 1 Hundertstel der Größe der svg-element.

Und Nein, es gibt keine Möglichkeit, dies zu tun in CSS mithilfe von Berechnungen. Das problem ist, dass Prozentsätze verwendet für font-size, einschließlich der Prozentsätze innerhalb einer Berechnung, werden interpretiert im Hinblick auf die vererbten Schriftgröße, nicht die Größe der container. CSS könnte ein Gerät namens bw (box-Breite) für diesen Zweck, so könnte man sagen div { font-size: 5bw; }aber ich habe noch nie gehört, dass dies vorgeschlagen wird.

InformationsquelleAutor der Antwort

Anderen js-alternative:

Beispiel

fontsize = function () {
    var fontSize = $("#container").width() * 0.10; //10% of container width
    $("#container h1").css('font-size', fontSize);
};
$(window).resize(fontsize);
$(document).ready(fontsize);

Oder wie es in torazaburo Antwortdie Sie nutzen könnten svg. Ich habe ein einfaches Beispiel als proof-of-concept:

SVG-Beispiel

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg>
</div>

InformationsquelleAutor der Antwort apaul

6

Es nicht erreicht werden, die mit css font-size

Davon aus, dass "externe Faktoren", auf die Sie sich beziehen könnte abgeholt werden durch media queries, könnten Sie Sie verwenden - Anpassungen wird wahrscheinlich begrenzt sein, um eine Reihe von vordefinierten Größen.

InformationsquelleAutor der Antwort o.v.
6

Ich verwendet Fittext auf einige meiner Projekte und es sieht aus wie eine gute Lösung, um ein problem wie dieses.

FitText macht die font-Größen flexibel. Verwenden Sie dieses plugin auf Ihrem fluid oder responsive layout zu erreichen, skalierbare Schlagzeilen füllen, dass die Breite des übergeordneten Elements.

InformationsquelleAutor der Antwort ElvinD

Hier ist die Funktion:

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

Dann konvertieren Sie alle Ihre Dokumente zu child-element der Schriftgröße auf em oder %.

Dann fügen Sie so etwas wie dies, zu Ihrem code die Basis-Schriftgröße.

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

InformationsquelleAutor der Antwort tnt-rox

0

Die ich gegeben habe, eine detaillierte Antwort mit vw mit Bezug zu bestimmten container sizing in dieser Antwortalso ich nicht wiederholen Sie einfach meine Antwort hier.

In der Zusammenfassung, allerdings ist es im wesentlichen eine Frage der factoring (oder Steuerung), was die container-Größe, wird mit Bezug auf die Ansichtsfenster, und dann arbeiten Sie heraus, die richtige vw sizing basiert auf, dass für die container, wobei der Geist dessen, was geschehen muss, wenn etwas ist dynamisch geändert werden.

Also, wenn Sie wollten eine 5vw Größe auf ein container auf 100% der viewport-Breite, dann ein zu 75% von der viewport-Breite, die Sie möchten wahrscheinlich, dass sein (5vw * .75) = 3.75vw.

InformationsquelleAutor der Antwort ScottS
0

Wenn Sie wollen, um es zu skalieren abhängig von der Elementbreite, können Sie mit dieser web-Komponente:

https://github.com/pomber/full-width-text

Überprüfen Sie die demo hier:

https://pomber.github.io/full-width-text/

Die Verwendung ist wie folgt:
```
<full-width-text>Lorem Ipsum</full-width-text>
```
InformationsquelleAutor der Antwort pomber
-2

Können Sie auch versuchen, diese Reine CSS-Methode:
```
font-size: calc(100% - 0.3em);
```
InformationsquelleAutor der Antwort Angie

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.