Jak ustawić minimalny rozmiar czcionki w CSS

Chcę ustawić minimalny rozmiar czcionki dla każdego elementu na mojej stronie HTML.

Na przykład, jeśli istnieją elementy o rozmiarze czcionki mniejszym niż 12 pikseli, zmienią się na 12 pikseli.
Ale jeśli są elementy o rozmiarze czcionki większym niż 12 pikseli, nie zmienią się.

Czy można to zrobić za pomocą CSS?

Nie. Chociaż można ustawić podstawowy rozmiar czcionki podczas bodykorzystania z font-sizewłaściwości, wszystko po tym, co określa mniejszy rozmiar, zastąpi podstawową regułę dla tego elementu. Aby zrobić to, czego szukasz, musisz użyć Javascript.

Możesz iterować po elementach na stronie i zmieniać mniejsze czcionki, używając czegoś takiego:

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

Oto Fiddle, na którym można zobaczyć, jak zostało wykonane: http://jsfiddle.net/mifi79/LfdL8/2/

W CSS3 jest na to prosty, ale genialny hack:

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

Dzieje się tak, ponieważ statyczna część funkcji calc () definiuje minimum. Mimo że część dynamiczna może skurczyć się do wartości zbliżonej do 0.

Od połowy grudnia 2019 r. Funkcja min / max w CSS4 jest dokładnie tym, czego chcesz:
(ostrożnie, to jest bardzo nowe, starsze przeglądarki (aka IE i msEdge) jeszcze jej nie obsługują)
(obsługiwane od dnia Chromium 79 i Firefox v75)

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

Przykład:

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

W ten sposób rozmiar czcionki będzie wynosił 1em (jeśli 1em> 12px), ale przynajmniej 12px.

Niestety ta niesamowita funkcja CSS3 nie jest jeszcze obsługiwana przez żadną przeglądarkę, ale mam nadzieję, że wkrótce się to zmieni!

Edytować:

Kiedyś było to częścią CSS3, ale zostało ponownie zaplanowane na CSS4.
Od 11 grudnia 2019 r. Wsparcie pojawiło się w Chrome / Chromium 79 (w tym na Androida i Android WebView), a jako takie także w Microsoft Chredge aka Anaheim, w tym Opera 66 i Safari 11.1 (w tym iOS)

Wygląda na to, że jestem trochę spóźniony, ale dla innych z tym problemem wypróbuj ten kod

p { font-size: 3vmax; }

użyj dowolnego tagu, który preferujesz i rozmiaru, który preferujesz (zastąp 3)

p { font-size: 3vmin; }

jest używany dla maksymalnego rozmiaru.

Użyj zapytania o media. Przykład: To jest coś, co używam oryginalnego rozmiaru to 1.0vw, ale kiedy osiągnie 1000, litera staje się zbyt mała, więc skaluję ją w górę

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

Ta strona, nad którą pracuję, nie reaguje na> 500px, ale możesz potrzebować więcej. Zaletą tego rozwiązania jest to, że zachowujesz skalowanie rozmiaru czcionki bez super małych liter i możesz zachować to js za darmo.

CSS ma funkcję clamp (), która przechowuje wartość między górną i dolną granicą. Funkcja clamp () umożliwia wybór wartości środkowej w zakresie wartości pomiędzy zdefiniowanymi wartościami minimalnymi i maksymalnymi.

Po prostu ma trzy wymiary:

1. Minimalna wartość.
2. Element listy
3. Preferowana wartość Maksymalna dozwolona wartość.

spróbuj z poniższym kodem i sprawdź zmianę rozmiaru okna, co spowoduje zmianę rozmiaru czcionki widocznej w konsoli. Ustawiam wartość maksymalną 150pxi minimalną 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>

Rozwiązanie CSS:

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

Na wszelki wypadek, gdyby ktoś potrzebował miksu scss:

///
/// 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 nie jest to możliwe w przypadku zwykłego CSS,
ale możesz wykonać dość kosztowną operację jQuery, taką jak:

jsBin demo

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

_{Zamiast używać selektora globalnego * , sugerowałbym (jeśli to możliwe) bardziej szczegółowe określenie swoich selektorów.}

Właściwości font-min-sizei font-max-sizeCSS zostały usunięte ze specyfikacji modułu czcionek CSS na poziomie 4 (i nigdy nie zostały zaimplementowane w przeglądarkach AFAIK). Grupa robocza ds. CSS zastąpiła przykłady CSS, font-size: clamp(...)które nie mają jeszcze największej obsługi przeglądarek, więc będziemy musieli poczekać, aż przeglądarki ją obsłużą. Zobacz przykład w https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples .

Sądząc po twoim powyższym komentarzu, możesz to zrobić z jQuery - tutaj:

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

Bardziej przejrzystym sposobem na zrobienie tego może być umieszczenie w CSS klasy „min-font”, która ustawia rozmiar czcionki: 12px, a zamiast tego wystarczy dodać klasę:

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

Idealnie będzie działać z 50px. Który będzie działał jako statyczny, a zatem jako minimalna szerokość.

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