Gibt es so etwas wie Min-Schriftgröße und Max-Schriftgröße?

99

Ich versuche, eine Schriftart in einem Div so zu gestalten, dass sie auf das Browserfenster reagiert. Bisher hat es perfekt funktioniert, aber der Eltern-Div hat einen max-widthvon 525px. Wenn Sie die Größe des Browsers weiter ändern, wird die Größe der Schriftart nicht gestoppt. Ich habe mich gefragt, ob es so etwas wie min-font-sizeoder max-font-sizegibt und ob es so etwas nicht gibt, ob es einen Weg gibt, etwas Ähnliches zu erreichen.

Ich dachte, dass die Verwendung von Prozentsätzen bei font-sizefunktionieren würde, aber das Textstück wird nicht entsprechend dem übergeordneten div skaliert. Folgendes habe ich:

Das CSS für das übergeordnete div:

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

Das CSS für den betreffenden Text:

.subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

Ich habe eine ganze Weile im Internet gesucht, aber ohne Erfolg.

Toby van Kempen
quelle
Zum ersten Mal habe ich gesehen, wie vw in Schriftarten verwendet wurde lol
Brandito

Antworten:

60

Nein, es gibt keine CSS-Eigenschaft für die minimale oder maximale Schriftgröße. Browser haben häufig eine Einstellung für die Mindestschriftgröße, die jedoch vom Benutzer und nicht vom Autor gesteuert wird.

Sie können @mediaAbfragen verwenden , um einige CSS-Einstellungen vorzunehmen, abhängig von der Bildschirm- oder Fensterbreite. In solchen Einstellungen können Sie beispielsweise die Schriftgröße auf einen bestimmten kleinen Wert einstellen, wenn das Fenster sehr eng ist.

Jukka K. Korpela
quelle
Wenn ich richtig bin, besagen die Informationen in Ihrem Link, dass Medienabfragen das angegebene CSS ausführen, wenn eine Bedingung erfüllt ist. In diesem Fall Ihres Links wäre dies die Bedingung max-width:600px;. Bin ich richtig oder habe ich die Informationen hinter dem Link nicht richtig verstanden?
Toby van Kempen
4
@Toby van Kempen: Sie haben Recht, aber die maximale Breite bezieht sich in diesem Fall auf die Größe des Bildschirmansichtsfensters und nicht auf die Größe eines beliebigen Elements. Wenn Sie CSS abhängig vom Stil eines beliebigen Elements ändern müssen, können Sie dazu keine Medienabfragen verwenden. Du brauchst ein Skript.
BoltClock
@BoltClock Bezieht sich also @mediaauf das Browserfenster? Woher weiß es, dass meine Schriftgröße beispielsweise 20 Pixel betragen soll, wenn das übergeordnete Div- oder Browserfenster eine bestimmte Größe in px hat?
Toby van Kempen
@Toby van Kempen: Es wird immer auf das Browserfenster verwiesen - daher die "Medien" in "Medienabfragen".
BoltClock
1
Ah ich sehe. Wenn ich also richtig bin und schreibe @media (width:600px), wird das folgende Skript ausgeführt, @mediasobald die Browserbreite 600px entspricht.
Toby van Kempen
110

Sie können dies tun, indem Sie eine Formel verwenden und die Breite des Ansichtsfensters angeben.

font-size: calc(7px + .5vw);

Dadurch wird die minimale Schriftgröße auf 7 Pixel festgelegt und je nach Breite des Ansichtsfensters um 0,5 VW erhöht.

Viel Glück!

Fast Pitt
quelle
2
OH MEIN GOTT!!! In den letzten 3 Tagen habe ich mit Zahlen und verschiedenen Methoden gespielt. Lassen Sie mich Ihnen sagen, dass nichts wirklich so funktioniert hat, wie ich es möchte. Dann stoße ich auf deine Antwort, stecke deine Antwort in mein CSS und "HORAYYYY" es funktioniert ... Super Antwort Pitt. Vielen Dank.
Donnerstag,
Ein großartiger Trick für minimale Schriftgröße. Ich frage mich, ob etwas Ähnliches maximal möglich ist ... Könnte etwas mit der Idee zu tun haben, dass jedes Negativ als behandelt wird 0. Einige verschachtelte calcs oder so?
Lazar Ljubenović
2
Invertieren Sie es, also Schriftgröße: calc (12px - .5vw)
roberrrt-s
Dies funktioniert mit WENIGER nicht richtig. Ich denke, die calc()Anweisung wird verarbeitet, wenn LESS kompiliert und in einen einfachen pxWert aufgelöst wird. Die Größenänderung wird nicht neu berechnet. Ideen oder Gedanken?
Devil's Advocate
Gepostet
Devil's Advocate
63

Es funktioniert gut mit CSS.

Ich habe die gleichen Probleme durchlaufen und sie wie folgt behoben.

