Defnyddio Ems i newid maint y ffont
Pan fyddwch chi'n adeiladu tudalen We, mae'r rhan fwyaf o weithwyr proffesiynol yn argymell eich bod yn cael ffontiau maint (ac mewn gwirionedd, popeth) gyda mesur cymharol fel ems, exs, canrannau, neu bicseli. Y rheswm am hyn yw nad ydych yn gwybod yr holl ffyrdd gwahanol y gallai rhywun eu gweld ar eich cynnwys. Ac os ydych chi'n defnyddio mesur absoliwt (modfedd, centimetr, milimetr, pwyntiau, neu picas) gallai effeithio ar arddangos neu ddarllenadwyedd y dudalen mewn gwahanol ddyfeisiadau.
Ac mae'r W3C yn argymell eich bod chi'n defnyddio ems ar gyfer meintiau.
Ond Pa mor fawr yw Em?
Yn ôl y W3C e:
"yn gyfartal â gwerth cyfrifo eiddo 'font-size' yr elfen y'i defnyddir arno. Yr eithriad yw pan fydd 'em' yn digwydd yng ngwerth yr eiddo 'font-size' ei hun, ac os felly mae'n cyfeirio i faint ffont yr elfen rhiant. "
Mewn geiriau eraill, nid oes gan ems faint absoliwt. Maent yn manteisio ar eu gwerthoedd maint yn seiliedig ar ble maent. Ar gyfer y rhan fwyaf o ddylunwyr Gwe , mae hyn yn golygu eu bod mewn porwr gwe, felly mae ffont sydd 1em yn uwch yr un maint â'r maint ffont diofyn ar gyfer y porwr hwnnw.
Ond pa mor uchel yw'r maint diofyn? Nid oes ffordd o fod yn 100% yn sicr, gan y gall cwsmeriaid newid eu maint ffont diofyn yn eu porwyr, ond gan nad yw'r rhan fwyaf o bobl yn gallu tybio bod gan y rhan fwyaf o borwyr maint ffont diofyn o 16px. Felly mae'r rhan fwyaf o'r amser 1em = 16px .
Meddyliwch mewn Pixeli, Defnyddiwch Ems ar gyfer y Mesur
Ar ôl i chi wybod mai'r maint ffont diofyn yw 16px, yna gallwch ddefnyddio ems i ganiatáu i'ch cleientiaid newid maint y dudalen yn hawdd, ond meddyliwch mewn picseli ar gyfer eich maint ffont.
Dywedwch fod gennych strwythur sizing rhywbeth fel hyn:
- Pennawd 1 - 20px
- Pennawd 2 - 18px
- Pennawd 3 - 16px
- Prif destun - 14px
- Is-destun - 12px
- Troednodiadau - 10px
Gallech eu diffinio fel hynny gan ddefnyddio picseli ar gyfer y mesuriad, ond yna ni fyddai unrhyw un sy'n defnyddio IE 6 a 7 yn gallu newid maint eich tudalen yn dda. Felly dylech drosi'r maint i ems ac nid mater o ryw fath yw hwn yn unig:
- Pennawd 1 - 1.25em (16 x 1.25 = 20)
- Pennawd 2 - 1.125em (16 × 1.125 = 18)
- Pennawd 3 - 1em (1em = 16px)
- Prif destun - 0.875em (16 x 0.875 = 14)
- Is-destun - 0.75em (16 x 0.75 = 12)
- Troednodiadau - 0.625em (16 x 0.625 = 10)
Peidiwch ag Anghofio Etifeddiaeth!
Ond nid dyna'r cyfan yw ems. Y peth arall y mae angen i chi ei gofio yw eu bod yn cymryd maint y rhiant. Felly, os oes gennych elfennau nythu gyda gwahanol faint o ffont, gallech ddod i ben gyda ffont llawer llai neu fwy na'r disgwyl.
Er enghraifft, efallai y bydd gennych ddalen arddull fel hyn:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Byddai hyn yn arwain at ffontiau 14px a 10px ar gyfer y prif destun a'r troednodiadau yn y drefn honno. Ond os ydych chi'n rhoi troednodyn y tu mewn i baragraff, gallech ddod i ben gyda thestun sy'n 8.75px yn hytrach na 10px. Rhowch gynnig arno'ch hun, rhowch hyn i'r CSS uchod a'r HTML canlynol i mewn i ddogfen:
Mae'r ffont hwn yn 14px neu 0.875 ems o uchder.
Mae gan y paragraff hwn troednodyn ynddo.
Er mai dim ond troednodyn paragraff hwn yw hwn.
Mae'r testun troednodyn yn anodd ei ddarllen ar 10px, mae bron yn annarllenadwy am 8.75px.
Felly, pan fyddwch chi'n defnyddio ems, mae angen i chi fod yn ymwybodol iawn o feintiau'r rhiant gwrthrychau, neu bydd rhai elfennau gwirioneddol sylweddol ar eich tudalen yn dod i ben.