Ich habe einen Container mit einer Breite und Höhe von%, der abhängig von externen Faktoren skaliert. Ich möchte, dass die Schriftart im Container eine konstante Größe im Verhältnis zur Größe der Container hat. Gibt es eine gute Möglichkeit, dies mit CSS zu tun? Das font-size: x%
würde die Schrift nur entsprechend der ursprünglichen Schriftgröße skalieren (die 100% betragen würde).
javascript
css
font-size
FurtiveFelon
quelle
quelle
Antworten:
Möglicherweise können Sie dies mit CSS3 mithilfe von Berechnungen tun. Es ist jedoch höchstwahrscheinlich sicherer, JavaScript zu verwenden.
Hier ist ein Beispiel: http://jsfiddle.net/8TrTU/
Mit JS können Sie die Höhe des Texts ändern und diese Berechnung dann einfach an ein Größenänderungsereignis binden, während die Größe geändert wird, damit sie skaliert wird, während der Benutzer Anpassungen vornimmt, oder wenn Sie die Größenänderung Ihrer Elemente zulassen.
quelle
window.onresize = function(event) { yourFunctionHere(); };
wenn der Benutzer beschließt, die Größe seiner Seite zu ändern, nachdem er Ihre Schriftart geladen hat, wird die Größe entsprechendWenn Sie die Schriftgröße als Prozentsatz der Breite des Ansichtsfensters festlegen möchten, verwenden Sie die
vw
Einheit:Die andere Alternative ist die Verwendung von in HTML eingebettetem SVG. Es werden nur ein paar Zeilen sein. Das Schriftgrößenattribut für das Textelement wird als "Benutzereinheiten" interpretiert, z. B. diejenigen, für die das Ansichtsfenster definiert ist. Wenn Sie das Ansichtsfenster als 0 0 100 100 definieren, entspricht eine Schriftgröße von 1 einem Hundertstel der Größe des SVG-Elements.
Und nein, es gibt keine Möglichkeit, dies in CSS mithilfe von Berechnungen zu tun. Das Problem besteht darin, dass Prozentsätze, die für die Schriftgröße verwendet werden, einschließlich Prozentsätzen innerhalb einer Berechnung, als geerbte Schriftgröße und nicht als Größe des Containers interpretiert werden. CSS könnte
bw
zu diesem Zweck eine Einheit namens (Box-Breite) verwenden, könnte man sagendiv { font-size: 5bw; }
, aber ich habe diesen Vorschlag noch nie gehört.quelle
vw
relativ zum Ansichtsfenster und nicht zur Containergröße ist. Wahrscheinlich in vielen Fällen nützlich, aber svg hat bei mir besser funktioniert.Eine weitere Alternative:
Arbeitsbeispiel
Oder wie in der Antwort von torazaburo angegeben, könnten Sie svg verwenden. Ich habe ein einfaches Beispiel als Proof of Concept zusammengestellt:
SVG-Beispiel
quelle
Ich habe Fittext für einige meiner Projekte verwendet und es scheint eine gute Lösung für ein solches Problem zu sein.
quelle
Es kann nicht mit CSS erreicht werden font-size
Angenommen, "externe Faktoren", auf die Sie sich beziehen, könnten von Medienabfragen erfasst werden, könnten Sie sie verwenden - Anpassungen müssen wahrscheinlich auf eine Reihe vordefinierter Größen beschränkt werden.
quelle
Hier ist die Funktion:
Konvertieren Sie dann alle Schriftgrößen der untergeordneten Elemente Ihres Dokuments in ems oder%.
Fügen Sie dann Ihrem Code so etwas hinzu, um die Basisschriftgröße festzulegen.
http://jsfiddle.net/0tpvccjt/
quelle
Ich hatte ein ähnliches Problem, musste aber andere Probleme berücksichtigen, die im Beispiel @ apaul34208 nicht behoben wurden. In meinem Fall;
Nicht das eleganteste Beispiel, aber es macht den Trick für mich. Erwägen Sie die Drosselung der Fenstergröße ( https://lodash.com/ ).
https://jsfiddle.net/Merch80/b8hoctfb/7/
quelle
Ich habe in dieser Antwort eine detailliertere Antwort zur Verwendung
vw
in Bezug auf bestimmte Containergrößen gegeben , damit ich meine Antwort hier nicht einfach wiederhole.Zusammenfassend geht es jedoch im Wesentlichen darum, die Containergröße in Bezug auf das Ansichtsfenster zu
vw
berücksichtigen (oder zu steuern) und dann die richtige Größe basierend auf der Größe für den Container zu ermitteln, wobei zu berücksichtigen ist, was geschehen muss wenn die Größe von etwas dynamisch geändert wird.Wenn Sie also eine
5vw
Größe für einen Container mit 100% der Breite75%
des Ansichtsfensters wünschen, möchten Sie wahrscheinlich eine Größe für die Breite des Ansichtsfensters(5vw * .75) = 3.75vw
.quelle
Wenn Sie es abhängig von der Elementbreite skalieren möchten, können Sie diese Webkomponente verwenden:
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:
quelle
Sie können auch diese reine CSS-Methode ausprobieren:
quelle