Verwenden Sie eine feste "px" -Größe für die maximale Größe bei einer bestimmten Breite und darüber. Verwenden Sie dann für verschiedene kleinere Breiten ein relatives "vw" als Prozentsatz des Bildschirms.

Das Ergebnis unten ist, dass es sich auf Bildschirmen unter 960px anpasst, aber eine feste Größe darüber beibehält. Nur eine Erinnerung, nicht zu vergessen, das HTML-Dokument in der Kopfzeile hinzuzufügen:

<meta name="viewport" content="width=device-width">

Beispiel in CSS:

@media all and (min-width: 960px) {
h1{
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
h1{
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
h1{
    font-size: 6vw;
  }
}

Ich hoffe es wird helfen!

Willy VAN INGEN
quelle
2
Dies sollte die beste Antwort sein !!
KaKa
Warum hast du "alle" in jeder Reihe?
Tibi
@tibi all bezieht sich auf den Medientyp (oder: WO soll angewendet werden). Optionen sind alle, Bildschirm, Druck & Sprache. Alles ist Standard, daher ist es hier irgendwie veraltet. siehe mdn docs.
Honk31
Ja! Das funktioniert perfekt! Was ich wollte, war eine maximale Schriftgröße, und das funktioniert perfekt, danke.
Todbott
9

Ich komme etwas spät hierher, ich bekomme nicht so viel Anerkennung dafür, ich mache nur eine Mischung der folgenden Antworten, weil ich gezwungen war, das für ein Projekt zu tun.

Um die Frage zu beantworten: Es gibt keine CSS-Eigenschaft . Ich weiß nicht warum, aber ich denke, es liegt daran, dass sie Angst vor einem Missbrauch dieser Eigenschaft haben, aber ich finde keinen Anwendungsfall, in dem es ein ernstes Problem sein kann.

Was auch immer, was sind die Lösungen?

Zwei Werkzeuge ermöglichen es uns , das zu tun: Medien - Anfragen am vw Immobilien

1) Es gibt eine "Narren" -Lösung, die darin besteht, für jeden Schritt, den wir in unserem CSS ausführen, eine Medienabfrage durchzuführen und die Schriftart von einem festen Betrag auf einen anderen festen Betrag zu ändern. Es funktioniert, aber es ist sehr langweilig und Sie haben keinen glatten linearen Aspekt.

2) Wie AlmostPitt erklärte, gibt es eine brillante Lösung für die Minima:

font-size: calc(7px + .5vw);

Das Minimum wäre hier 7px zusätzlich zu 0,5% der Ansichtsbreite. Das ist schon richtig cool und funktioniert in den meisten Fällen . Es ist keine Medienabfrage erforderlich, Sie müssen nur einige Zeit damit verbringen, die richtigen Parameter zu finden.

Wie Sie bemerkt haben, handelt es sich um eine lineare Funktion. Die grundlegende Mathematik zeigt Ihnen, dass zwei Punkte bereits die Parameter enthalten. Legen Sie dann einfach die gewünschte Schriftgröße in px für sehr große Bildschirme und für mobile Versionen fest und berechnen Sie dann, ob Sie eine wissenschaftliche Methode durchführen möchten. Dachte, es ist absolut nicht notwendig und du kannst es einfach versuchen.

3) Nehmen wir an, Sie haben einen sehr langweiligen Kunden (wie ich), der unbedingt möchte, dass ein Titel eine Zeile und nicht mehr ist. Wenn Sie die AlmostPitt-Lösung verwendet haben, treten Probleme auf, da Ihre Schriftart weiter wächst und Sie einen Container mit fester Breite haben (z. B. Bootstrap, der bei 1140 Pixel stoppt, oder etwas in großen Fenstern). Hier empfehle ich Ihnen, auch eine Medienabfrage zu verwenden. Tatsächlich können Sie nur die maximale Pixelgröße ermitteln, die Sie in Ihrem Container verarbeiten können, bevor der Aspekt unerwünscht wird (pxMax). Dies wird Ihr Maximum sein. Dann müssen Sie nur noch die genaue Bildschirmbreite finden, die Sie stoppen müssen (wMax). (Ich lasse Sie eine lineare Funktion selbst invertieren).

Danach einfach machen

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

Dann ist es perfekt linear und Ihre Schriftgröße wächst nicht mehr! Beachten Sie, dass Sie Ihre vorherige CSS-Eigenschaft (calc ...) nicht in eine Medienabfrage unter wMax einfügen müssen, da Medienabfragen als wichtiger angesehen werden und die vorherige Eigenschaft überschrieben wird.

Ich denke nicht, dass es nützlich ist, ein Snippet dafür zu erstellen, da Sie Probleme haben würden, es auf den gesamten Bildschirm zu schaffen, und es schließlich keine Raketenwissenschaft ist.

Ich hoffe, dies könnte anderen helfen, und vergessen Sie nicht, AlmostPitt für seine Lösung zu danken.

