Habang ang mga imahe makakuha ng magkano ng pag-ibig kapag ito ay dumating sa mga website, ito ay ang nakasulat na salita na apila sa mga search engine at nagdadala balik ang nilalaman ng karamihan sa mga site. Dahil dito, ang disenyo ng typographic ay isang mahalagang bahagi ng disenyo ng website. Sa kahalagahan ng teksto ng isang site ay may pangangailangan upang matiyak na ito ay mukhang mahusay at madaling basahin. Ginagawa ito sa estilo ng CSS (Cascading Style Sheets).
Kasunod ng modernong disenyo ng web standard, kapag nais mong magdikta sa hitsura ng nilalaman ng isang website ng teksto, gagawin mo ito gamit ang CSS. Ito ay naghihiwalay sa estilo ng CSS mula sa HTML na istraktura ng isang pahina. Bilang isang halimbawa, kung nais mong i-set ang font ng isang pahina sa "Arial", maaari mong gawin ito sa pamamagitan ng pagdaragdag ng sumusunod na panuntunan sa estilo sa iyong CSS (tala - malamang na gawin ito sa isang panlabas na style sheet ng CSS na nagpapalakas sa mga estilo para sa bawat pahina sa website):
katawan {font-family: Arial; }Ang font na ito ay nakatakda para sa "katawan", kaya ang CSS cascade ay ilalapat ang estilo sa lahat ng iba pang mga elemento ng pahina. Ito ay dahil ang bawat iba pang elemento ng HTML ay isang anak ng elemento ng "katawan", ang mga estilo ng CSS tulad ng pamilya ng font o kulay ay mag-cascade mula sa magulang patungo sa elemento ng bata. Ito ang magiging kaso maliban kung ang isang mas partikular na estilo ay idinagdag para sa ilang mga elemento. Ang tanging problema sa CSS na ito ay ang tanging isang solong font ay tinukoy. Kung ang font na iyon ay hindi matagpuan para sa ilang kadahilanan, ang browser ay palitan ang isa pa sa lugar nito. Ito ay masama dahil wala kang kontrol sa kung anong font ang ginagamit - pipiliin ng browser para sa iyo, at maaaring hindi mo gusto ang nagpasya na gamitin ito! Iyon ay kung saan dumating ang isang stack ng font.
Ang isang font stack ay isang listahan ng mga font sa deklarasyon ng family-font ng CSS. Ang mga font ay nakalista sa pagkakasunud-sunod ng kagustuhan na nais mong lumitaw ang mga ito sa site sa kaso ng isang problema tulad ng isang font na hindi naglo-load. Ang isang font stack ay nagbibigay-daan sa isang taga-disenyo upang kontrolin ang hitsura ng mga font sa web page kahit na ang computer ay walang paunang font na tinawag mo.
Kaya paano lumitaw ang isang stack ng font? Narito ang isang halimbawa:
katawan {font-family: Georgia, "Times New Roman", serif; }Mayroong ilang mga bagay na mapansin dito.
Una, makikita mo na pinaghiwalay namin ang iba't ibang mga pangalan ng font na may kuwit. sa pagitan ng bawat isa Maaari kang magdagdag ng maraming mga font na gusto mo, hangga't sila ay pinaghihiwalay ng isang kuwit. Susubukang i-load ng browser ang unang tinukoy na unang font. Kung nabigo iyon, tatakbo ito pababa sa linya na sinusubukan ang bawat font hanggang sa matagpuan nito ang isang magagamit nito. Sa halimbawang ito kami ay gumagamit ng ligtas na mga font sa web, at ang "Georgia" ay malamang na matagpuan sa computer ng taong bumibisita sa site (tandaan - ang browser ay tumitingin sa iyong computer para sa mga font na tinukoy sa pahina, kaya ang site ay talagang nagsasabi ang computer na mga font na mai-load mula sa iyong system). Kung sa ilang mga dahilan na ang font ay hindi natagpuan, ito ay ilipat ang stack at subukan ang susunod na tinukoy na font.
Sa mga tuntunin ng susunod na font, pansinin kung paano ito nakasulat sa stack. Ang pangalan ng "Times New Roman", ay naka-encode sa double quotes. Ito ay dahil ang pangalan ng font ay may maramihang mga salita. Anumang mga pangalan ng font na may higit sa isang salita (Trebuchet MS, Courier New, atbp.) Ay dapat may pangalan sa double quote upang alam ng browser na lahat ng mga salitang iyon ay bahagi ng isang pangalan ng font.
Sa wakas, tapusin namin ang font stack na may "serif", na isang pangkaraniwang klasipikasyon ng font. Sa hindi tiyak na pagkakataon na wala sa mga font na iyong pinangalanan sa iyong stack ang magagamit, ang browser ay sa halip ay makahanap lamang ng isang font na hindi bababa sa bumaba sa tamang pag-uuri na iyong pinili. Halimbawa, kung gumagamit ka ng sans-serif na mga font tulad ng Arial at Verdana, kaysa sa pagtatapos ng isang font stack na may pag-uuri ng "sans-serif" ay hindi bababa sa panatilihin ang font sa pangkalahatang pamilya kung mayroong problema sa pag-load. Tinatanggap na ito ay dapat na napakabihirang na ang isang browser ay hindi makakahanap ng alinman sa mga font na nakalista sa stack at sa halip ay gagamitin ang generic na pag-uuri na ito, ito ay isang pinakamahusay na kasanayan upang isama ito pa rin upang maging doble ligtas.
Font Stack at Web Font
Maraming mga website ngayon ang gumagamit ng mga web font na kasama sa site kasama ang iba pang mga mapagkukunan (tulad ng mga imaheng site, Javascript file, atbp.) O naka-link sa isang offsite na lokasyon ng font tulad ng Google Font o Typekit. Habang ang mga font ay dapat na mag-load dahil ikaw ay nagli-link sa mga file sa kanilang sarili, gusto mo pa ring gumamit ng isang font stack upang matiyak na mayroon kang ilang kontrol sa anumang mga isyu na maaaring lumabas. Ang parehong bagay ay napupunta para sa "ligtas na web" na mga font na dapat sa computer ng isang tao (tandaan na ang mga font na ginamit namin bilang mga halimbawa sa artikulong ito, kasama ang Arial, Verdana, Georgia, at Times New Roman, ay lahat ng web safe font na dapat sa computer ng isang tao). Kahit na ang posibilidad ng isang nawawalang font ay napakababa, ang pagtukoy ng isang font stack ay makakatulong sa walang bulletproof na disenyo ng typographic ng site hangga't maaari.
Orihinal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard noong 8/9/17