# 152: Šrifto įkėlimas naudojant Zachą Leathermaną CSS-gudrybės

Anonim

Laikas kitai poravimo ekrano kopijai! Šį kartą turiu Zachą Leathermaną iš „Filament Group“. Per pastaruosius kelerius metus Zachas daug tyrinėjo, rašė ir kalbėjo apie interneto šriftų įkėlimą. Jis turi išsamų vadovą!

Yra tam tikrų problemų dėl numatytojo pasirinktų šriftų įkėlimo būdo. Kaip, tiesiog susiejant šriftą tam tikroje CSS per @ font-face. Net tai, kaip „Google“ šriftai suteikia galimybę naudoti jų šriftus, Zachas vadina anti-modeliu (galų gale tai tik vanilla @ font-face). Skirtingos naršyklės su @ font-face daro skirtingus veiksmus. Pvz., Kai kurios „Safari“ versijos padaro pasirinktinį šriftą nustatytą tipą nematomą, kol šriftas neįkeliamas, tačiau jis neturi skirtojo laiko, todėl jei šriftas dėl kokių nors priežasčių nepavyksta, galite būti pačiame blogiausiame scenarijuje: amžinai nematomas tekstas svetainė.

Jūs negalite daug kontroliuoti, kaip įkeliami @ font-face šriftai, nebent paimsite reikalą į savo rankas. Tai reiškia tokius dalykus kaip: šrifto įterpimas, šrifto subtikslinimas (arba „kritiniu“ glifų rinkiniu, arba bent jau grifų redukavimas į vartojamą kalbą), šriftų pakrovėjų naudojimas norint nustatyti, kada šriftai įkeliami, ir klasių keitimas, norint juos naudoti . Tas paskutinis yra ypač įdomus. Tikrindami šrifto įkėlimo valdymą turite ne tik spręsti, kada / kaip naršyklė įkelia CSS, kuriame yra „@ font-face“, bet ir tai, kada / kaip naršyklė aptinka teksto elementų, kuriems liepiama naudoti tuos šriftus. Nenaudojami šriftai neatsisiunčiami. Taigi kartais ši procedūra priverčia juos atsisiųsti, palaukite, kol atsisiųs, tada pritaikykite klases, kad jas iš tikrųjų naudotumėte.

Keletas įrankių, kuriuos apžvelgėme:

  • „Firefox DevTools“ geriau žiūrėjo į naudojamus šriftus
  • Šriftai gali būti priskirti šriftų generatoriuje arba „Font Prep“.
  • Kokius glifus išskaitytumėte? Išbandykite, ko jums reikia, naudodamiesi „Glyphhanger“ tam tikruose URL.
  • Kaip sužinoti, kada naršyklė naudoja dirbtinį pusjuodį / kursyvą? dirbtinis-pasas.