Share
Webfonter bidro til å puste liv i design, og hjalp oss med å unngå systemstandardene så mye brukt i de tidlige dagene av webdesign. Med så mange alternativer som er tilgjengelige i dag, har vi så mange triks opp på ermene for å kunne tjene og stil tilpassede skrifter. Nivå 4 i CSS Fonts Module beskriver mer spennende alternativer du vil elske, inkludert noen spennende egenskaper som font-min / max-størrelse. Denne artikkelen vil ikke avdekke hver eneste crumb på nivå 4, men vil fremheve de interessante delene fremdeles i barndommen. Eventyret starter nå!
For tiden sitter vi mellom to nivåer av spesifikasjoner. På den ene siden har vi nivå 3; en spesifikasjon som har vært på "Kandidatrekommendasjon" siden oktober 2013. Se fremover har vi nivå 4; en spesifikasjon som har ligget på "Working Draft" siden juli 2017. Hvis du trenger en påminnelse om rekkefølgen av W3C-spesifikasjonstrinn, la oss ta et øyeblikk til å vurdere dem:
Nå som vi forstår spesifikasjonstrinnene, lar vi dykke inn i nivå 4 og gi noen av de kjente og dokumenterte funksjonene nye til denne modulen..
Deler av nivå 3 som blir standardisert vil bli portet til nivå 4, men nivå 4 vil også inkludere sine egne unike tillegg. Seksjoner som Font Variations, Font Rendering Controls, Farge Font Support, Basic Font PropertiesogFont Resources vil inneholde helt nye elementer som mange utviklere vil finne nyttige.
Det spesielle skriftfaget som blir gjengitt, bestemmes av font-family og andre skriftegenskaper som gjelder for et gitt element, for eksempel font-vekt og fontstil for eksempel. Denne strukturen gjør at innstillingene kan variere uavhengig av hverandre og hva som omfatter Grunnleggende skrifttypeegenskaper. Så hva er planlagt for denne gruppen?
.element font-min-size: 0.875rem; font-max-size: 5rem;
Ut av alt som er skissert på nivå 4, er disse to egenskapene min favoritt fordi begge vil tillate et element skriftstørrelse å bli "klemmet" mellom verdiene som følger med. Dette er absolutt super fantastisk nyheter for lydhør design fans. Verdiene kan være en absolutt størrelse, en relativ størrelse eller lengdeprosent.
Det er ikke noen dokumentasjon på dette tidspunktet som viser hvordan nettleserens resize-annonse utløser enten egenskap, og hvis du ønsker å eksperimentere med denne funksjonen ved hjelp av eksperimentelle webplattformfunksjoner, flagg i Chrome, er du ute av lykke.
Flertallet av elementene som er skissert i denne delen, bidrar til å kontrollere aspekter som gjelder å hente, referere og vise fontfamilien du velger.
@ font-face font-display: auto | blokk | bytte | fallback | valgfri;
Denne egenskapen bestemmer hvordan et skriftside blir vist, basert på hvis og når det er lastet ned og klar til bruk av nettleseren. Det er også ment å brukes i din @ Font-face eller @ font-funksjonsverdier erklæring.
Accentsconagua
auto: Skjermbildet for skriftvisning er definert av brukeragent (dvs. nettleseren), med mindre det er definert i CSS eksplisitt.blokkere: Gir skrifttypens ansikt en kort blokkperiode (3s anbefales i de fleste tilfeller) og en uendelig bytteperiode.bytte: Gir skrifttypens ansikt en 0s blokk periode og en uendelig bytte periode.falle tilbake: Gir skrifttypens ansikt en ekstrem liten blokkperiode (100m eller mindre anbefales i de fleste tilfeller) og en kort bytteperiode (3s anbefales i de fleste tilfeller).valgfri: Gir skriftfaget en ekstremt liten blokkperiode (100m eller mindre anbefales i de fleste tilfeller) og en 0s bytteperiode.For alle som holder oppmerksom på web skrifttype ytelse og hvem som er opptatt på daglig basis, diskuterer FOUT eller FOIT, da vil denne eiendommen gjøre deg svært fornøyd.
@ font-feature-values font-display: auto | blokk | bytte | fallback | valgfri;
Når font-skjerm er utelatt i en @ Font-face regelen bruker brukeragenten font-skjerm verdi satt via @ font-funksjonsverdier for den aktuelle font-family hvis en er satt, ellers er den som standard font-display: auto. Se forrige forklaring om font-skjerm verdier.
Regelsettet er perfekt for tilfeller der en font serveres via en tredjepart, og du har ikke kontroll over @ Font-face regler, men er fortsatt i stand til å angi en standard font-skjerm policy for den oppgitte font-family. Dette er gode nyheter for de byggeplassene med non-stop tredjeparts handling.
@ font-feature-verdier font-family: "Custom Font Name", sans-serif; font-display: fallback;
Mens jeg fortsatt er ny og litt vag, kan jeg bare anta for å kontrollere en bestemt font-family visningsadferd, må utvikleren bruke font-family eiendom i denne regelen for å målrette mot ønsket skrifttype. Igjen, dette er bare en antagelse fra min side og ikke faktisk på noen måte.
Denne delen er 100% ny og spesifikk for nivå 4. De fleste av funksjonene som er dokumentert for øyeblikket, gjelder størrelsen og innstillingene til hver skriftside.
Denne egenskapen brukes for å opprettholde stilistiske egenskaper og forbedre lesbarheten i forskjellige optiske størrelser. Med digital type har vi muligheten til å skalere en skrift i en hvilken som helst størrelse, men dette tar ikke hensyn til utseendet på typen i disse varierende størrelsene.
"Tekst som gjengis i forskjellige størrelser, har ofte nytte av litt forskjellige visuelle representasjoner. For eksempel, for å hjelpe lesing med små tekststørrelser, er slag ofte tykkere med større serifs. Større tekst har ofte en mer delikat figur med mer kontrast mellom tykkere og tynnere streker. "~ Nivå 4 Working Draft
.element font-optisk dimensjonering: auto | ingen
auto: Brukeragenten kan endre formen på glyphs basert på skriftstørrelse og pikseldensiteten på skjermen. For OpenType og TrueType-skrifter som bruker fontvariasjoner, gjøres dette ofte ved å bruke opsz font variasjon.ingen: Brukeragenten må ikke endre formen på glyphs for optisk størrelse..element font-variasjon-innstillinger: normal | []
Denne egenskapen gir lavt nivå kontroll over OpenType- eller TrueType-skriftvariasjoner. Det er ment som en måte å gi tilgang til skriftvariasjoner som ikke er mye brukt, men er nødvendig for en bestemt brukstilfelle.
normal: Tekst er lagt ut med standardinnstillinger. .element / * fire bokstav akse navn og nummer * / font-variasjon-innstillinger: "opsz" 0,5;
Strengverdien som brukes i koden ovenfor, kalles navnet på fire bokstavs akse som beskriver funksjonen du ønsker å variere, sammen med variasjonsverdien som vanligvis varierer fra 0-1, men kan også være negative verdier der det kreves. De tillatte variasjonene vil alltid avhenge av det valgte skriftfaget.
Fargefonter er helt nye til nivå 4 og lar skrifttypefiler beskrive ikke bare konturene som beskriver kanter av glyphs, men også fargene som finnes i glyphene. Hvorfor vil du bruke noen av disse funksjonene? Jeg foreslår at du leser denne artikkelen av Grace Fussell for å komme opp til fart:
.element font-palette: normal | lys | mørk |;
Mange farge font filformater tillater farger i glyphs å bli parameterisert. I disse skriftene er farger referert til av indeksen når de beskriver geometrien til hver glyph. Disse indeksene er løst i en nåværende aktiv palett ved hjelp av et oppslagstabell som finnes i fonten. Imidlertid inneholder mange fonter flere paletter, som hver inneholder et sett med komplementære farger valgt av fontdesigneren for å gi tiltalende visuelle resultater. Utviklere kan definere en palett ved å bruke @ font-palett-verdiene regelen nevnt i neste avsnitt.
/ * Syntax * / @ font-palett-verdier/ * Eksempel * / @ font-palett-verdier Augusta font-family: Handover Sans; basepalett: 3; 1: rgb (43, 12, 9); 3: var (- høydepunkt);
Dette representerer en palett med farger som brukes i en skrift. Det definerer en fargepalett og forbinder den fargepaletten med en bestemt skrift. Dette tillater en webforfatter å velge vilkårlig farger for å bruke inne i en fargeskrift i stedet for å være begrenset til de eksisterende eksisterende palettene i fontfiler
basispaletten: Denne beskrivelsen angir en palett i skrifttypen som regelen inneholder @ font-palette-verdier bruker som en opprinnelig verdi. Hvis nei .element font-family: 'Custom Font Name'; font-presentasjon: auto | tekst | emoji;
Denne egenskapen tillater webforfattere å velge om emoji-presentasjon eller tekstpresentasjon brukes for visse emoji-kodepunkter. En stor seier for emoji fanatikere 😎
Det er sikkert mange spennende nye funksjoner som kommer ned i rørledningen for webfonter, og jeg oppfordrer deg til å begynne å eksperimentere med favorittene dine etter hvert som de blir tilgjengelige. Hvis du har en bestemt favoritt fra nivå 4 eller til og med nivå 3, gi oss beskjed i kommentarene, inkludert eventuelle meninger du måtte ha angående funksjonene vi har diskutert.
!
