Pennu Cyfres o Deuluoedd Ffont gyda CSS Font-Family Property

Cystrawen yr Eiddo Teulu Ffont

Mae dyluniad tygraffeg yn ddarn hollbwysig o ddylunio gwefan lwyddiannus. Mae creu gwefannau sy'n hawdd i'w darllen ac sy'n edrych yn wych yw nodau pob gweithiwr dylunio gwe. I gyflawni hyn, bydd angen i chi allu gosod y ffontiau penodol yr hoffech eu defnyddio ar eich tudalennau gwe. Er mwyn pennu'r teulu teipen neu ffont ar eich dogfennau Gwe, byddwch yn defnyddio'r eiddo arddull ffont-deulu yn eich CSS.

Byddai'r arddull ffont-deulu symlaf y gallech ei ddefnyddio yn cynnwys dim ond un teulu ffont:

p {font-family: Arial; }

Os gwnaethoch chi ddefnyddio'r dudalen hon i dudalen, byddai'r holl baragraffau yn cael eu harddangos yn y teulu ffont "Arial". Mae hyn yn wych ac oherwydd "Arial" yw'r hyn a elwir yn "ffont we-ddiogel", sy'n golygu y byddai'r cyfrifiadur (os nad pawb) yn ei osod, gallwch chi orffwys yn eithaf hawdd gan wybod y bydd eich tudalen yn cael ei arddangos yn y ffont arfaethedig .

Felly beth sy'n digwydd os na ellir dod o hyd i'r ffont rydych chi'n ei ddewis? Er enghraifft, os na fyddwch chi'n defnyddio "ffont ddiogel ar y we" ar dudalen, beth mae'r asiant defnyddiwr yn ei wneud os nad oes ganddynt y ffont hwnnw? Maen nhw'n gwneud eiliad.

Gall hyn arwain at rai tudalennau diddorol iawn. Unwaith i mi fynd i dudalen lle roedd fy nghyfrifiadur yn ei ddangos yn gyfan gwbl yn "Wingdings" (set eicon) gan nad oedd gan fy nghyfrifiadur y ffont a ddatblygodd y datblygwr, a gwnaeth fy borwr ddewis gwael iawn ym mha ffont y byddai'n ei wneud defnyddiwch fel un newydd. Roedd y dudalen yn hollol annerbyniol i mi! Dyma lle mae stack ffont yn dod i mewn.

Teuluoedd Ffont Lluosog ar wahân gyda Choma mewn Stack Ffont

Mae "stack font" yn rhestr o ffontiau yr ydych am i'ch tudalen eu defnyddio. Byddech yn rhoi eich dewisiadau ffont yn nhrefn eich dewis chi ac yn gwahanu pob un â choma. Os nad oes gan y porwr y teulu ffont cyntaf ar y rhestr, bydd yn ceisio'r ail ac yna'r trydydd ac yn y blaen hyd nes iddo ddod o hyd i un sydd ganddi ar y system.

ffont-deulu: Pussycat, Algerian, Broadway;

Yn yr enghraifft uchod, bydd y porwr yn chwilio am y ffont "Pussycat" yn gyntaf, yna "Algerian" yna "Broadway" os na ddarganfuwyd unrhyw un o'r ffontiau eraill. Mae hyn yn rhoi mwy o gyfle ichi y bydd o leiaf un o'r ffontiau a ddewisir gennych yn cael ei ddefnyddio. Nid yw'n berffaith, a dyna pam yr ydym eto'n fwy y gallwn ei ychwanegu at ein stack ffont (darllenwch ymlaen!).

Defnyddio Ffontiau Generig Ddiwethaf

Felly, gallwch greu stack ffont gyda rhestr o ffontiau ac nid oes ganddo'r un y gall y porwr ei ddarganfod. Yn amlwg, nid ydych am i'ch tudalen ddangos nad yw'n ddarllenadwy os yw'r porwr yn gwneud dewis amnewid gwael. Yn ffodus, mae gan CSS ateb ar gyfer hyn hefyd: ffontiau generig .

Dylech bob amser orffen eich rhestr ffont (hyd yn oed os yw'n rhestr o un teulu neu dim ond ffontiau diogel ar y we) gyda ffont generig. Mae yna bump y gallwch eu defnyddio:

Gallai'r ddau enghraifft uchod gael eu newid i:

ffont-deulu: Arial, sans-serif; ffont-deulu: Pussycat, Algerian, Broadway, ffantasi;

Mae rhai enwau teuluoedd yn ddau neu fwy o eiriau

Os yw'r teulu ffont yr ydych am ei ddefnyddio yn fwy nag un gair, yna dylech ei amgylchynu â dyfynbrisiau dwbl. Er bod rhai porwyr yn gallu darllen teuluoedd ffont heb y dyfynodau, efallai y bydd yna broblemau os yw'r gofod gwag yn cael ei gywasgu neu ei anwybyddu.

ffont-deulu: "Times New Roman", serif;

Yn yr enghraifft hon, gallwch weld bod yr enw ffont "Times New Roman", sy'n aml-air, wedi'i amgáu mewn dyfynbrisiau. Mae hyn yn dweud wrth y porwr bod y tri o'r geiriau hyn yn rhan o'r enw ffont hwnnw, yn hytrach na thri ffont gwahanol, gydag enwau un gair.

Erthygl wreiddiol gan Jennifer Krynin. Golygwyd ar 12/2/16 gan Jeremy Girard