Bestaat er zoiets als min-font-size en max-font-size?

Ik probeer een lettertype in een div te maken die reageert op het browservenster. Tot nu toe heeft het perfect gewerkt, maar de bovenliggende div heeft een max-widthvan 525px. Als u het formaat van de browser verder aanpast, stopt het formaat van het lettertype niet. Dit heeft me doen afvragen of er zoiets bestaat als min-font-sizeof max-font-size, en als zoiets niet bestaat, als er een manier om iets soortgelijks te bereiken.

Ik dacht dat het gebruik van percentages met font-sizezou werken, maar het stukje tekst schaalt niet overeenkomstig de bovenliggende div. Dit is wat ik heb:

De CSS voor de bovenliggende div:

.textField{
    background-color:rgba(88, 88, 88, 0.33);
    width:40%;
    height:450px;
    min-width:200px;
    max-width:525px;
    z-index:2;
}

De CSS voor het betreffende stuk tekst:

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

Antwoord 1, autoriteit 100%

U kunt dit doen door een formule te gebruiken en de breedte van het kijkvenster op te nemen.

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

Dit stelt de minimale lettergrootte in op 7px en versterkt deze met .5vw, afhankelijk van de breedte van de viewport.


Antwoord 2, autoriteit 52%

Het werkt goed met CSS.

Ik heb dezelfde problemen gehad en heb het als volgt opgelost.

Gebruik een vaste “px”-grootte voor maximale grootte bij een specifieke breedte en hoger. Gebruik dan voor verschillende kleinere breedtes een relatieve “vw” als percentage van het scherm.

Het resultaat hieronder is dat het zichzelf aanpast bij schermen onder de 960px, maar daarboven een vaste grootte behoudt. Even een herinnering, niet te vergeten om het html-document in de koptekst toe te voegen:

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

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

Antwoord 3, autoriteit 50%

Nee, er is geen CSS-eigenschap voor minimale of maximale lettergrootte. Browsers hebben vaak een instelling voor de minimale lettergrootte, maar dat is onder controle van de gebruiker, niet van een auteur.

U kunt @mediaquery’som enkele CSS-instellingen te maken, afhankelijk van zaken als scherm- of vensterbreedte. In dergelijke instellingen kunt u b.v. stel de lettergrootte in op een specifieke kleine waarde als het venster erg smal is.


Antwoord 4, autoriteit 8%

Ik kom een ​​beetje laat hier, ik krijg er niet zoveel lof voor, ik doe gewoon een mix van de onderstaande antwoorden omdat ik dat moest doen voor een project.

Dus om de vraag te beantwoorden: Er bestaat niet zoiets als deze CSS-eigenschap.
Ik weet niet waarom, maar ik denk dat het komt omdat ze bang zijn voor misbruik van deze eigenschap, maar ik kan geen enkele toepassing vinden waarbij het een serieus probleem kan zijn.

Wat zijn de oplossingen?

Twee tools stellen ons in staat om dat te doen: mediaquery’sen vw-eigenschap

1) Er is een “dwaze” oplossing die bestaat uit het maken van een mediaquery voor elke stap die we in onze CSS nemen, waarbij het lettertype wordt gewijzigd van een vast bedrag naar een ander vast bedrag. Het werkt, maar het is erg saai om te doen, en je hebt geen glad lineair aspect.

2) Zoals AlmostPitt heeft uitgelegd, is er een briljante oplossing voor de minima:

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

Het minimum hier zou 7px zijn naast 0,5% van de weergavebreedte.
Dat is al heel cool en werkt in de meeste gevallen. Het vereist geen mediaquery, je moet alleen wat tijd besteden aan het vinden van de juiste parameters.

Zoals je hebt opgemerkt dat het een lineaire functie is, leert elementaire wiskunde je dat twee punten je al de parameters vinden. Pas dan gewoon de lettergrootte aan in px die je wilt voor zeer grote schermen en voor de mobiele versie, en bereken dan of je een wetenschappelijke methode wilt gebruiken. Dacht, het is absoluut niet nodig en je kunt het gewoon proberen.

3) Laten we aannemen dat je een erg saaie klant hebt (zoals ik) die absoluut wil dat een titel één regel is en niet meer. Als je de AlmostPitt-oplossing hebt gebruikt, zit je in de problemen omdat je lettertype blijft groeien en als je een container met een vaste breedte hebt (zoals bootstrap die stopt bij 1140px of iets in grote vensters).
Hier raad ik je aan om ook een mediaquery te gebruiken. In feite kun je gewoon de hoeveelheid van het maximale px-formaat vinden dat je in je container kunt verwerken voordat het aspect ongewenst wordt (pxMax). Dit zal uw maximum zijn. Dan hoef je alleen nog maar de exacte schermbreedte te vinden die je moet stoppen (wMax). (Ik laat je zelf een lineaire functie omkeren).

