Czy istnieje coś takiego jak min-font-size i max-font-size?


100

Próbuję, aby czcionka w elemencie DIV odpowiadała na okno przeglądarki. Jak dotąd działało idealnie, ale nadrzędny element div ma wartość max-widthof 525px. Dalsza zmiana rozmiaru przeglądarki nie spowoduje zatrzymania zmiany rozmiaru czcionki. To sprawiło, że zacząłem się zastanawiać, czy istnieje coś takiego jak min-font-sizelub max-font-size, a jeśli czegoś takiego nie ma, czy jest sposób na osiągnięcie czegoś podobnego.

Myślałem, że użycie procentów w font-sizezadziała, ale fragment tekstu nie będzie skalowany zgodnie z nadrzędnym div. Oto co mam:

CSS dla nadrzędnego div:

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

CSS dla danego fragmentu tekstu:

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

Szukałem długo w Internecie, ale bezskutecznie.


Pierwszy raz widziałem vw użyte w czcionkach lol
Brandito

Odpowiedzi:


61

Nie, nie ma właściwości CSS dla minimalnego lub maksymalnego rozmiaru czcionki. Przeglądarki często mają ustawienie minimalnego rozmiaru czcionki, ale jest to kontrolowane przez użytkownika, a nie autora.

Możesz użyć @mediazapytań, aby określić niektóre ustawienia CSS w zależności od rzeczy, takich jak szerokość ekranu lub okna. W takich ustawieniach możesz np. Ustawić rozmiar czcionki na określoną małą wartość, jeśli okno jest bardzo wąskie.


Jeśli mam rację, informacja w twoim linku mówi, że zapytania o media wykonają określony CSS, gdy zostanie spełniony warunek, w tym przypadku twój link będzie to warunek max-width:600px;. Czy mam rację, czy nie zrozumiałem poprawnie informacji pod linkiem?
Toby van Kempen

4
@Toby van Kempen: Masz rację, jednak maksymalna szerokość w tym przypadku odnosi się do rozmiaru obszaru roboczego ekranu, a nie do rozmiaru dowolnego elementu. Jeśli musisz zmienić CSS w zależności od stylu dowolnego dowolnego elementu, nie będziesz w stanie użyć do tego zapytań o media. Będziesz potrzebował scenariusza.
BoltClock

@BoltClock A więc @mediaodnosi się do okna przeglądarki? Skąd będzie wiedzieć, że chcę, aby rozmiar mojej czcionki wynosił, powiedzmy, 20 pikseli, gdy nadrzędny element DIV lub okno przeglądarki ma określony rozmiar w pikselach?
Toby van Kempen

@Toby van Kempen: Zawsze będzie odnosić się do okna przeglądarki - stąd „media” w „zapytaniach o media”.
BoltClock

1
O, rozumiem. Więc jeśli mam rację, jeśli napiszę @media (width:600px), to uruchomi poniższy skrypt, @mediagdy szerokość przeglądarki będzie równa 600px?
Toby van Kempen

113

Możesz to zrobić, używając wzoru i uwzględniając szerokość rzutni.

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

Ustawia to minimalny rozmiar czcionki na 7 pikseli i zwiększa go o .5vw w zależności od szerokości widoku.

Powodzenia!


2
O MÓJ BOŻE!!! od 3 dni gram liczbami i robię to na różne sposoby. Powiem ci, że nic tak naprawdę nie działało tak, jak chcę. Potem natrafiłem na twoją odpowiedź, podłączyłem twoją odpowiedź do mojego css i "HORAYYYY" działa ... Świetna odpowiedź Pitt. Dzięki.
Czw

Świetna sztuczka dotycząca minimalnego rozmiaru czcionki. Zastanawiam się, czy coś podobnego można zrobić na maksa ... Może mieć coś wspólnego z myślą, że każdy negatyw byłby traktowany jako 0. Jakieś zagnieżdżone calcczy coś?
Lazar Ljubenović

2
Odwróć to, więc rozmiar czcionki: calc (12px - .5vw)
roberrrt-s

