So stellen Sie die Mindestschriftgröße in CSS ein

81

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?

Nrofis
quelle

Antworten:

3

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/

mifi79
quelle
Gibt es eine einfache Möglichkeit, mit jQuery-Elementen mit einer Größe von weniger als 12 Pixel zu finden?
Nrofis
@nrofis - sicher, siehe die Bearbeitung meiner Antwort oben. Prost!
mifi79
11
Das Durchlaufen ALLER Elemente auf einer Seite und das Ändern einer CSS-Eigenschaft scheint vom Standpunkt der Leistung aus eine wirklich schlechte Idee zu sein. Ich bin kein Experte dafür, was Reflows auslöst, aber Sie könnten mit diesem Ansatz versehentlich die Seite häufig neu fließen lassen. Ich empfehle diesen Ansatz nicht.
Avand Amiri
Ich bin bei @AvandAmiri - dies ist ein schlechter Ansatz in dem Sinne, dass diese Art des Denkens zu vielen anderen Lösungen wie dieser auf einer Seite führt, was dann zu nicht performanten Sites und sogar zu Speicherlecks führt, die Ihre App zum Absturz bringen. Die wahre Antwort darauf ist (bis die maximale Schriftgröße zu einer legitim verwendbaren Sache wird), die Architektur zu straffen - ein gutes System zu entwerfen und zu implementieren, das die Dinge einfach richtig macht. Auf einer Seite, die "versehentlich" ist, sollten keine Schriftgrößen vorhanden sein.
Dudewad
1
@ AndersLindén Legen Sie in diesem Fall eine Mindestschriftgröße in einer Medienabfrage fest, wenn Sie beispielsweise nicht möchten, dass Ihre Schriftgröße unter 10px fällt: p{ font-size: 1vw } @media (max-width: 1000px){ p{ font-size: 10px } }
nHaskins
208

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.

Marc Ruef
quelle
19
fantastischer Hack!
1
Ich liebe dich. Das ist fantastisch.
Luke Taylor
4
@StefanSteiger, können Sie Medienabfragen für diese verwenden: (a) Medien (maximale Breite: 610px) ...
Adam Wallner
2
Brillant! Genau das, was ich brauchte. Vielen Dank!
Spedley
6
Obwohl dies ein netter Hack ist, würde ich sagen, dass dies keine wirkliche Lösung ist, da es die Schriftgröße beeinflusst, wenn die Größe über dem Minimum liegt. Sie müssen sich also 12px(in diesem Fall) immer mit diesem Extra abfinden.
Tom Wyllie
53

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.

Stefan Steiger
quelle
7
Ernsthaft, warum entfernen Normungsausschüsse immer die Dinge, die meine Arbeit tatsächlich machbar machen würden?
Michael
2
@Michael, die CSS-Arbeitsgruppe entfernt Dinge hauptsächlich, weil das Interesse oder die Priorität des Implementierers fehlt. Es sind zwei unabhängige Implementierungen erforderlich, um eine CSS-Funktion in einer endgültigen W3C-Empfehlung zu erhalten. Es macht keinen Sinn, ein Papier zu schreiben, und niemand möchte es in reale Software übertragen. Also sollten Sie Browser-Anbieter fragen ...
jj
1
Toller Fund! Kann mit CSS-Variablen verwendet werden, um min / max einzustellen. Beispiel: :root { --responsive-font-size-primary: min(2em, max(0.5em, 5vmin)); }Vereinfachung der Verwendung:font-size: var(--responsive-font-size-primary);
Corey Alix
@Corey Alix: Coole, gerade bemerkte Unterstützung dafür ist seit dem 11. Dezember 2019 eingetroffen. Thread mit Sorgfalt, alle nicht auf Chromium basierenden Browser unterstützen dies noch nicht. Aber die Unterstützung in Chrome ist eine sehr coole Nachricht.
Stefan Steiger
1
@ Michael: Gute Nachrichten - es ist jetzt implementiert! (per Mitte Dezember 2019)
Stefan Steiger
8

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.

ccc
quelle
5
vmax und vmin werden tatsächlich verwendet, um Werte relativ zum Ansichtspunkt / zur Seitengröße anzugeben. Min und Max beziehen sich auf das Minimum / Maxium-Ansichtsfenster, nicht auf das Min oder Max der Schriftgröße - was die Operation verlangte. (zB wenn die Höhe größer als die Breite des Ansichtsfensters ist als vmax gleich 100vmax = Höhe des Ansichtsfensters und 100vmin = Breite des Ansichtsfensters)
Chaim
8

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.

zardilior
quelle
1
Pfui. das bindet das Element an die Auflösung des Fensters, nicht wahr? Dies bedeutet, dass Sie im Allgemeinen für jedes Element auf der Seite eine separate Medienabfrage benötigen.
Michael
4

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>

Bhavik Hirani
quelle
3

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;
}
Syed
quelle
1

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.

Roko C. Buljan
quelle
1

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 .

Null
quelle
0

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")
});
Patrick Harrington
quelle
-1

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

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