Jak ustawić minimalny rozmiar czcionki w CSS

82

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?

nrofis
źródło

Odpowiedzi:

2

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/

mifi79
źródło
Czy istnieje prosty sposób na znalezienie elementów jQuery o rozmiarze mniejszym niż 12 pikseli?
nrofis
@nrofis - jasne, zobacz edycję mojej odpowiedzi powyżej. Twoje zdrowie!
mifi79
11
Iterowanie WSZYSTKICH elementów na stronie i zmiana właściwości CSS wydaje się naprawdę złym pomysłem z punktu widzenia wydajności. Nie jestem ekspertem w zakresie tego, co wyzwala ponowne przepływy, ale przy takim podejściu możesz nieumyślnie często przeładowywać stronę. Nie polecam tego podejścia.
Avand Amiri,
Jestem z @AvandAmiri - jest to złe podejście w tym sensie, że takie myślenie prowadzi do wielu innych rozwiązań, takich jak to na stronie, co następnie prowadzi do niedziałających witryn, a nawet wycieków pamięci, które spowodują awarię aplikacji. Prawdziwą odpowiedzią na to jest (dopóki maksymalny rozmiar czcionki nie stanie się prawnie użyteczną rzeczą) jest zacieśnienie architektury - zaprojektowanie i wdrożenie dobrego systemu, który po prostu robi wszystko poprawnie. Na stronie nie powinno być rozmiarów czcionek, które są „przypadkowe”.
dudewad
1
@ AndersLindén W takim przypadku ustaw minimalny rozmiar czcionki w zapytaniu o media, na przykład, jeśli nie chcesz, aby rozmiar czcionki p{ font-size: 1vw } @media (max-width: 1000px){ p{ font-size: 10px } }
spadł
213

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.

Marc Ruef
źródło
20
fantastyczny hack!
1
Kocham Cię. To jest niesamowite.
Luke Taylor,
4
@StefanSteiger, możesz użyć zapytań o media do tego: (a) media (max-width: 610px) ...
Adam Wallner
2
Znakomity! Dokładnie to, czego potrzebowałem. Dziękuję Ci!
spedley,
6
Chociaż jest to niezły hack, powiedziałbym, że nie jest to naprawdę rozwiązanie, ponieważ wpływa na rozmiar czcionki, gdy rozmiar jest powyżej minimum, więc musisz cały czas znosić ten dodatek 12px(w tym przypadku).
Tom Wyllie
56

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)

Stefan Steiger
źródło
7
poważnie, dlaczego komisje normalizacyjne zawsze usuwają rzeczy, które faktycznie uczyniłyby moją pracę wykonalną !?
Michael
2
@Michael, grupa robocza ds. CSS usuwa rzeczy głównie z powodu braku zainteresowania lub priorytetu implementującego. Wymaga dwóch niezależnych implementacji, aby uzyskać funkcję CSS w ostatecznej rekomendacji W3C. Nie ma sensu pisać artykułu i nikt nie chce wrzucać go do rzeczywistego oprogramowania. Więc powinieneś zapytać dostawców przeglądarek ...
jj
2
Świetne znalezisko! Można go używać ze zmiennymi css, aby ustawić min / maks. Przykład: :root { --responsive-font-size-primary: min(2em, max(0.5em, 5vmin)); }ułatwienie użytkowania:font-size: var(--responsive-font-size-primary);
Corey Alix
@Corey Alix: Super, właśnie zauważyłem, że wsparcie dla tego pojawiło się 11 grudnia 2019 r. Ostrożnie, wszystkie przeglądarki inne niż Chromium jeszcze go nie obsługują. Ale obsługa tego w Chrome to bardzo fajna wiadomość.
Stefan Steiger
1
@Michael: Dobra wiadomość - jest już zaimplementowana! (do połowy grudnia 2019)
Stefan Steiger
8

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.

ccc
źródło
5
vmax i vmin są faktycznie używane do określania wartości w odniesieniu do punktu widzenia / rozmiaru strony. Min i max odnoszą się do minimalnego / maksymalnego obszaru roboczego, a nie do min lub max rozmiaru czcionki - o to pytał operator. (np. jeśli wysokość jest większa niż szerokość rzutni niż vmax jest równe 100vmax = wysokość rzutni i 100vmin = szerokość widoku)
Chaim
8

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.

zardilior
źródło
1
ugh. to wiąże element z rozdzielczością okna, prawda? co oznacza, że ​​generalnie potrzebujesz osobnego zapytania o media dla każdego elementu na stronie.
Michael
4

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>

Bhavik Hirani
źródło
3

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;
}
Syed
źródło
1

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.

Roko C. Buljan
źródło
1

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 .

Zero
źródło
0

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")
});
Patrick Harrington
źródło
-1

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);
Jayant Khandelwal
źródło