To nie działa poprawnie z LESS. Wydaje mi się, że calc()instrukcja jest przetwarzana, gdy LESS jest kompilowana i przekształca się w prostą pxwartość. Zmiana rozmiaru nie powoduje ponownego obliczenia. Pomysły czy przemyślenia?
Devil's Advocate


64

Działa dobrze z CSS.

Przeszedłem przez te same problemy i naprawiłem to w następujący sposób.

Użyj stałego rozmiaru „piksela”, aby uzyskać maksymalny rozmiar przy określonej szerokości i większej. Następnie dla różnych mniejszych szerokości użyj względnego „vw” jako procentu ekranu.

Wynik poniżej jest taki, że dostosowuje się on do ekranów poniżej 960 pikseli, ale powyżej utrzymuje stały rozmiar. Dla przypomnienia, nie zapomnij dodać w nagłówku dokumentu html:

<meta name="viewport" content="width=device-width">

Przykład w 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;
  }
}

Mam nadzieję, że to pomoże!


2
To powinna być NAJLEPSZA odpowiedź !!
KaKa

dlaczego masz „wszystko” w każdym wierszu?
tibi

@tibi all odnosi się do typu nośnika (lub: GDZIE zastosować). opcje to wszystko, ekran, druk i mowa. wszystko jest domyślne, więc jest tutaj trochę przestarzałe. zobacz dokumentację mdn .
honk31

Tak! To działa idealnie! Chciałam mieć MAX rozmiar czcionki, a to działa doskonale, dziękuję.
todbott

9

Spóźniam się trochę, nie mam za to wielkiego uznania, po prostu robię mieszankę poniższych odpowiedzi, ponieważ byłem zmuszony zrobić to dla projektu.

Więc odpowiadając na pytanie: nie ma czegoś takiego jak ta właściwość CSS . Nie wiem dlaczego, ale myślę, że to dlatego, że boją się niewłaściwego wykorzystania tej właściwości, ale nie znajduję żadnego przypadku użycia, w którym może to być poważny problem.

Cokolwiek, jakie są rozwiązania?

Umożliwiają nam to dwa narzędzia: zapytania o media i właściwość vw

1) Istnieje "głupie" rozwiązanie polegające na zadawaniu medialnego zapytania dla każdego kroku w naszym css, zmienianiu czcionki ze stałej kwoty na inną stałą. Działa, ale jest to bardzo nudne i nie masz płynnego, liniowego aspektu.

2) Jak wyjaśnił AlmostPitt, istnieje doskonałe rozwiązanie dla minimów:

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

Minimum to 7 pikseli oprócz 0,5% szerokości widoku. To już jest naprawdę fajne i działa w większości przypadków . Nie wymaga żadnego zapytania o media, wystarczy poświęcić trochę czasu na znalezienie odpowiednich parametrów.

Jak zauważyłeś, jest to funkcja liniowa, podstawowa matematyka uczy, że dwa punkty już znajdują parametry. Następnie ustaw rozmiar czcionki w pikselach, który chcesz dla bardzo dużych ekranów i wersji mobilnej, a następnie oblicz, czy chcesz zastosować metodę naukową. Pomyślałem, że nie jest to absolutnie konieczne i możesz po prostu spróbować.

3) Załóżmy, że masz bardzo nudnego klienta (takiego jak ja), który absolutnie chce, aby tytuł był jedną linijką i nie więcej. Jeśli korzystałeś z rozwiązania AlmostPitt, masz kłopoty, ponieważ twoja czcionka będzie się powiększać, a jeśli masz kontener o stałej szerokości (jak bootstrap zatrzymujący się na 1140px lub coś w dużych oknach). W tym miejscu proponuję skorzystać również z zapytania o media. W rzeczywistości możesz po prostu znaleźć maksymalną wielkość w pikselach, którą możesz obsłużyć w swoim kontenerze, zanim aspekt stanie się niepożądany (pxMax). To będzie Twoje maksimum. Następnie musisz tylko znaleźć dokładną szerokość ekranu, którą musisz zatrzymać (wMax). (Pozwalam ci samodzielnie odwrócić funkcję liniową).

Po tym po prostu zrób

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

Wtedy jest idealnie liniowy, a rozmiar czcionki przestaje rosnąć! Zwróć uwagę, że nie musisz umieszczać swojej poprzedniej właściwości css (calc ...) w zapytaniu o media pod wMax, ponieważ zapytanie o media jest uważane za bardziej istotne i nadpisze poprzednią właściwość.