Alburkerk
quelle
Können Sie eine Formel vorschlagen, um die richtigen Werte für calc () zu finden, die dieselben zurückgeben wie max(*a*px,, *b*vw)? Weil ich in meinem Fall eine naive Addition nicht tolerieren kann, weil das Ergebnis zu groß ist, aber es klingt so, als würden Sie vorschlagen, dass ich a und b irgendwie über die naiven Beträge reduzieren könnte - ich habe Probleme, die Mathematik herauszufinden, und ich brauchen eine allgemeine Lösung, nicht nur einen bestimmten Fall.
Michael
Die einzige gute Erklärung, die ich gefunden habe, war ein Bild, daher kann ich Ihnen nicht über Kommentare helfen. Ich schlage vor, Sie erstellen eine neue Frage
Alburkerk
6

Dies wird tatsächlich in CSS4 vorgeschlagen

Arbeitsentwurf am W3C

Zitat:

Mit diesen beiden Eigenschaften kann eine Website oder ein Benutzer verlangen, dass die Schriftgröße eines Elements innerhalb des mit diesen beiden Eigenschaften angegebenen Bereichs geklemmt wird. Wenn der berechnete Wert der Schriftgröße außerhalb der durch font-min-size und font-max-size festgelegten Grenzen liegt, wird der Verwendungswert der Schriftgröße auf die in diesen beiden Eigenschaften angegebenen Werte beschränkt.

Dies würde tatsächlich wie folgt funktionieren:

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

Dies würde wörtlich bedeuten, dass die Schriftgröße 5% der Breite des Ansichtsfensters beträgt, jedoch niemals kleiner als 10 Pixel und niemals größer als 18 Pixel.

Leider ist diese Funktion noch nirgendwo implementiert (nicht einmal auf caniuse.com).

roberrrt-s
quelle
4
Toll. Also muss ich nur für ein paar Jahre aufhören, an diesem Projekt zu arbeiten, bis es umgesetzt wird ....: '- (
Michael
3

Rucksack ist brillant, aber Sie müssen nicht unbedingt auf Tools wie Gulp oder Grunt usw. zurückgreifen.

Ich habe eine Demo mit CSS Custom Properties (CSS-Variablen) erstellt, um die minimalen und maximalen Schriftgrößen einfach zu steuern.

Wie so:

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}
Dannie Vinther
quelle
2

Ich habe damit einige reibungslose Ergebnisse erzielt. Es fließt reibungslos zwischen den 3 Breitenbereichen, wie eine kontinuierliche stückweise Funktion.

@media screen and (min-width: 581px) and (max-width: 1760px){
    #expandingHeader {
        line-height:5.2vw;
        font-size: 5.99vw;
    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (min-width: 1761px){
    #expandingHeader {
        line-height:.9em;
        font-size: 7.03em;

    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (max-width: 580px){
    #expandingHeader {
        line-height:.9em;
        font-size: 2.3em;
    }
    #tagLine {
        letter-spacing: .1em;
        font-size: .65em;
        line-height: .10em;
    }
}
Chris Topillogical
quelle
Wie unterscheidet sich das von der anderen Antwort?
user193661
2

Mit Sass können Sie die minimalen und maximalen Schriftgrößen steuern. Hier ist eine brillante Lösung von Eduardo Boucas.

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

.limit-min {
  @include responsive-font(3vw, 20px);
}

.limit-min-max {
  @include responsive-font(3vw, 20px, 50px);
}
Matthew
quelle
1

Bitte beachten Sie, dass das Festlegen der Schriftgröße mit px aus Gründen der Barrierefreiheit nicht empfohlen wird :

"Das Definieren von Schriftgrößen in px ist nicht möglich, da der Benutzer die Schriftgröße in einigen Browsern nicht ändern kann. Beispielsweise möchten Benutzer mit eingeschränkter Sicht möglicherweise die Schriftgröße viel größer als die von einem Webdesigner gewählte Größe festlegen." (siehe https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

Ein zugänglicherer Ansatz besteht darin, font-size: 100%im HTML- Code festzulegen , der die Standardeinstellungen für die Benutzergröße berücksichtigt, und dann beim Ändern der Größe ( emoder rem) entweder Prozentsätze oder relative Einheiten zu verwenden , z. B. mit einer @ media-Abfrage.

(Siehe https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ )

DepecheCode
quelle
0

Ja, es scheint einige Einschränkungen durch einen Browser in SVG zu geben. Das Entwicklungstool beschränkt es auf 8000px; Das folgende dynamisch generierte Diagramm schlägt beispielsweise in Chrome fehl.

Versuchen Sie http://www.xn--dddelei-n2a.de/2018/test-von-svt/

<svg id="diagrammChart"
     width="100%"
     height="100%"
     viewBox="-400000 0 1000000 550000"
     font-size="27559"
     overflow="hidden"
     preserveAspectRatio="xMidYMid meet"
>
    <g class="hover-check">
        <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            Heinz: -16800
        </text>
        <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
        </rect>
        <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
              opacity="0">
        </rect>

    </g>
</svg>
Padina
quelle