Paano Pinakamahusay na Gumagamit ng Mga Font Sa CSS?

Ipakilala ka ng artikulong ito sa isang simple ngunit isang mahalagang paksa na Font In at bibigyan ka rin ng praktikal na pagpapakita sa paksa. Saklaw ang artikulong ito sa artikulong ito,

• Mga font sa CSS
• Mga Katangian sa CSS Font
• katangian ng font-style
• katangian ng font-weight
• katangian ng laki ng font
• katangian ng font-pamilya

Nagdadala ang mga web site ng nilalaman sa anyo ng mga imahe, audio, video at nilalamang pangkonteksto. Gayunpaman, ang karamihan sa mga web page ay umaasa pa rin sa teksto bilang namamayani na format. Ito ay dahil ang payak na teksto ay nag-aalok ng ilang napaka makabuluhang kalamangan.

Hindi madaling mapanghimasok na madaling mabasa - Nais mong suriin ang pinakabagong iskor sa tugma habang nasa opisina. Malinaw na nais mo ng isang mabilis na pag-update ng teksto, hindi isang maingay na video!
Mababang kinakailangan ng bandwidth ng network - Maaaring mai-load ang nilalaman ng teksto kahit na sa mga mahihirap na lugar ng pagkakakonekta sa internet, habang ang rich media ay hindi.
Paghahanap sa paghahanap - Palaging binabantayan ng mga web site kung gaano kadali napapansin ang kanilang nilalaman sa mga search engine. Ang teksto ay pinakaangkop para dito, kahit papaano hanggang sa ganap na sakupin ng AI ang internet!

Habang ang pag-format ng nilalaman ng teksto, ang mga taga-disenyo ng web ay may kaunting mga parameter lamang upang gumana - font, pagkakahanay, pag-highlight at kulay. Ang pagpili ng tamang font para sa iyong teksto ay isang kritikal na pagpipilian. Ang karaniwang kasanayan ay ang paggamit ng mga CSS font tag upang tukuyin ang mga font para sa teksto sa mga pahina ng HTML.
Kung bago ka sa mundo ng pagprograma ng HTML, kumuha ng isang pangunahing panimulang paglilibot dito. Maaaring gusto mong basahin ang mga pangunahing kaalaman sa CSS bago magpatuloy sa pag-aaral tungkol sa mga font ng CSS.

Para sa isang komprehensibong tutorial sa CSS, bisitahin ang Edureka CSS Tutorial Para sa Mga Nagsisimula. Makakakuha ka ng isang mahusay na head-up sa paraang magagamit ang CSS upang madagdagan ang disenyo ng web sa HTML.

Nagpapatuloy sa artikulong ito sa Mga Font sa CSS

Mga font sa CSS

Ang isang font ay karaniwang isang hanay ng mga katangian na nauugnay sa pagpapakita ng teksto. Ang mga font ay naiiba sa isa't isa sa pamamagitan ng kanilang laki, indentation, lapad, slant at iba pa. Magsimula tayo sa isang pangunahing pagpapakita ng teksto sa iba't ibang mga font.

Halimbawa 1: Mga heading at talata sa iba't ibang mga font

ano ang ginagawa ng tostring sa java

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Ang talata sa italic bold Georgia font
 

 Halimbawa 1: Output 

Sa Halimbawa 1, mayroon kaming 3 magkakaibang linya ng teksto sa iba't ibang mga font. Mapapansin mo na ang bawat isa sa mga font ay magkakaiba sa kanilang mga lapad ng character, indentations, atbp.

Nagpapatuloy sa artikulong ito sa Mga Font sa CSS

Mga Katangian sa CSS Font

Ang mga CSS Font ay mayroong 4 pangunahing mga katangian - estilo, bigat, laki at pamilya. Ang katangian ng istilo ay nagsasaad ng normal o italic. Ipinapakita ng timbang ang font bilang payak o naka-bold. Ang timbang ay maaari ding ipahayag ayon sa bilang. Ang laki ay simpleng laki ng font na mas malaki ang sukat, mas malaki ang teksto sa hitsura. Mayroong maraming mga paraan kung saan maaaring italaga ang laki ng font, ang mga detalyadong paglalarawan ay ibinibigay sa mga susunod na seksyon. Ang katangian ng pamilya ay upang italaga ang pangalan ng font sa teksto.

Sa Halimbawa 1, gumamit kami ng iba't ibang mga pangalan ng font para sa mga heading at talata. Sa ilalim ng mga tag na h1 at p, nakakakita kami ng dalawang pangalan ng font na nakalista, habang ang h2 na mga tag ay nag-iisa lamang ng isang font. Ito ang kahulugan ng isang pamilya ng font, higit pa tungkol sa paglaon.

Nagpapatuloy sa artikulong ito sa Mga Font sa CSS

katangian ng font-style:

Maaaring maitakda ang dalawang pangunahing estilo ay 'normal' at 'italic'. Ang mga italic ay dapat na maging sumpa sa likas na katangian na may isang slant. Karaniwan ang default na pagpipilian na tuwid. May isa pang pagpipilian na hindi gaanong ginagamit na tinatawag na 'pahilig', na kahawig ng italic na pagpipilian sa karamihan ng mga font. Maaari mo ring itakda ang istilo upang 'manahin' nang sa gayon ay kukuha ng istilo ng font mula sa pangunahing elemento nito.

