So stellen Sie die Mindestschriftgröße in CSS ein

Ich möchte für jedes Element in meiner HTML-Seite eine Mindestschriftgröße festlegen.

Wenn beispielsweise Elemente mit einer Schriftgröße von weniger als 12 Pixel vorhanden sind, werden sie in 12 Pixel geändert.
Wenn es jedoch Elemente mit einer Schriftgröße von 12 Pixel gibt, ändern sich diese nicht.

Gibt es eine Möglichkeit, dies mit CSS zu tun?

Nein. Während Sie bei bodyVerwendung der font-sizeEigenschaft eine Basisschriftgröße festlegen können, überschreibt alles, was danach eine kleinere Größe angibt, die Basisregel für dieses Element. Um das zu tun, was Sie tun möchten, müssen Sie Javascript verwenden.

Sie können die Elemente auf der Seite durchlaufen und die kleineren Schriftarten folgendermaßen ändern:

$("*").each( function () {
    var $this = $(this);
    if (parseInt($this.css("fontSize")) < 12) {
        $this.css({ "font-size": "12px" });   
    }
});

Hier ist eine Geige, in der Sie sehen können, wie sie ausgeführt wird: http://jsfiddle.net/mifi79/LfdL8/2/

In CSS3 gibt es dafür einen einfachen, aber brillanten Hack:

font-size:calc(12px + 1.5vw);

Dies liegt daran, dass der statische Teil von calc () das Minimum definiert. Auch wenn der dynamische Teil auf etwas nahe 0 schrumpfen könnte.

Ab Mitte Dezember 2019 ist die CSS4-Min / Max-Funktion genau das, was Sie wollen:
(Gehen Sie vorsichtig vor, dies ist sehr neu, ältere Browser (auch bekannt als IE & msEdge) unterstützen sie noch nicht)
(unterstützt ab Chrom 79 & Firefox v75)

https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max

Beispiel:

blockquote {
    font-size: max(1em, 12px);
}

Auf diese Weise beträgt die Schriftgröße 1em (wenn 1em> 12px), jedoch mindestens 12px.

Leider wird diese großartige CSS3-Funktion noch von keinem Browser unterstützt, aber ich hoffe, dass sich dies bald ändern wird!

Bearbeiten:

Dies war früher Teil von CSS3, wurde dann aber für CSS4 neu geplant.
Ab dem 11. Dezember 2019 wurde die Unterstützung in Chrome / Chromium 79 (einschließlich Android und Android WebView) und damit auch in Microsoft Chredge alias Anaheim einschließlich Opera 66 und Safari 11.1 (einschließlich iOS) bereitgestellt.

Sieht so aus, als wäre ich etwas spät dran, aber für andere mit diesem Problem versuchen Sie diesen Code

p { font-size: 3vmax; }

Verwenden Sie das von Ihnen bevorzugte Etikett und die gewünschte Größe (ersetzen Sie die 3).

p { font-size: 3vmin; }

wird für eine maximale Größe verwendet.

Verwenden Sie eine Medienabfrage. Beispiel: Dies ist etwas, bei dem ich die Originalgröße von 1,0 VW verwende, aber wenn es 1000 erreicht, wird der Buchstabe zu klein, sodass ich ihn vergrößere

@media(max-width:600px){
    body,input,textarea{
         font-size:2.0vw !important;
    }
}

Diese Seite, an der ich arbeite, reagiert nicht auf> 500px, aber Sie benötigen möglicherweise mehr. Der Vorteil dieser Lösung besteht darin, dass Sie die Skalierung der Schriftgröße beibehalten, ohne Super-Mini-Buchstaben zu haben, und dass Sie sie frei halten können.

CSS verfügt über eine clamp () - Funktion, die den Wert zwischen der oberen und unteren Grenze enthält. Die Funktion clamp () ermöglicht die Auswahl des Mittelwertes im Wertebereich zwischen den definierten Minimal- und Maximalwerten.

Es dauert einfach drei Dimensionen:

1. Mindestwert.
2. Listenpunkt
3. Bevorzugter Wert Maximal zulässiger Wert.

Versuchen Sie es mit dem folgenden Code und überprüfen Sie die Größe des Fensters, wodurch sich die in der Konsole angezeigte Schriftgröße ändert. Ich setze Maximalwert 150pxund Minimalwert 100px.

$(window).resize(function(){
    console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));

h1{
    font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100px, 10vw, 150px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <h1 id="element">THIS IS TEXT</h1>
</center>

CSS-Lösung:

.h2{
  font-size: 2vw
}
@media (min-width: 700px) {
  .h2{
    /* Minimum font size */
    font-size: 14px
  }
}
@media (max-width: 1200px) {
  .h2{
    /* Maximum font size */
    font-size: 24px
  }
}

Nur für den Fall, dass einige scss mixin benötigen:

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///

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

AFAIK ist mit einfachem CSS nicht möglich,
aber Sie können eine ziemlich teure jQuery-Operation ausführen wie:

jsBin Demo

$('*').css('fontSize', function(i, fs){
  if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});

_{Anstatt den globalen Selektor zu verwenden, * würde ich Ihnen (wenn möglich) empfehlen, Ihre Selektoren genauer zu definieren.}

Die font-min-sizeund font-max-sizeCSS - Eigenschaften wurden entfernt von der CSS Fonts Module Ebene 4 - Spezifikation (und nie in Browsern AFAIK implementiert). Und die CSS-Arbeitsgruppe hat die CSS-Beispiele ersetzt, font-size: clamp(...)die noch nicht die beste Browserunterstützung bieten. Wir müssen also warten, bis die Browser sie unterstützen. Siehe Beispiel unter https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples .

Nach Ihrem obigen Kommentar zu urteilen, ist dies mit jQuery in Ordnung - hier geht's:

// for every element in the body tag
$("*", "body").each(function() {
  // parse out its computed font size, and see if it is less than 12
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    // if so, then manually give it a CSS property of 12px
    $(this).css("font-size", "12px")
});

Eine sauberere Möglichkeit, dies zu tun, könnte darin bestehen, eine "min-font" -Klasse in Ihrem CSS zu haben, die die Schriftgröße auf 12px festlegt, und stattdessen einfach die Klasse hinzuzufügen:

$("*", "body").each(function() {
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    $(this).addClass("min-font")
});

Es wird perfekt mit 50px funktionieren. Welches als statische und damit als minimale Breite wirkt.

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