Share
Weblettertypen hebben geholpen om ontwerpen nieuw leven in te blazen, zodat we de systeemstandaarden die zo vaak werden gebruikt tijdens de eerste dagen van webontwerp konden vermijden. Met zoveel opties die vandaag beschikbaar zijn, hebben we genoeg trucjes voor het bedienen en opmaken van aangepaste lettertypen. Niveau 4 van de CSS Fonts Module schetst meer intrigerende opties waar je dol op zult zijn, inclusief enkele opwindende eigenschappen zoals font-min / max-size. Dit artikel onthult niet elke laatste kruim van niveau 4, maar belicht de interessante delen die nog in de kinderschoenen staan. Het avontuur begint nu!
Momenteel zitten we tussen twee specificatieniveaus. Aan de ene kant hebben we niveau 3; een spec die sinds oktober 2013 in de 'Candidate Recommendation' staat. Voor de toekomst hebben we niveau 4; een specificatie die sinds juli 2017 in "Working Draft" is geplaatst. Als u een herinnering nodig hebt met betrekking tot de volgorde van de W3C-specificatie, laten we het even even overnemen:
Nu we de specificatiefasen begrijpen, duiken we in het lef van niveau 4 en brengen enkele van de bekende en gedocumenteerde functies nieuw voor deze module aan het licht..
Delen van niveau 3 die gestandaardiseerd worden, worden geport naar niveau 4, maar niveau 4 zal ook zijn eigen unieke toevoegingen bevatten. Secties zoals lettertypevariaties, lettertypeweergavebesturingselementen, ondersteuning voor kleurlettertypen, basislettertype-eigenschappenenFont Resources zal splinternieuwe items bevatten die veel ontwikkelaars nuttig zullen vinden.
Het bepaalde lettertype dat wordt weergegeven, wordt bepaald door de font-family en andere lettertype-eigenschappen die van toepassing zijn op een bepaald element, zoals lettertype dikte en lettertype bijvoorbeeld. Met deze structuur kunnen instellingen onafhankelijk van elkaar variëren en wat omvat Basislettertype-eigenschappen. Dus wat is er gepland voor deze groep?
.element font-min-size: 0.875rem; font-max-size: 5rem;
Van alles dat in niveau 4 wordt geschetst, zijn deze twee eigenschappen mijn favoriet omdat beide een element toestaan lettertypegrootte om "ingeklemd" te worden tussen de geleverde waarden. Dit is zeker super geweldig nieuws voor fans van responsief design. De waarden kunnen een absolute grootte, een relatieve grootte of lengte-percentage zijn.
Er is momenteel geen documentatie waarin wordt vermeld hoe de resize -gebeurtenis van de browser eigenschap activeert. Als u experimenteert met deze functie met de vlag van het experimentele webplatform in Chrome, heeft u geen geluk.
Het merendeel van de items die in deze sectie worden beschreven, helpt om aspecten te beheersen die betrekking hebben op het ophalen, verwijzen en weergeven van de lettertypefamilie van uw keuze.
@ font-face font-display: auto | blok | ruilen | terugval | optioneel;
Deze eigenschap bepaalt hoe een lettertype wordt weergegeven, op basis van of en wanneer het is gedownload en klaar voor gebruik door de browser. Het is ook bedoeld voor gebruik binnen uw @ Font-face of @ Font-feature-waarden verklaring.
Accentsconagua
auto: Het beleid voor het weergeven van lettertypen is door de gebruiker / agent gedefinieerd (dat wil zeggen de browser) tenzij expliciet gedefinieerd binnen CSS.blok: Geeft het lettertype een korte blokperiode (in de meeste gevallen wordt 3s aanbevolen) en een oneindige swapperiode.ruil: Geeft het lettertype een 0s-blokperiode en een oneindige swapperiode.terugvallen: Geeft het lettertype een extreem kleine blokperiode (in de meeste gevallen wordt aanbevolen om 100 ms of minder te gebruiken) en een korte swapperiode (in de meeste gevallen wordt 3s aanbevolen).facultatief: Geeft het lettertype een extreem kleine blokperiode (in de meeste gevallen wordt dit aangeraden in de meeste gevallen 100 ms of minder) en een 0s-verwisselingsperiode.Voor iedereen die veel aandacht schenkt aan de prestaties van weblettertypen en die dagelijks bezig is met discussiëren FOUT of FOIT, dan maakt deze woning u zeer tevreden.
@ font-feature-values font-display: auto | blok | ruilen | terugval | optioneel;
Wanneer font-scherm is weggelaten in a @ Font-face regel gebruikt de user agent de font-scherm waarde ingesteld via @ Font-feature-waarden voor de relevante font-family als er een is ingesteld, anders is het standaard ingesteld op lettertype-weergave: auto. Zie vorige uitleg over font-scherm waarden.
De regelset is perfect voor gevallen waarin een lettertype wordt geserveerd via een derde partij en u geen controle hebt over de @ Font-face regels, maar kunnen nog steeds een standaard instellen font-scherm beleid voor de verstrekte font-family. Dit is goed nieuws voor mensen die sites bouwen met non-stop acties van derden.
@ font-feature-values font-family: "Custom Font Name", sans-serif; lettertype-weergave: terugval;
Hoewel het nog nieuw en enigszins vaag is, kan ik alleen maar veronderstellen dat ik een bepaald persoon kan controleren font-family weergave gedrag, de ontwikkelaar moet de font-family eigenschap binnen deze regelset om het gewenste lettertype te targeten. Nogmaals, dit is slechts een veronderstelling van mijn kant en niet feitelijk op geen enkele manier.
Dit gedeelte is 100% nieuw en specifiek voor niveau 4. De meeste van de momenteel gedocumenteerde functies hebben betrekking op de grootte en instellingen van elk lettertype.
Deze eigenschap wordt gebruikt om stilistische eigenschappen te behouden en de leesbaarheid bij verschillende optische formaten te verbeteren. Met digitaal type hebben we de mogelijkheid om een lettertype op elke maat te schalen, maar dit houdt geen rekening met het uiterlijk van het type bij deze verschillende formaten.
"Tekst die op verschillende formaten wordt gerenderd, heeft vaak baat bij enigszins andere visuele representaties. Om bijvoorbeeld te helpen bij het lezen van kleine tekstafmetingen, zijn streken vaak dikker met grotere schreven. Grotere tekst heeft vaak een meer delicate figuur met meer contrast tussen dikkere en dunnere streken. "~ Level 4 Working Draft
.element font-optical-sizing: auto | geen
auto: De user-agent kan de vorm van glyphs wijzigen op basis van de lettertypegrootte en de pixeldichtheid van het scherm. Voor OpenType- en TrueType-lettertypen met lettertypevariaties wordt dit vaak gedaan met behulp van de opsz lettertype variatie.geen: De user-agent mag de vorm van glyphs niet wijzigen voor optische grootte..element font-variation-settings: normal | []
Deze eigenschap biedt laag-niveau controle over OpenType- of TrueType-lettertypevariaties. Het is bedoeld als een manier om toegang te bieden tot lettertypevariaties die niet op grote schaal worden gebruikt, maar die nodig zijn voor een bepaald gebruik.
normaal: Tekst wordt opgemaakt met behulp van standaardinstellingen. .element / * vierletter as naam en nummer * / font-variation-settings: "opsz" 0.5;
De tekenreekswaarde die in de bovenstaande code wordt gebruikt, staat bekend als de naam van de vierletter-as die de functie beschrijft die u wilt variëren, samen met de variatiewaarde die doorgaans tussen 0 en 1 ligt, maar die ook waar nodig negatieve waarden kan zijn. De toegestane variaties zijn altijd afhankelijk van het gekozen lettertype.
Kleurlettertypen zijn gloednieuw op niveau 4 en geven lettertypebestanden de mogelijkheid om niet alleen de contouren te beschrijven die randen van glyphs beschrijven, maar ook de kleuren die in de glyphs voorkomen. Waarom zou u een van deze functies willen gebruiken? Ik stel voor dit artikel van Grace Fussell te lezen om op snelheid te komen:
.element font-palette: normaal | licht | donker |;
Veel indelingen voor kleurlettertypen zorgen ervoor dat kleuren in glyphs kunnen worden geparametreerd. In deze lettertypen wordt naar kleuren verwezen met een index bij het beschrijven van de geometrie van elke glyph. Deze indices worden binnen een actueel actief palet opgelost met behulp van een opzoektabel die in het lettertype aanwezig is. Veel lettertypen bevatten echter meerdere paletten, die elk een reeks complementaire kleuren bevatten die door de letterontwerper zijn gekozen om aangename visuele resultaten te bieden. Ontwikkelaars kunnen een palet definiëren door de @ Font-palette-waarden regel vermeld in de volgende sectie.
/ * Syntaxis * / @ lettertype-palet-waarden/ * Voorbeeld * / @ lettertype-palet-waarden Augusta font-family: Handover Sans; basispalet: 3; 1: rgb (43, 12, 9); 3: var (- highlight);
Dit vertegenwoordigt een palet van kleuren die in een lettertype worden gebruikt. Het definieert een kleurenpalet en koppelt dat kleurenpalet aan een specifiek lettertype. Hierdoor kan een webauteur willekeurige kleuren selecteren om in een kleurlettertype te gebruiken in plaats van te worden beperkt tot de al bestaande paletten in lettertypebestanden
base-palet: Deze descriptor geeft een palet op in het lettertype dat de regel @ font-palette-values als beginwaarde gebruikt. Als Nee .element font-family: 'Custom Font Name'; lettertype-presentatie: automatisch | tekst | emoji;
Met deze eigenschap kunnen webauteurs selecteren of emoji-presentatie of tekstpresentatie wordt gebruikt voor bepaalde emoji-codepunten. Een enorme overwinning voor emoji-fanatici 😎
Er zijn zeker veel spannende nieuwe functies in de pijplijn voor weblettertypen en ik moedig je aan om te gaan experimenteren met je favorieten zodra deze beschikbaar komen. Als je een bepaalde favoriet van niveau 4 of zelfs niveau 3 hebt, laat ons dit dan weten in de reacties, inclusief eventuele meningen over de functies die we hebben besproken.
!
