ഫോണ്ട് വലുപ്പങ്ങൾ മാറ്റാൻ ഇഎംഎസ് ഉപയോഗിക്കുന്നു
നിങ്ങൾ ഒരു വെബ് പേജ് നിർമ്മിക്കുമ്പോൾ, മിക്ക പ്രൊഫഷണലുകളും നിങ്ങൾ എമസ്സ്, എക്സ്സുകൾ, ശതമാനക്കണക്കുകൾ അല്ലെങ്കിൽ പിക്സലുകൾ പോലെയുള്ള ആപേക്ഷിക അളവുകോലുകളുള്ള വലുപ്പം ഫോണ്ടുകൾ (എല്ലാം യഥാർത്ഥത്തിൽ എല്ലാം) നിർദ്ദേശിക്കുന്നു. നിങ്ങളുടെ ഉള്ളടക്കം ആരെങ്കിലും കണ്ടേക്കാവുന്ന എല്ലാ വ്യത്യസ്ത രീതികളെയും നിങ്ങൾക്ക് യഥാർത്ഥത്തിൽ അറിയില്ല എന്നതിനാലാണിത്. നിങ്ങൾ ഒരു പൂർണ്ണമായ അളവ് (ഇഞ്ച്, സെന്റിമീറ്റർ, മില്ലിമീറ്ററുകൾ, പോയിന്റുകൾ അല്ലെങ്കിൽ പിക്ക്കസ്) ഉപയോഗിക്കുന്നുവെങ്കിൽ, വ്യത്യസ്ത ഉപകരണങ്ങളിൽ പേജിന്റെ ഡിസ്പ്ലേ അല്ലെങ്കിൽ റീഡബിളിറ്റി അത് ബാധിച്ചേക്കാം.
വലിപ്പത്തിന് ems ഉപയോഗിക്കുമെന്ന് W3C നിർദ്ദേശിക്കുന്നു.
എന്നാൽ എ എം എല് എത്ര വലുതാണ്?
W3C പ്രകാരം ഒരു em:
"ഫോണ്ട്-സൈസ് സ്വത്തിന്റെ മൂല്യത്തിൽ 'em' ഉണ്ടാകുമ്പോൾ അപരമൂർത്തിയെ സൂചിപ്പിക്കുന്ന മൂലകത്തിന്റെ ഫോണ്ട്-സൈസ് ആസ്തിയുടെ കണക്കു കൂട്ടലാണ് ഇത്. പാരന്റ് ഘടകത്തിന്റെ ഫോണ്ട് സൈസ് വരെ. "
മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ems എന്നത് ഒരു പരിപൂർണ വലുപ്പമില്ല. അവർ എവിടെയായിരുന്നാലും അവരുടെ വലിപ്പത്തിലുള്ള മൂല്യങ്ങൾ അവർ എടുക്കുന്നു. മിക്ക വെബ് ഡിസൈനർമാർക്കും , അവർ ഒരു വെബ് ബ്രൌസറിലാണെന്നാണ് അർത്ഥമാക്കുന്നത്, അതിനാൽ 1em ഉയരമുള്ള ഫോണ്ട് ആ ബ്രൌസറിൻറെ സ്ഥിരസ്ഥിതി ഫോണ്ട് വലുപ്പത്തിൽ കൃത്യമായ വലുപ്പമാണ്.
എന്നാൽ സ്ഥിര വലുപ്പത്തെ എങ്ങനെയാണ് ഉയരുന്നത്? ഉപഭോക്താക്കൾക്ക് അവരുടെ സ്ഥിരസ്ഥിതി ഫോണ്ട് സൈറ്റിനെ അവരുടെ ബ്രൌസറുകളിൽ മാറ്റാൻ കഴിയുമെന്ന് 100% ഉറപ്പുനൽകാൻ കഴിയില്ല, എന്നാൽ മിക്ക ബ്രസീലുകളിലും 16px ന്റെ ഒരു സ്ഥിര ഫോണ്ട് സൈസ് ഉണ്ടെന്ന് നിങ്ങൾക്ക് തോന്നുന്നില്ല. അതിനാൽ മിക്കപ്പോഴും 1em = 16px .
പിക്സലിൽ ചിന്തിക്കുക, അളവിലെ എമുകൾ ഉപയോഗിക്കുക
സ്വതവേയുള്ള ഫോണ്ട് സൈസ് 16px ആണെന്ന് നിങ്ങൾക്ക് അറിയാമെങ്കിൽ, നിങ്ങളുടെ ക്ലയന്റുകൾ എളുപ്പത്തിൽ പേജ് വലുപ്പം മാറ്റാൻ അനുവദിക്കുന്നതിനായി എഎംഎസ് ഉപയോഗിക്കാം, എന്നാൽ നിങ്ങളുടെ ഫോണ്ട് വലുപ്പങ്ങളിൽ പിക്സലുകളിൽ ചിന്തിക്കുക.
നിങ്ങൾക്ക് ഇതുപോലൊരു വലിപ്പമുള്ള ഘടന ഉണ്ടെന്ന് പറയുക:
- തലക്കെട്ട് 1 - 20px
- തലക്കെട്ട് 2 - 18px
- തലക്കെട്ട് 3 - 16px
- പ്രധാന വാചകം - 14px
- ഉപ വാചകം - 12px
- അടിക്കുറിപ്പുകൾ - 10px
അളവെടുക്കുന്നതിന് പിക്സലുകളുണ്ടെന്ന് അത്തരത്തിലുള്ള രീതിയിൽ നിങ്ങൾക്ക് അവയെ നിർവചിക്കാവുന്നതാണ്, പക്ഷേ പിന്നീട് IE 6 ഉം 7 ഉം ഉപയോഗിക്കുന്ന ആർക്കും നിങ്ങളുടെ പേജ് വലുപ്പം മാറ്റാൻ കഴിയില്ല. അതിനാൽ നിങ്ങൾ വലുപ്പത്തെ എമിലേക്ക് പരിവർത്തനം ചെയ്യണം, ഇത് ചില ഗണിത കാര്യങ്ങൾ മാത്രമാണ്:
- തലക്കെട്ട് 1 - 1.25 എ (16 x 1.25 = 20)
- തലക്കെട്ട് 2 - 1.125 എ (16 × 1,125 = 18)
- തലക്കെട്ട് 3 - 1 മിനിറ്റ് (1 എന്ന് = 16px)
- പ്രധാന വാചകം - 0.875em (16 x 0.875 = 14)
- ഉപ വാചകം - 0.75em (16 x 0.75 = 12)
- അടിക്കുറിപ്പുകൾ - 0.625 (16 x 0.625 = 10)
പാരമ്പര്യം മറക്കാതിരിക്കുക!
എന്നാൽ എല്ലാം എമ്മിന്റെ ഇണയല്ല. നിങ്ങൾ ഓർമ്മിക്കേണ്ട കാര്യം മറ്റൊരു കാര്യം അവർ മാതാപിതാക്കളുടെ വലുപ്പത്തിൽ എടുക്കുക എന്നതാണ്. നിങ്ങൾക്ക് വിവിധ ഫോണ്ട് വലിപ്പങ്ങളുള്ള നെസ്റ്റഡ് ഘടകങ്ങൾ ഉണ്ടെങ്കിൽ, നിങ്ങൾക്ക് പ്രതീക്ഷിച്ചതിലും വളരെ ചെറുതോ വലുതോ ആയ ഒരു ഫോണ്ട് ഉപയോഗിച്ച് നിങ്ങൾക്ക് അവസാനിക്കാൻ കഴിയും.
ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഇതുപോലെ ഒരു ശൈലി ഷീ ഉണ്ടായിരിക്കാം:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
പ്രധാന അക്ഷരത്തിനും അടിക്കുറിപ്പുകൾക്കുമായി 14px ഉം 10px ഉം ആയ ഫോണ്ടുകൾ ഇതിന് കാരണമാകും. എന്നാൽ നിങ്ങൾ ഒരു ഖണ്ഡികയിൽ ഒരു അടിക്കുറിപ്പ് കൊടുത്താൽ, 10px ൽ അല്ലാതെ 8.75px ആയ ടെക്സ്റ്റുമായി അവസാനിക്കും. ഇത് സ്വയം ശ്രമിക്കുക, ഇത് മുകളിലുള്ള CSS- ഉം ഇനിപ്പറയുന്ന HTML- ലും ഒരു പ്രമാണത്തിൽ ഇടുക:
ഈ ഫോണ്ട് 14px അല്ലെങ്കിൽ 0.875 എംബാം ഉയരം.
ഈ ഖണ്ഡികയിൽ ഒരു അടിക്കുറിപ്പ് ഉണ്ട്.
ഇത് ഒരു അടിക്കുറിപ്പ് ഖണ്ഡിക മാത്രമാണ്.
ഫുട്ട്നോട്ട് ടെക്സ്റ്റ് 10px ൽ വായിക്കാൻ ബുദ്ധിമുട്ടാണ്, ഇത് 8.75px- ൽ ഏതാണ്ട് അപ്രധാനമാണ്.
അതിനാൽ, നിങ്ങൾ എംസ് ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾ മാതാപിതാക്കളുടെ വസ്തുക്കളുടെ വലുപ്പത്തെക്കുറിച്ച് വളരെ ബോധവാനായിരിക്കണം, അല്ലെങ്കിൽ നിങ്ങളുടെ പേജിൽ ചില വിചിത്രമായ വലിപ്പത്തിലുള്ള ഘടകങ്ങൾ നിങ്ങൾക്കൊപ്പം അവസാനിക്കും.