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

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.

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.

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!

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!

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.

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).

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

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

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

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/ )

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>