Ang Syntax ng Font-Family Property
Ang tipograpikong disenyo ay isang mahalagang piraso ng isang matagumpay na disenyo ng website. Paglikha ng mga site na may tekstong madaling basahin at mukhang mahusay ang mga layunin ng bawat propesyonal sa disenyo ng web. Upang makamit ito, kakailanganin mong maitakda ang mga tiyak na mga font na nais mong gamitin sa iyong mga web page. Upang tukuyin ang typeface o family font sa iyong mga dokumento sa Web gagamitin mo ang estilo ng estilo ng font sa pamilya sa iyong CSS.
Ang pinakasimpleng estilo ng family-style na maaari mong gamitin ay isama lamang ang isang font na pamilya:
p {font-family: Arial; }Kung inilapat mo ang estilo na ito sa isang pahina, ang lahat ng mga talata ay ipapakita sa "Arial" na pamilyang font. Ito ay mahusay at dahil ang "Arial" ay kilala bilang isang "web-safe font", na nangangahulugang ang karamihan (kung hindi lahat) ang computer ay mai-install ito, maaari kang magpahinga medyo madaling alam na ang iyong pahina ay ipapakita sa inilaan font .
Kaya ano ang mangyayari kung ang font na iyong pinili ay hindi matagpuan? Halimbawa, kung hindi ka gumagamit ng "web safe font" sa isang pahina, ano ang ginagawa ng user agent kung wala silang font na iyon? Gumagawa sila ng pagpapalit.
Maaari itong magresulta sa ilang mga nakakatawa na naghahanap ng mga pahina. Minsan ay nagpunta ako sa isang pahina kung saan ipinapakita ito ng aking kompyuter sa "Wingdings" (isang icon-set) dahil ang aking computer ay walang font na tinukoy ng developer, at ang aking browser ay gumawa ng isang napakahirap na pagpipilian sa kung anong font ang gagawin nito gamitin bilang kapalit. Ang pahina ay ganap na hindi mababasa para sa akin! Ito ay kung saan ang isang stack ng font ay dumating sa pag-play.
Paghiwalayin ang Maramihang Font Families na may Comma sa isang Font Stack
Ang "font stack" ay isang listahan ng mga font na nais mong gamitin ang iyong pahina. Gusto mong ilagay ang iyong mga pagpipilian sa font sa pagkakasunod-sunod ng iyong kagustuhan at paghiwalayin ang bawat isa na may kuwit. Kung ang browser ay walang unang family font sa listahan, susubukan nito ang pangalawang at pagkatapos ang pangatlo at iba pa hanggang sa matagpuan nito ang isang ito sa system.
font-family: Pussycat, Algerian, Broadway;Sa halimbawa sa itaas, unang makikita ng browser ang font na "Pussycat", pagkatapos ay ang "Algerian" pagkatapos "Broadway" kung wala sa iba pang mga font ang natagpuan. Ito ay nagbibigay sa iyo ng higit na isang pagkakataon na hindi bababa sa isa sa iyong napiling mga font ay gagamitin. Ito ay hindi perpekto, na kung saan ay kung bakit mayroon pa kaming maaari naming idagdag sa aming font stack (basahin sa!).
Gamitin ang Huling Generic Font
Kaya maaari kang lumikha ng isang font stack na may isang listahan ng mga font at mayroon pa rin wala sa kung saan maaaring mahanap ang browser. Malinaw na ayaw mong magpakita ang iyong pahina ng hindi mabasa kung ang browser ay gumagawa ng isang mahinang pagpipilian sa pagpapalit. Sa kabutihang-palad CSS ay may isang solusyon para sa ito masyadong: generic na mga font .
Dapat mong laging tapusin ang iyong listahan ng font (kahit na ito ay isang listahan ng isang pamilya o tanging web safe font) na may pangkaraniwang font. May limang maaari mong gamitin:
- cursive
- pantasiya
- monospace
- sans-serif
- serif
Ang dalawang halimbawa sa itaas ay maaaring mabago sa:
font-family: Arial, sans-serif; font-family: Pussycat, Algerian, Broadway, fantasy;Ang ilang mga Pangalan ng Pampamilya ay Dalawang o Higit pang Mga Salita
Kung ang pamilya ng font na gusto mong gamitin ay higit sa isang salita, dapat mong palibutan ito ng mga double-quote mark. Habang ang ilang mga browser ay maaaring basahin ang mga pamilya ng font nang walang mga panipi, maaaring may mga problema kung ang whitespace ay pinalala o binabalewala.
font-family: "Times New Roman", serif;Sa halimbawang ito, makikita mo na ang pangalan ng font na "Times New Roman", na kung saan ay multi-salita, ay naka-encode sa mga panipi. Sinasabi nito sa browser na ang lahat ng tatlong mga salitang ito ay bahagi ng pangalan ng font na iyon, kumpara sa tatlong iba't ibang mga font na may lahat ng mga pangalan ng isang salita.
Orihinal na artikulo ni Jennifer Krynin. Na-edit noong 12/2/16 ni Jeremy Girard