Nagpapatuloy sa artikulong ito sa Mga Font sa CSS

katangian ng font-weight:

Nagpapasya ang katangiang ito kung ang font ay dapat na lumitaw na makapal o manipis. Maaari itong itakda sa 'normal' o 'bold'. Normal ang default na halaga. Ang halagang ito ay maaari ring itakda bilang bilang. Timbang ng 400 ay kumakatawan sa normal at 700 ay para sa naka-bold. Mayroong ilang iba pang mga setting (mula sa 100 - napakagaan hanggang 900 - napaka-bold), ngunit hindi sila sinusuportahan ng lahat ng mga font. Ang lahat ng mga pagpipilian sa timbang ay ipinapakita sa Halimbawa 3.

Nagpapatuloy sa artikulong ito sa Mga Font sa CSS

katangian ng laki ng font:

Ang katangian ng laki ay maaaring itakda sa maraming paraan. Ilista natin ang mga paraang ito sa ibaba.
● Enumerated na halaga tulad ng 'medium', 'malaki'. Sa katunayan kagaya ng mga laki ng damit, ang mga halaga ay maaaring saklaw mula sa XX Maliit hanggang XX Malaki!
● Itakda na kaugnay sa elemento ng magulang nito, bilang 'mas malaki' o 'mas maliit'.
● Porsyento ng laki ng sangkap ng magulang.
● Itakda bilang 'pagmamana' upang direktang gamitin ang laki ng sangkap ng magulang.
● Bilang ganap na halaga sa mga yunit ng px (pixel), pt (puntos) o cm (sentimeter)
Ang 'Medium' ay ang itinakdang default na halaga para sa parameter na ito.

Nagpapatuloy sa artikulong ito sa Mga Font sa CSS

magdagdag ng dalawang numero sa java

katangian ng font-pamilya:

Sa HTML, ang pamilya ng font ng CSS ay para sa pagtatakda ng pangalan ng font. Maaari kang maglagay lamang ng isang solong pangalan ng font na may tag. O maaari kang magtalaga ng maraming halaga bilang isang listahan ng font-pamilya na tumutukoy sa priyoridad kung saan dapat piliin ng browser ang font.
Ang listahan ay inuuna mula kaliwa hanggang kanan, sa anyo ng isang fall-back system. Ang unang halaga kung magagamit ay napili, o ang kontrol ay pupunta sa susunod, hanggang sa maabot ang pagtatapos ng listahan. Ang pamilya ng default na font ay tinukoy ng mga kagustuhan ng browser.
Ang mga pamilyang CSS font ay may 2 uri - mga generic na pamilya at pamilya ng font.
● Mga generic na pamilya - batay sa ilang mga pangkalahatang katangian, ang mga font ay pinangkat bilang 'serif', 'sans serif', 'monospace', atbp Halimbawa, ang Sans serif ay nangangahulugang mga font na walang istilo ng serif.
● Mga pangalan ng pamilya - mga font na kabilang sa mga tukoy na hierarchy ng pamilya. Ang Times, Arial, Courier ay lahat ng mga pamilya ng font at ang Times New Roman ay isang halimbawa ng font ng pamilyang Times.
Ang iba't ibang mga pagpipilian sa paggamit ng pamilya ng font ay nakalista sa Halimbawa 4 sa ibaba.

Ang ilang mga karaniwang puntos na dapat tandaan

● Tulad ng maraming iba pang mga pag-aari ng CSS, ang ilan sa mga setting ng font ay nag-iiba sa iba't ibang mga browser. Suriin ang suporta sa browser bago gamitin ang ilang mga bihirang mga setting ng font.
● Maaari mong itakda ang mga setting ng font nang hiwalay gamit ang mga indibidwal na mga tag ng font-style, font-weight, atbp. Bilang kahalili kung mas gusto mo ang compact code, maaari mong gamitin ang katangiang shorthand font kasama ang lahat ng mga halaga sa parehong linya.
● Sa mga sitwasyon ng gumagamit kung saan nais mong mag-iba ang font sa laki depende sa laki ng browser, mayroong isang kapaki-pakinabang na setting ng laki ng font na tinatawag na tumutugong setting ng font. Maaari itong itakda sa isang unit ng vw, na nangangahulugang 'lapad ng viewport'. Sa ganoong paraan ang laki ng teksto ay susundan sa laki ng window ng browser.

Inaasahan kong natagpuan mo ang impormasyong hinahanap mo sa Mga Font Sa CSS. Ibahagi ang iyong karanasan sa amin sa seksyon ng mga komento sa ibaba. Maligayang pagdidisenyo!

Kung interesado kang matuto nang higit pa tungkol sa pag-unlad sa web, tingnan ang ni Edureka. Tutulungan ka ng Pagsasanay sa Pagpapatunay sa Pag-unlad ng Web na Alamin kung paano lumikha ng mga kahanga-hangang website gamit ang HTML5, CSS3, Twitter Bootstrap 3, jQuery at Google API at i-deploy ito sa Amazon Simple Storage Service (S3).