Ano ang mga generic na pamilya ng font sa CSS?

Ang pangkaraniwang mga klasipikasyon ng font na magagamit upang magamit sa iyong website

Kapag nagdidisenyo ng isang website, ang isa sa mga pangunahing elemento ng isang pahina na gagana mo ay nilalaman ng teksto. Dahil dito, kapag nagtatayo ka ng isang webpage at estilo ito sa CSS, isang malaking bahagi ng pagsisikap na iyon ay nakasentro sa palalimbagan ng site.

Ang disenyo ng pormat ay gumaganap ng mahalagang papel sa disenyo ng website. Ang mahusay na inilatag at formate na nilalaman ng teksto ay tumutulong sa isang site na maging mas matagumpay sa pamamagitan ng paglikha ng isang karanasan sa pagbabasa na parehong kasiya-siya at madaling ubusin. Bahagi ng iyong mga pagsisikap sa pagtratrabaho sa uri ay upang piliin ang mga tamang font para sa iyong disenyo at pagkatapos ay gamitin ang CSS upang idagdag ang mga font at mga estilo ng font sa display ng pahina. Ginagawa ito sa pamamagitan ng paggamit ng tinatawag na " font-stack "

Font-Stacks

Kapag tinukoy mo ang isang font na gagamitin sa isang webpage, ito ay isang pinakamahusay na kasanayan upang isama rin ang mga pagpipilian sa fallback kung sakaling ang iyong pagpili ng font ay hindi matagpuan. Ang mga pagpipilian sa fallback ay ipinapakita sa "font stack." Kung hindi mahanap ng browser ang unang font na nakalista sa stack, lumilipat ito sa susunod. Ipinagpapatuloy ang prosesong ito hanggang sa ito ay nakakahanap ng isang font na magagamit nito, o ito ay naubusan ng mga pagpipilian (kung saan pinipili lamang nito ang anumang sistema ng font na gusto nito). Narito ang isang halimbawa kung paano tumingin ang font-stack sa CSS kapag inilapat sa elemento ng "katawan":

katawan {font-family: Georgia, "Times New Roman", serif; }

Pansinin na tinukoy namin muna ang font na Georgia. Bilang default, ito ang gagawin ng pahina, ngunit kung ang font ay hindi magagamit para sa ilang kadahilanan, ang pahina ay babalik sa Times New Roman. Isinama namin ang pangalan ng font sa double quotes dahil ito ay isang multi-word name. Ang mga pangalan ng single word font, tulad ng Georgia o Arial, ay hindi nangangailangan ng mga panipi, ngunit nangangailangan ng pangalan ng multi-word font na ito upang malaman ng browser na ang lahat ng mga salitang iyon ay bumubuo sa pangalan ng font.

Kung titingnan mo ang dulo ng stack ng font, dapat mong mapansin na natapos na namin ang salitang "serif". Iyon ay pangkaraniwang pangalan ng pamilya ng font. Sa malamang na hindi na ang isang tao ay walang Georgia o Times New Roman sa kanilang computer, gagamitin ng site ang kahit anong font ng serif na maaaring makita. Mas mainam na pahintulutan ang site na maging fallback sa kahit anong mga font na gusto nito, dahil maaari mong sabihin kahit na anong uri ng font na gagamitin upang ang pangkalahatang hitsura at tono ng isang disenyo ng site ay magiging buo hangga't maaari. Oo, ang browser ay pipili ng isang font para sa iyo, ngunit hindi bababa sa nagbibigay ka ng gabay upang malaman kung anong uri ng font ang pinakamahusay na gagana sa loob ng disenyo.

Generic Font Families

Ang generic na pangalan ng font na magagamit sa CSS ay:

Habang may maraming iba pang mga klasipikasyon ng font na magagamit sa disenyo ng web at palalimbagan, kabilang ang slab-serif, blackletter, display, grunge, at iba pa, ang mga 5 na nakalista sa pangkaraniwang mga pangalan ng font ay ang mga magagamit mo sa isang font-stack sa CSS. Ano ang mga pagkakaiba sa mga klasipikasyon ng font na ito? Tignan natin!

Ang mga cursive na font ay kadalasang nagtatampok ng mga manipis, makulay na mga liham ng sulat na sinadya upang magtiklop ng magarbong handwritten na teksto. Ang mga font na ito, dahil sa kanilang manipis, mabulaklak na mga titik, ay hindi angkop para sa malaking block ng nilalaman tulad ng kopya ng katawan. Ang mga cursive na font ay karaniwang ginagamit para sa mga heading at mas maikli na mga pangangailangan ng teksto na maaaring maipakita sa mas malaking laki ng font.

Ang mga font ng pantasiya ay ang mga medyo mabaliw na mga font na hindi talaga nahuhulog sa anumang iba pang kategorya. Ang mga font na gumagaya ng mga kilalang logo, tulad ng mga sulat na mula sa Harry Potter o Bumalik sa Mga pelikula sa Hinaharap, ay mahuhulog sa kategoryang ito. Muli, ang mga font na ito ay hindi angkop para sa nilalaman ng katawan dahil ang mga ito ay madalas na inilarawan sa pangkinaugalian na ang pagbabasa ng mga passages ng teksto na nakasulat sa mga font na ito ay napakahirap gawin.

Ang mga monospace font ay ang mga kung saan ang lahat ng mga letterforms ay pantay na sized at naka-spaced out, tulad ng nais mong natagpuan sa isang lumang makinilya. Hindi tulad ng iba pang mga font na may mga variable na lapad para sa mga titik depende sa kanilang sukat (halimbawa, ang kabisera "W" ay kukuha ng mas maraming silid kaysa sa isang maliit na letra "i"), ang mga monospace font ay naayos na lapad para sa lahat ng mga character. Ang mga font na ito ay madalas na ginagamit kapag ang code ay ipinapakita sa isang pahina dahil tumingin sila nang tiyakan ibang kaysa sa iba pang mga teksto sa pahinang iyon.

Ang mga serif na mga font ay isa sa mga mas popular na klasipikasyon. Ang mga ito ay mga font na may maliit na sobrang ligatures sa mga letterforms. Ang mga sobrang piraso ay tinatawag na "serifs". Ang mga karaniwang serif font ay ang Georgia at Times New Roman. Ang mga serif na font ay maaaring gamitin para sa malaking teksto tulad ng heading pati na rin ang mahabang mga sipi ng teksto at kopya ng katawan.

Ang Sans-serif ang huling pag-uuri na titingnan natin. Ang mga ito ay mga font na walang mga nabanggit na ligatures. Ang ibig sabihin ng pangalan ay "walang serifs". Ang mga sikat na mga font sa kategoryang ito ay magiging Arial o Helvetica. Katulad ng serifs, ang mga sans-serif na mga font ay maaaring gamitin nang pantay na rin sa mga pamagat pati na rin ang nilalaman ng katawan.

Orihinal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard noong 10/16/17