Kā vislabāk izmantot fontus CSS?

Šis raksts jūs iepazīstinās ar vienkāršu, tomēr svarīgu tēmu, kas ir Fonti un sniegs arī praktisku demonstrāciju par šo tēmu. Šajā rakstā tiks apskatīti šādi norādījumi,

• Fonti CSS
• Atribūti CSS fontā
• fonta stila atribūts
• font-weight atribūts
• font-size atribūts
• font-family atribūts

Tīmekļa vietnes satur saturu attēlu, audio, video un teksta veidā. Tomēr lielākā daļa tīmekļa lapu joprojām paļaujas uz tekstu kā dominējošo formātu. Tas ir tāpēc, ka vienkāršs teksts piedāvā dažas ļoti būtiskas priekšrocības.

Neuzbāzīga lasāmība - jūs vēlaties pārbaudīt jaunāko spēles rezultātu, atrodoties birojā. Acīmredzot vēlaties ātru teksta atjauninājumu, nevis skaļu video!
Zema tīkla joslas platuma prasība - teksta saturu var ielādēt pat sliktos interneta savienojuma apgabalos, savukārt bagātinātā multivide nevar.
Draudzīga meklēšana - tīmekļa vietnes vienmēr seko līdzi tam, cik viegli to saturs tiek pamanīts meklētājprogrammās. Teksts tam ir vispiemērotākais vismaz līdz brīdim, kad AI pilnībā pārņem internetu!

Formatējot teksta saturu, tīmekļa dizaineriem ir tikai daži parametri, ar kuriem strādāt - fonts, izlīdzināšana, izcelšana un krāsa. Pareiza teksta fonta izvēle ir kritiska izvēle. Standarta prakse ir izmantot CSS fontu tagus, lai definētu fontus tekstam HTML lapās.
Ja esat jauns HTML programmēšanas pasaulē, iegūstiet pamata starta ceļojumu šeit. Pirms sākat apgūt CSS fontus, ieteicams iepazīties ar CSS pamatiem.

Lai iegūtu visaptverošu CSS apmācību, apmeklējiet Edureka CSS apmācību iesācējiem. Jūs iegūsiet lielisku uzmanību, kā CSS jāizmanto HTML tīmekļa dizaina uzlabošanai.

Turpinot šo rakstu par CSS fontiem

Fonti CSS

Fonts būtībā ir īpašību kopums, kas saistīts ar teksta attēlošanu. Fonti tiek atšķirti viens no otra pēc to lieluma, ievilkuma, platuma, slīpuma un tā tālāk. Sāksim ar pamata teksta attēlošanu dažādos fontos.

1. piemērs: virsraksti un rindkopas dažādos fontos

