Fontu sintēze - CSS-triki

Anonim

font-systhesisĪpašums CSS dod pārlūkprogrammas norādījumus par to, kā rīkoties ar fontu treknrakstā un italicized raksturu, kad norādītais font-familyneietver tos.

Ņemsim par piemēru Lato no Google Fonts. Tajā teikts, ka ir 10 dažādas fonta variācijas.

Katra no šīm fontu variācijām ir tehniski atšķirīgs fonta fails. Ja mēs vēlamies izmantot noteiktus svarus un stilus, mēs šos failus sasaistām, lai pārlūkprogrammā būtu ko ielādēt.

Šim teikumam parasti būtu nepieciešami četri dažādi fontu faili.

Bet ne visos fontos ir faili svara un stila apstrādei. Šādos gadījumos pārlūkprogramma “sintezēs” pašu izskatu. Pārlūkprogramma dara visu iespējamo, taču mākslīgā liekšana un stils dažkārt padara tekstu mazāk salasāmu; tas ir, mazāk salasāms nekā patiesi izstrādāta versija. Visvieglākos gadījumos mēs varam redzēt, ka rakstzīmes pārklājas. Smagākos gadījumos teksts nav pilnībā nolasāms vai pat var mainīt nozīmi - kā tas varētu notikt ar tādām valodām kā ķīniešu, japāņu, korejiešu un citi logogrāfiskie skripti.

Tas ir tas, kur font-synthesisienāk. Tas kontrolē, kuras burtzīmes pārlūkprogrammai ir atļauts sintezēt.

Sintakse

.element ( font-synthesis: none | ( weight || style ); )

Vienkāršā angļu valodā tas nozīmē, ka font-synthesistiks pieņemts:

  • vērtība none
  • vai weightvaistyle
  • gan weightunstyle

Ir vērts atzīmēt, ka tas font-synthesistiek uzskatīts par stenogrāfijas īpašumu. Saskaņā ar spec, tā ir kombinācija, font-synthesis-weightun font-synthesis-stylekur abi pieņem vērtības autovai none. Tā kā ir iespējams iegūt tādu pašu efektu, izmantojot stenogrāfiju, tas, iespējams, ir labākais veids, kā iet.

Vērtības

  • none: Nedrīkst sintezēt ne treknu, ne slīpu
  • weight: Pārlūkprogramma var sintezēt treknrakstu
  • style: Pārlūks var sintezēt slīpi
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Lietošana

font-synthesisvar lietot ar visiem elementiem, tostarp ::first-letterun ::first-linepseido-elementiem.

Var būt gadījumi, kad neļaut pārlūkprogrammai sintezēt treknrakstā un slīpi visā valodā ir jēga, jo kāds no tiem var aizsegt rakstzīmes. Šis piemērs ir izvilkts no spec, kas atspējo sintezētas treknrakstā un slīpi fontu sejas, kurās ir arābu rakstzīmes:

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Demonstrācija

Pārlūkprogrammas atbalsts

Raksta tapšanas brīdī caniuse ziņo par 20,21% font-synthesisīpašuma globālo pārklājumu .

Darbvirsma

IE Mala Firefox Chrome Safari Opera
Nē Nē 34+ Nē 9+ Nē

Mobilais

iOS Safari Opera Mini Android pārlūks Chrome Android ierīcēm Firefox Android ierīcēm
9+ Viss Nē Nē 68

Vai vēlaties izmantot font-synthesise-pastā? Campaign Monitor ziņo, ka to atbalsta šādi klienti:

  • Apple Mail 10+
  • Outlook for Mac
  • AOL Alto iOS lietotne
  • iOS Mail 10+
  • Zvirbulis
  • G Suite
  • Gmail
  • Google iesūtne

Vairāk informācijas

  • CSS fontu moduļa 4. līmeņa specifikācija
  • “CSS3 tests: font-synthesis” autors Ēriks Meijers
  • Krisa Kojjē “Kā slīprakstīt tekstu”