Nie sądzę, aby było przydatne tworzenie fragmentu kodu, ponieważ miałbyś problem z wyświetleniem całego ekranu, a ostatecznie nie jest to fizyka jądrowa.

Mam nadzieję, że może to pomóc innym i nie zapomnij podziękować AlmostPittowi za jego rozwiązanie.


Czy możesz zasugerować wzór do znajdowania właściwych wartości funkcji calc (), które zwracają to samo co max(*a*px,, *b*vw)? Ponieważ w moim przypadku nie mogę tolerować naiwnego dodawania, ponieważ wynik jest zbyt duży, ale brzmi to tak, jakbyś sugerował, że mógłbym w jakiś sposób zmniejszyć aib ponad naiwne kwoty - mam problem z obliczeniem matematyki i potrzebują rozwiązania ogólnego, a nie tylko konkretnego przypadku.
Michael

Jedynym dobrym wyjaśnieniem, które wymyśliłem, był obraz, więc nie mogę ci pomóc w komentarzach, sugeruję utworzenie nowego pytania
Alburkerk

6

Jest to faktycznie proponowane w CSS4

Szkic roboczy w W3C

Zacytować:

Te dwie właściwości umożliwiają witrynie internetowej lub użytkownikowi wymaganie, aby rozmiar czcionki elementu mieścił się w zakresie dostarczanym przez te dwie właściwości. Jeśli obliczona wartość font-size znajduje się poza granicami utworzonymi przez font-min-size i font-max-size, wartość użytkowa font-size jest ograniczana do wartości określonych w tych dwóch właściwościach.

To faktycznie działałoby w następujący sposób:

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

Oznaczałoby to dosłownie, że rozmiar czcionki będzie wynosił 5% szerokości widocznego obszaru, ale nigdy nie będzie mniejszy niż 10 pikseli i nigdy nie będzie większy niż 18 pikseli.

Niestety, ta funkcja nie jest jeszcze nigdzie zaimplementowana (nawet na caniuse.com).


4
Wspaniały. Muszę więc po prostu przestać pracować nad tym projektem na kilka lat, aż zostanie wdrożony ....: '- (
Michael

3

Plecak jest genialny, ale niekoniecznie musisz uciekać się do tworzenia narzędzi takich jak Gulp czy Grunt itp.

Zrobiłem demo przy użyciu niestandardowych właściwości CSS (zmiennych CSS), aby łatwo kontrolować minimalny i maksymalny rozmiar czcionki.

Tak jak to:

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

2

Uzyskałem z nimi gładkie wyniki. Płynie płynnie między 3 zakresami szerokości, jak ciągła funkcja odcinków.

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

Czym to się różni od drugiej odpowiedzi?
user193661

2

Możesz użyć Sass do kontrolowania minimalnego i maksymalnego rozmiaru czcionki. Oto genialne rozwiązanie Eduardo Boucasa.

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

1

Pamiętaj, że ustawienie rozmiaru czcionki za pomocą px nie jest zalecane ze względu na problemy z dostępnością :

„Definiowanie rozmiaru czcionki w pikselach jest niedostępne, ponieważ użytkownik nie może zmienić rozmiaru czcionki w niektórych przeglądarkach. Na przykład użytkownicy z ograniczonym widzeniem mogą chcieć ustawić rozmiar czcionki znacznie większy niż rozmiar wybrany przez projektanta stron internetowych”. (patrz https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

Bardziej przystępnym podejściem jest ustawienie font-size: 100%w html, który szanuje domyślne ustawienia rozmiaru użytkownika , a NASTĘPNIE użycie wartości procentowych lub jednostek względnych podczas zmiany rozmiaru ( emlub rem), na przykład za pomocą zapytania @media.

(patrz https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ )


0

Tak, wydaje się, że niektóre przeglądarki w SVG mają pewne ograniczenia. Narzędzie deweloperskie ogranicza to do 8000 pikseli; Następujący dynamicznie generowany wykres nie działa na przykład w przeglądarce Chrome.

Wypróbuj 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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.