Doe daarna gewoon

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

Dan is het perfect lineairen stopt je lettergrootte met groeien! Merk op dat u uw vorige css-eigenschap (calc…) niet in een mediaquery onder wMax hoeft te plaatsen, omdat mediaquery’s als belangrijker worden beschouwd en deze de vorige eigenschap zal overschrijven.

Ik denk niet dat het nuttig is om hier een fragment van te maken, omdat je moeite zou hebben om het op het hele scherm te krijgen en het is tenslotte geen rocket science.

Ik hoop dat dit anderen kan helpen, en vergeet AlmostPitt niet te bedanken voor zijn oplossing.


Antwoord 5, autoriteit 5%

Dit wordt eigenlijk voorgesteld in CSS4

Werkconcept bij het W3C

Citaat:

Met deze twee eigenschappen kan een website of gebruiker eisen dat de lettergrootte van een element wordt vastgeklemd binnen het bereik dat bij deze twee eigenschappen wordt geleverd. Als de berekende waarde font-size buiten de grenzen ligt die zijn gecreëerd door font-min-size en font-max-size, wordt de gebruikswaarde van font-size vastgeklemd aan de waarden die in deze twee eigenschappen zijn gespecificeerd.

Dit zou eigenlijk als volgt werken:

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

Dit zou letterlijk betekenen, de lettergrootte zal 5% van de breedte van de viewport zijn, maar nooit kleiner dan 10 pixels en nooit groter dan 18 pixels.

Helaas is deze functie nog nergens geïmplementeerd (zelfs niet op caniuse.com).


Antwoord 6, autoriteit 3%

CSS min() en max() hebben redelijk goede gebruikspercentages in 2020.

De onderstaande code gebruikt max() om de grootste van de [variabelewaarde] en [minimumwaarde] te krijgen en geeft die vervolgens door aan min() tegen de [maximumwaarde] om de kleinste van de twee te krijgen. Dit creëert een toegestaan ​​lettertypebereik (3.5rem is minimaal, 6.5rem is maximaal, 6vw wordt alleen gebruikt als er tussenin zit).

font-size: min(max([variablevalue], [minimumvalue]), [maximumvalue]);
font-size: min(max(6vw, 3.5rem), 6.5rem);

Ik gebruik dit specifiek met font-awesome als een pictogram voor het afspelen van een video over een afbeelding in een bootstrap-containerelement waarbij de maximale breedte is ingesteld.


Antwoord 7, autoriteit 2%

Rucksack is briljant, maar je hoeft niet per se tools te gebruiken zoals Gulp of Grunt enz.

Ik heb een demogemaakt met CSS Custom Properties (CSS Variables) om de min. en maximale lettergroottes.

Vind ik leuk:

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

Antwoord 8, autoriteit 2%

Hiermee heb ik een paar vlotte resultaten behaald. Het vloeit soepel tussen de 3 breedtebereiken, zoals een continue stuksgewijze functie.

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

Antwoord 9, autoriteit 2%

Je kunt Sass gebruiken om de minimale en maximale lettergrootte te bepalen.
Hier is een briljante oplossing van Eduardo Boucas.

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

Antwoord 10

Houd er rekening mee dat het instellen van font-sizing met px niet wordt aanbevolen vanwege toegankelijkheidsproblemen:

“Het definiëren van lettergroottes in px is niet toegankelijk, omdat de gebruiker de lettergrootte in sommige browsers niet kan wijzigen. Gebruikers met een beperkt gezichtsvermogen kunnen bijvoorbeeld de lettergrootte veel groter willen instellen dan de grootte die door een webdesigner is gekozen. ”
(zie https://developer.mozilla.org/en- VS/docs/Web/CSS/font-size)

Een meer toegankelijke benadering is om font-size: 100%in te stellen in de html, die de standaardinstellingen voor de grootte van de gebruiker respecteert, en DAARNA percentages of relatieve eenheden te gebruiken wanneer formaat wijzigen (emof rem), bijvoorbeeld met een @media-query.

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


Antwoord 11

Ja, er lijken enkele beperkingen te gelden voor sommige browsers in SVG.
De developertool beperkt het tot 8000px;
De volgende dynamisch gegenereerde grafiek mislukt bijvoorbeeld in Chrome.

Probeer 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>

Antwoord 12

font-size: min(max(0.7rem, 3vw), 2rem);

eenvoudige invoer van de minimale – responsieve – maximale waarde. De ondersteuning in 2021 is bijna 98%.

Other episodes