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

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.

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.

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!

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!

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.

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

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

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

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

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/ )

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>