pamatteksts {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Rindkopa kursīvā, treknrakstā, Džordžijas štatā
 

 1. piemērs: izeja 

1. piemērā mums ir 3 dažādas teksta rindas dažādos fontos. Jūs ievērosiet, ka katrs no fontiem atšķiras pēc rakstzīmju platuma, ievilkumiem utt.

Turpinot šo rakstu par CSS fontiem

Atribūti CSS fontā

CSS fontiem ir 4 galvenie atribūti - stils, svars, izmērs un ģimene. Stila atribūts apzīmē normālu vai kursīvu. Svars parāda fontu kā vienkāršu vai treknu. Svaru var izteikt arī skaitliski. Lielums ir vienkārši fonta izmērs, jo lielāks ir izmērs, jo lielāks ir teksta izskats. Ir vairāki veidi, kā var piešķirt fonta lielumu, detalizēti apraksti ir sniegti nākamajās sadaļās. Ģimenes atribūts ir piešķirt tekstam fonta nosaukumu.

ar datiem pamatota pārbaude selēnā

1. piemērā virsrakstiem un rindkopām esam izmantojuši dažādus fontu nosaukumus. Zem tagiem h1 un p mēs redzam divus fontu nosaukumus, bet tagi h2 nosauc tikai vienu fontu. Šī ir fontu saimes definīcija, vairāk par to vēlāk.

Turpinot šo rakstu par CSS fontiem

fonta stila atribūts:

Divus galvenos stilus var iestatīt: “normāls” un “kursīvs”. Ir paredzēts, ka kursīvam pēc būtības ir kursīvs raksturs. Normal ir noklusējuma opcija, kas ir taisna. Ir vēl viena mazāk izmantota opcija, ko sauc par “slīpi”, kas lielākajā daļā fontu atgādina kursīvu. Varat arī iestatīt stilu ‘mantot’, lai tas ņemtu fonta stilu no vecākā elementa.

Turpinot šo rakstu par CSS fontiem

font-weight atribūts:

Šis atribūts izlemj, vai fontam jābūt biezam vai plānam. To var iestatīt uz “normālu” vai “treknu”. Noklusējuma vērtība ir normāla. Šo vērtību var iestatīt arī kā skaitlisku. Svars 400 ir normāls, bet 700 - treknrakstā. Ir daži citi iestatījumi (sākot no 100 - ļoti viegls līdz 900 - ļoti trekns), taču tos neatbalsta visi fonti. Visas svara opcijas ir parādītas 3. piemērā.

Turpinot šo rakstu par CSS fontiem

font-size atribūts:

Atribūtu size var iestatīt vairākos veidos. Tālāk uzskaitīsim šos veidus.
● Uzskaitītā vērtība, piemēram, “vidēja”, “liela”. Faktiski tāpat kā apģērba izmēri, vērtības var svārstīties no XX Small līdz XX Large!
● Iestatiet attiecībā pret vecākelementu kā “lielāks” vai “mazāks”.
● Vecāka elementa lieluma procentuālā daļa.
● Iestatiet kā “mantot”, lai tieši pieņemtu vecākelementa lielumu.
● kā absolūto vērtību px (pikseļi), pt (punkti) vai cm (centimetrs) vienībās
‘Vidējs’ ir šī parametra noklusējuma vērtība.

Turpinot šo rakstu par CSS fontiem

font-family atribūts:

HTML formātā CSS fontu saime ir paredzēta fonta nosaukuma iestatīšanai. Varat vai nu vienkārši ievietot vienu fonta nosaukumu ar tagu. Vai arī varat piešķirt vairākas vērtības kā fontu saimes sarakstu, kas nosaka prioritāti, kādā pārlūkprogrammai jāizvēlas fonts.
Sarakstam ir prioritāte no kreisās uz labo, rezerves sistēmas veidā. Tiek izvēlēta pirmā vērtība, ja pieejama, vai vadīkla pāriet uz nākamo, līdz tiek sasniegts saraksta beigu punkts. Noklusēto fontu saimi nosaka pārlūkprogrammas preferences.
CSS fontu saimes ir divu veidu - sugas un fontu saimes.
● Vispārīgas ģimenes - pamatojoties uz dažiem vispārīgiem raksturlielumiem, fonti tiek grupēti kā “serif”, “sans serif”, “monospace” utt. Piemēram, Sans serif nozīmē fontus bez serif stila.
● Ģimenes vārdi - fonti, kas pieder konkrētām ģimenes hierarhijām. Times, Arial, Courier ir visas fontu saimes, un Times New Roman ir Times ģimenes fontu paraugs.
Dažādas fontu saimes izmantošanas iespējas ir norādītas 4. piemērā.

Daži kopīgi punkti, kas jāņem vērā

● Tāpat kā vairāki citi CSS rekvizīti, daži fontu iestatījumi dažādās pārlūkprogrammās atšķiras. Pirms dažu retu fontu iestatījumu izmantošanas pārbaudiet pārlūkprogrammas atbalstu.
● Fonta iestatījumus var iestatīt atsevišķi, izmantojot atsevišķus fonta stila, fonta svara utt. Tagus. Ja vēlaties kompaktu kodu, varat izmantot stenogrammas stenogrammu ar visām vērtībām vienā rindā.
● Lietotāju scenārijos, kad vēlaties, lai fonta lielums mainītos atkarībā no pārlūkprogrammas lieluma, ir noderīgs fonta lieluma iestatījums, ko sauc par adaptīvā fonta iestatījumu. To var iestatīt ar vw vienību, kas nozīmē “skata platums”. Tādā veidā teksta lielums sekos pārlūkprogrammas loga lielumam.

Ceru, ka atradāt meklēto informāciju CSS fontos. Dalieties pieredzē ar mums tālāk komentāru sadaļā. Priecīgu dizainu!

Ja vēlaties uzzināt vairāk par tīmekļa izstrādi, skatiet vietni autore Edureka. Tīmekļa attīstības sertifikācijas apmācība palīdzēs jums uzzināt, kā izveidot iespaidīgas vietnes, izmantojot HTML5, CSS3, Twitter Bootstrap 3, jQuery un Google API, un izvietot to Amazon Simple Storage Service (S3).