html-ൽ, ഫോണ്ട് വലുപ്പം ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു. സൈറ്റ് പേജിൽ പോസ്റ്റുചെയ്തിരിക്കുന്ന പ്രധാന വിവരങ്ങളിലേക്ക് ഉപയോക്താവിൻ്റെ ശ്രദ്ധ ആകർഷിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. അക്ഷരങ്ങളുടെ വലുപ്പം മാത്രമല്ല, അവയുടെ നിറവും കനവും കുടുംബവും പോലും പ്രധാനമാണ്.
html ഫോണ്ടുകളിൽ പ്രവർത്തിക്കുമ്പോൾ ടാഗുകളും ആട്രിബ്യൂട്ടുകളും
ഹൈപ്പർടെക്‌സ്‌റ്റ് ഭാഷയ്‌ക്ക് ഫോണ്ടുകൾക്കൊപ്പം പ്രവർത്തിക്കാനുള്ള വിപുലമായ ടൂളുകൾ ഉണ്ട്. എല്ലാത്തിനുമുപരി, html-ൻ്റെ പ്രധാന ചുമതല ടെക്സ്റ്റ് ഫോർമാറ്റിംഗ് ആണ്.
ബ്രൗസറുകളിൽ ടെക്സ്റ്റ് ഫോർമാറ്റിംഗ് നിയമങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിലെ പ്രശ്നമാണ് HTML ഭാഷ സൃഷ്ടിക്കുന്നതിനുള്ള കാരണം.
HTML ലെ ഫോണ്ടുകൾക്കൊപ്പം പ്രവർത്തിക്കാൻ ഉപയോഗിക്കുന്ന ടാഗുകളും അവയുടെ ആട്രിബ്യൂട്ടുകളും നോക്കാം. പ്രധാനം ടാഗ് ആണ് . അതിൻ്റെ ആട്രിബ്യൂട്ടുകളുടെ മൂല്യങ്ങൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഫോണ്ടിൻ്റെ നിരവധി സവിശേഷതകൾ സജ്ജമാക്കാൻ കഴിയും:
- നിറം - ടെക്സ്റ്റ് നിറം സജ്ജമാക്കുന്നു;
- വലുപ്പം - പരമ്പരാഗത യൂണിറ്റുകളിലെ ഫോണ്ട് വലുപ്പം.
1 മുതൽ 7 വരെയുള്ള പോസിറ്റീവ് ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ പിന്തുണയ്ക്കുന്നു.
- മുഖം - ടാഗിനുള്ളിൽ ഉപയോഗിക്കുന്ന ടെക്സ്റ്റ് ഫോണ്ട് ഫാമിലി സജ്ജീകരിക്കാൻ ഉപയോഗിക്കുന്നു . നിരവധി മൂല്യങ്ങൾ പിന്തുണയ്ക്കുന്നു, കോമകളാൽ വേർതിരിച്ചിരിക്കുന്നു.
ജോടിയാക്കിയ ഫോണ്ട് ടാഗിൻ്റെ ഭാഗങ്ങൾക്കിടയിൽ സ്ഥിതിചെയ്യുന്ന വാചകം മാത്രമേ ഫോർമാറ്റ് ചെയ്തിട്ടുള്ളൂ.ബാക്കിയുള്ള വാചകം സാധാരണ ഡിഫോൾട്ട് ഫോണ്ടിൽ പ്രദർശിപ്പിക്കും.
html-ൽ ഒരു ഫോർമാറ്റിംഗ് റൂൾ മാത്രം വ്യക്തമാക്കുന്ന ജോടിയാക്കിയ നിരവധി ടാഗുകൾ ഉണ്ട്. ഇവ ഉൾപ്പെടുന്നു:
- — html-ൽ ബോൾഡ് ഫോണ്ട് സജ്ജമാക്കുന്നു. ടാഗ് ചെയ്യുക മുമ്പത്തേതിന് സമാനമായ പ്രവർത്തനരീതി;
- - വലുപ്പം സ്ഥിരസ്ഥിതിയേക്കാൾ വലുതാണ്;
- - ചെറിയ ഫോണ്ട് വലിപ്പം;
- — ഇറ്റാലിക് ടെക്സ്റ്റ് (ഇറ്റാലിക്സ്). സമാനമായ ടാഗ് ;
- - അടിവരയോടുകൂടിയ വാചകം;
- കടന്നുപോയി;- - ചെറിയ അക്ഷരത്തിൽ മാത്രം വാചകം പ്രദർശിപ്പിക്കുക;
- - വലിയ കേസിൽ.
പ്ലെയിൻ ടെക്സ്റ്റ്
ബോൾഡ് ടെക്സ്റ്റ്
ബോൾഡ് ടെക്സ്റ്റ്
പതിവിലും കൂടുതൽ
സാധാരണയിലും കുറവ്
ഇറ്റാലിക്സ്
ഇറ്റാലിക്സ്
അടിവരയോടുകൂടിയത്
ക്രോസ് ഔട്ട്
സ്റ്റൈൽ ആട്രിബ്യൂട്ട് കഴിവുകൾ
വിവരിച്ച ടാഗുകൾക്ക് പുറമേ, html-ൽ ഫോണ്ട് മാറ്റാൻ നിരവധി മാർഗങ്ങളുണ്ട്. അവയിലൊന്ന് ജനറിക് ശൈലി ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക എന്നതാണ്. അതിൻ്റെ ഗുണങ്ങളുടെ മൂല്യങ്ങൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഫോണ്ടുകളുടെ പ്രദർശന ശൈലി സജ്ജമാക്കാൻ കഴിയും:
1) ഫോണ്ട് ഫാമിലി - പ്രോപ്പർട്ടി ഫോണ്ട് ഫാമിലിയെ സജ്ജമാക്കുന്നു. ഒന്നിലധികം മൂല്യങ്ങൾ പട്ടികപ്പെടുത്തുന്നത് സാധ്യമാണ്.
ഉപയോക്താവിൻ്റെ ഓപ്പറേറ്റിംഗ് സിസ്റ്റത്തിൽ മുമ്പത്തെ കുടുംബം ഇൻസ്റ്റാൾ ചെയ്തിട്ടില്ലെങ്കിൽ html-ലെ ഫോണ്ട് അടുത്ത മൂല്യത്തിലേക്ക് മാറ്റുന്നത് സംഭവിക്കും..
വാക്യഘടന എഴുതുന്നു:
font-family: font-name [, font-name[, ...]]
2) ഫോണ്ട് വലുപ്പം - 1 മുതൽ 7 വരെ വലുപ്പം സജ്ജീകരിച്ചിരിക്കുന്നു. നിങ്ങൾക്ക് HTML-ൽ ഫോണ്ട് വർദ്ധിപ്പിക്കാൻ കഴിയുന്ന പ്രധാന വഴികളിൽ ഒന്നാണിത്.
വാക്യഘടന എഴുതുന്നു:
ഫോണ്ട് വലുപ്പം: കേവല വലിപ്പം | ആപേക്ഷിക വലിപ്പം | അർത്ഥം | പലിശ | അനന്തരാവകാശം
നിങ്ങൾക്ക് ഫോണ്ട് വലുപ്പവും സജ്ജമാക്കാൻ കഴിയും:
- പിക്സലിൽ;
- കേവല വ്യവസ്ഥയിൽ ( xx-ചെറുത്, x-ചെറുത്, ചെറുത്, ഇടത്തരം, വലുത്);
- ശതമാനത്തിൽ;
- പോയിൻ്റുകളിൽ (pt).
ഫോണ്ട് വലുപ്പം:7
ഫോണ്ട് വലുപ്പം: 24px
ഫോണ്ട് വലുപ്പം: x-വലുത്
ഫോണ്ട് വലുപ്പം: 200%
ഫോണ്ട് വലുപ്പം:24pt
3) ഫോണ്ട് ശൈലി - ഫോണ്ട് എഴുത്ത് ശൈലി സജ്ജമാക്കുന്നു. വാക്യഘടന:
ഫോണ്ട് ശൈലി: സാധാരണ | ഇറ്റാലിക് | ചരിഞ്ഞ | അനന്തരാവകാശം
മൂല്യങ്ങൾ:
- സാധാരണ - സാധാരണ അക്ഷരവിന്യാസം;
- ഇറ്റാലിക് - ഇറ്റാലിക്;
- ചരിഞ്ഞത് - വലതുവശത്തേക്ക് ചരിഞ്ഞ ഫോണ്ട്;
- inherit - പാരൻ്റ് എലമെൻ്റിൻ്റെ അക്ഷരവിന്യാസം അവകാശമാക്കുന്നു.
ഈ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് html-ൽ ഫോണ്ട് എങ്ങനെ മാറ്റാം എന്നതിൻ്റെ ഒരു ഉദാഹരണം:
font-style:inherit
ഫോണ്ട് ശൈലി:ഇറ്റാലിക്
ഫോണ്ട് ശൈലി:സാധാരണ
ഫോണ്ട് ശൈലി:ചരിഞ്ഞ
4) ഫോണ്ട് വേരിയൻ്റ് - എല്ലാ വലിയ അക്ഷരങ്ങളും വലിയ അക്ഷരങ്ങളാക്കി മാറ്റുന്നു. വാക്യഘടന:
ഫോണ്ട് വേരിയൻ്റ്: സാധാരണ | ചെറിയ തൊപ്പികൾ | അനന്തരാവകാശം
ഈ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് html-ൽ ഫോണ്ട് എങ്ങനെ മാറ്റാം എന്നതിൻ്റെ ഒരു ഉദാഹരണം:
font-variant:inherit
ഫോണ്ട് വേരിയൻ്റ്:സാധാരണ
font-variant:small-caps
5) ഫോണ്ട്-വെയ്റ്റ് - ടെക്സ്റ്റിൻ്റെ കനം (സാച്ചുറേഷൻ) സജ്ജമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. വാക്യഘടന:
ഫോണ്ട്-ഭാരം: ബോൾഡർ|ബോൾഡർ|ലൈറ്റർ|സാധാരണ|100|200|300|400|500|600|700|800|900
മൂല്യങ്ങൾ:
- ബോൾഡ് - html ഫോണ്ട് ബോൾഡായി സജ്ജമാക്കുന്നു;
- ബോൾഡർ - സാധാരണയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ബോൾഡർ;
- ഭാരം കുറഞ്ഞ - സാധാരണയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ കുറവ് പൂരിതമാണ്;
- സാധാരണ - സാധാരണ അക്ഷരവിന്യാസം;
- 100-900 - ഫോണ്ട് കനം സംഖ്യാ തത്തുല്യമായി സജ്ജമാക്കുന്നു.
ഫോണ്ട്-വെയ്റ്റ്:ബോൾഡ്
font-weight:bolder
ഫോണ്ട്-വെയ്റ്റ്: ഭാരം കുറഞ്ഞ
ഫോണ്ട്-ഭാരം:സാധാരണ
ഫോണ്ട് ഭാരം:900
ഫോണ്ട് ഭാരം:100
html ഫോണ്ട് പ്രോപ്പർട്ടിയും ഫോണ്ട് നിറവും
മറ്റൊരു കണ്ടെയ്‌നർ പ്രോപ്പർട്ടിയാണ് ഫോണ്ട്. അതിനുള്ളിൽ, ഫോണ്ടുകൾ മാറ്റാൻ ഉദ്ദേശിച്ചിട്ടുള്ള നിരവധി പ്രോപ്പർട്ടികളുടെ മൂല്യങ്ങൾ ഇത് സംയോജിപ്പിച്ചു. ഫോണ്ട് വാക്യഘടന:
font: font-size font-family | അനന്തരാവകാശം
വിവിധ നിയന്ത്രണങ്ങളിലെ ലേബലുകളിൽ സിസ്റ്റം ഉപയോഗിക്കുന്ന ഫോണ്ടുകളിലേക്കും മൂല്യം സജ്ജമാക്കാൻ കഴിയും:
- അടിക്കുറിപ്പ് - ബട്ടണുകൾക്കായി;
- ഐക്കൺ - ഐക്കണുകൾക്കായി;
- മെനു - മെനു;
- സന്ദേശ-ബോക്സ് - ഡയലോഗ് ബോക്സുകൾക്കായി;
- ചെറിയ-അടിക്കുറിപ്പ് - ചെറിയ നിയന്ത്രണങ്ങൾക്കായി;
- സ്റ്റാറ്റസ്-ബാർ - സ്റ്റാറ്റസ് ബാർ ഫോണ്ട്.
ഫോണ്ട്:ഐക്കൺ
ഫോണ്ട്:അടിക്കുറിപ്പ്
ഫോണ്ട്:മെനു
font:message-box
ചെറിയ അടിക്കുറിപ്പ്
font:status-bar
ഫോണ്ട്:ഇറ്റാലിക് 50px ബോൾഡ് "ടൈംസ് ന്യൂ റോമൻ", ടൈംസ്, സെരിഫ്
ഫോണ്ട് മാറ്റാൻ ഒരു ടാഗ് ഉപയോഗിക്കുക FACE ആട്രിബ്യൂട്ടിനൊപ്പം. നിങ്ങൾക്ക് പേര് (ഏരിയൽ, തഹോമ, വെർദാന) അല്ലെങ്കിൽ തരം (ഉദാഹരണത്തിന്, മോണോസ്പേസ്) പ്രകാരം ഫോണ്ട് വ്യക്തമാക്കാം. ഉപയോക്താവിന് ആവശ്യമായ ഫോണ്ട് ഇൻസ്റ്റാൾ ചെയ്തിട്ടില്ലെന്ന് മാറുന്ന സാഹചര്യം ഒഴിവാക്കാൻ നിരവധി ഫോണ്ട് നാമങ്ങൾ പട്ടികപ്പെടുത്തുന്നത് നല്ലതാണ്. പൊതുവായി അംഗീകരിക്കപ്പെട്ട ഫോണ്ടുകളിൽ ഒന്നെങ്കിലും ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു (ഉദാഹരണത്തിന് ഏരിയൽ). ഒരു പേജിൽ 2-3 വ്യത്യസ്ത ഫോണ്ടുകളിൽ കൂടുതൽ ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നില്ല, അല്ലാത്തപക്ഷം പേജ് വൃത്തികെട്ടതും പ്രൊഫഷണലല്ലാത്തതുമായി കാണപ്പെടും.
ഉദാഹരണം:
ഒരു html പേജിൻ്റെ ഫോണ്ട് സൈസ് മാറ്റുന്നു
ഫോണ്ട് സൈസ് മാറ്റാൻ, SIZE ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക. വലിയ ഫോണ്ട്, ടെക്സ്റ്റ് വായിക്കാൻ എളുപ്പമാകും. എന്നിരുന്നാലും, സ്ക്രീനിൽ കൂടുതൽ വിവരങ്ങൾ ഉൾക്കൊള്ളിക്കാൻ ചെറിയ ഫോണ്ട് നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു ടാഗ് ഉപയോഗിച്ച് ഈ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു
ടാഗുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഫോണ്ട് മാറ്റാം ഒപ്പം . മുൻ വാചകവുമായി ബന്ധപ്പെട്ട് നിർദ്ദിഷ്ട ശകലത്തിൻ്റെ ഫോണ്ട് വലുതാക്കുന്നു, കൂടാതെ , അതനുസരിച്ച്, കുറയ്ക്കുന്നു.
വ്യക്തിഗത അക്ഷരങ്ങളുടെ വലുപ്പം മാറ്റുന്നതിലൂടെ, നിങ്ങൾക്ക് രസകരമായ ഇഫക്റ്റുകൾ നേടാൻ കഴിയും. ഉദാഹരണത്തിന്, ഈ രീതിയിൽ നിങ്ങൾക്ക് ഒരു ഡ്രോപ്പ് ക്യാപ് ലഭിക്കും - ഒരു ഖണ്ഡികയുടെ തുടക്കത്തിൽ ഒരു വലിയ വലിയ അക്ഷരം.
ഉദാഹരണം:
ഒരു html പേജിൻ്റെ ഫോണ്ട് നിറം തിരഞ്ഞെടുക്കുന്നു
ഒരു വെബ് പേജിൻ്റെ വാചകത്തിൻ്റെ ഭാഗങ്ങൾ വ്യത്യസ്ത നിറത്തിലുള്ള ഫോണ്ടുകളിൽ പ്രദർശിപ്പിക്കുന്നത് അതിനെ കൂടുതൽ ആകർഷകമാക്കുന്നു.
ഒരു ടാഗിൻ്റെ സന്ദർഭത്തിൽ TEXT ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു
, നിങ്ങൾക്ക് ഒരു വെബ് പേജിൻ്റെ മുഴുവൻ ടെക്സ്റ്റ് വർണ്ണവും മാറ്റാൻ കഴിയും. ഒരു ടാഗ് ഉപയോഗിച്ച് COLOR ആട്രിബ്യൂട്ട് പ്രയോഗിക്കുന്നു (ഉയർന്ന മുൻഗണനയുണ്ട്) ഒരൊറ്റ വാചകത്തിൻ്റെ രൂപവുമായി സംവദിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.ടെക്സ്റ്റ് വർണ്ണം മാറ്റാൻ, നിങ്ങൾ നിറത്തിൻ്റെ പേര് അല്ലെങ്കിൽ അതിൻ്റെ ഹെക്സാഡെസിമൽ കോഡ് അറിയേണ്ടതുണ്ട്. കോഡിൽ പൗണ്ട് ചിഹ്നം # ഉം നിറത്തിൻ്റെ ചുവപ്പ്, പച്ച, നീല ഘടകങ്ങളുടെ തീവ്രതയെ പ്രതിനിധീകരിക്കുന്ന ഒരു സംഖ്യയും അടങ്ങിയിരിക്കുന്നു. 16 സ്റ്റാൻഡേർഡ് നിറങ്ങൾ മാത്രമേ പേര് ഉപയോഗിച്ച് പരാമർശിക്കാൻ കഴിയൂ.
നിറങ്ങളുടെ പേര് കോഡ് അക്വാ ##00FFFF കറുപ്പ് ##000000 നീല ##0000FF ഫ്യൂഷിയ ##FF00FF ഗ്രേ ##808080 പച്ച ##008000 നാരങ്ങ ##00FF00 മെറൂൺ ##800000 നേവി ##00000080 ഒലിവ്8000080 #FF0000 വെള്ളി ##C0C0C0 ടീൽ ##008080 വെള്ള ##FFFFFF മഞ്ഞ ##FFFF00
ഈ ട്യൂട്ടോറിയലിൽ നമ്മൾ അവസാനത്തെ ടാഗ് ആട്രിബ്യൂട്ട് നോക്കും , ഇത് വാചകത്തിൻ്റെ നിറം സജ്ജമാക്കുന്നു. സ്ഥിരസ്ഥിതിയായി, ടെക്സ്റ്റ് കറുപ്പാണ്, അത് വെളുത്ത പശ്ചാത്തലത്തിൽ പ്രദർശിപ്പിക്കും. ഇതിനായി html-ൽ ടെക്സ്റ്റ് നിറം മാറ്റുക, നിങ്ങൾ ടാഗിൻ്റെ വർണ്ണ ആട്രിബ്യൂട്ട് പ്രയോഗിക്കേണ്ടതുണ്ട് :
ഒരു നിറം സജ്ജീകരിക്കുന്നതിന്, അതിൻ്റെ പേര് വ്യക്തമാക്കുക, ഉദാഹരണത്തിന്: ചുവപ്പ്, പച്ച, നീല. ഒരു ചെറിയ ഉദാഹരണം നോക്കാം:
പച്ച വാചകം
ചുവന്ന വാചകം
പർപ്പിൾ വാചകം
ബ്രൗസറിൽ ഫലം നോക്കാം:
ആദ്യ ഖണ്ഡികയിലെ വാചകം പച്ചയും രണ്ടാമത്തെ ഖണ്ഡിക ചുവപ്പും മൂന്നാം ഖണ്ഡിക പർപ്പിൾ നിറവുമായി മാറി. മൊത്തത്തിൽ പ്രാഥമിക നിറങ്ങളുടെ 16 പേരുകളും 130 അധിക പേരുകളും ഉണ്ട്. html കളർ ടേബിളിൽ നിറങ്ങളുടെ പൂർണ്ണമായ ലിസ്റ്റ് നിങ്ങൾക്ക് കാണാം.
നിറം സൂചിപ്പിക്കുന്ന ഈ രീതി വളരെ ലളിതമാണ്, എന്നാൽ വളരെ പരിമിതമാണ്. അതിനാൽ, HTML കോഡിലെ നിറം മാറ്റുന്നതിന്, അവർ പലപ്പോഴും ഒരു ഹാഷ് ചിഹ്നത്തിന് (#) മുമ്പുള്ള ഒരു ഹെക്സാഡെസിമൽ നമ്പർ ഉപയോഗിക്കുന്നു, ഉദാഹരണത്തിന്:
ഈ പദവി ഉപയോഗിച്ച് നിങ്ങൾക്ക് 16 ദശലക്ഷത്തിലധികം നിറങ്ങളും അവയുടെ ഷേഡുകളും ലഭിക്കും! സൈറ്റിൽ ലഭ്യമായ HEX കളർ കൺവെർട്ടർ ഉപയോഗിച്ചോ ഫോട്ടോഷോപ്പിലെ വർണ്ണ പാലറ്റ് ഉപയോഗിച്ചോ നിങ്ങൾക്ക് കളർ കോഡ് ലഭിക്കും. നമുക്ക് ഒരു ഉദാഹരണം നോക്കാം, ഇനിപ്പറയുന്ന കോഡ് എഴുതാം:
പച്ച വാചകം
ചുവന്ന വാചകം
പർപ്പിൾ വാചകം
നമുക്ക് ഫയൽ സേവ് ചെയ്ത് ഫലം നോക്കാം:
നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ആദ്യ ഉദാഹരണത്തിലെ അതേ നിറങ്ങൾ ഞങ്ങൾ വാചകത്തിന് നൽകി, ഇവിടെ മാത്രമാണ് ഞങ്ങൾ ഹെക്സാഡെസിമൽ നമ്പർ സിസ്റ്റം ഉപയോഗിച്ചത്, അല്ലെങ്കിൽ മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ഞങ്ങൾ നിറം HEX ഫോർമാറ്റിൽ സജ്ജമാക്കി.
html-ൽ ടെക്സ്റ്റ് കളർ എങ്ങനെ മാറ്റാമെന്ന് നിങ്ങൾ ഇപ്പോൾ പഠിച്ചു, പാഠത്തിൻ്റെ അവസാനം എല്ലാ ടാഗ് ആട്രിബ്യൂട്ടുകളും ആവർത്തിക്കാൻ ഞാൻ നിർദ്ദേശിക്കുന്നു , കൂടാതെ വാചകത്തിലേക്ക് ഒരേസമയം നിരവധി പാരാമീറ്ററുകൾ സജ്ജമാക്കുക, അതായത്: ഫോണ്ട്, വലുപ്പം, നിറം. ഒരു ഉദാഹരണം എഴുതുക:
ടെക്സ്റ്റ് ഫോണ്ട്, വലിപ്പം, നിറം എന്നിവ സജ്ജമാക്കുക
ടെക്സ്റ്റ് ഫോണ്ട്, വലിപ്പം, നിറം എന്നിവ സജ്ജമാക്കുക
ഈ ലേഖനത്തിൻ്റെ എല്ലാ വായനക്കാർക്കും എൻ്റെ ബ്ലോഗിൻ്റെ വരിക്കാർക്കും ആശംസകൾ! ഇന്നത്തെ പ്രസിദ്ധീകരണം നിങ്ങളുടെ ഇൻ്റർനെറ്റ് ഉറവിടങ്ങൾ വായിക്കാൻ കഴിയാത്തതും ആകർഷകവുമാകാത്ത ഒരു വിഷയത്തിലേക്ക് നീക്കിവയ്ക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു: "HTML-ൽ ഒരു ഫോണ്ട് എങ്ങനെ സജ്ജീകരിക്കാം." വിഷയം തന്നെ എളുപ്പമാണ്, നിങ്ങൾ അത് വേഗത്തിൽ മാസ്റ്റർ ചെയ്യുമെന്ന് എനിക്ക് ഉറപ്പുണ്ട്.
എന്നിരുന്നാലും, നിങ്ങൾ അറിഞ്ഞിരിക്കേണ്ട എല്ലാത്തരം ഫോണ്ട് ഡിസൈൻ ടൂളുകളാലും വെബ് ഭാഷകൾ സമ്പന്നമാണെന്ന് നാം മറക്കരുത്. ലേഖനം വായിച്ചതിനുശേഷം, നിങ്ങൾ ആത്മവിശ്വാസത്തോടെ ടെക്സ്റ്റ് ഫോർമാറ്റിംഗിൽ വൈദഗ്ദ്ധ്യം നേടും, വ്യത്യസ്ത ശൈലികൾ, ഫോണ്ട് ശൈലികൾ, അലങ്കാരങ്ങൾ എന്നിവ എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് മനസിലാക്കുക, അതുപോലെ വാക്യങ്ങളുടെയും വ്യക്തിഗത അക്ഷരങ്ങളുടെയും വലുപ്പവും നിറവും മാറ്റുക. നമുക്ക് ആരംഭിക്കാം!
ഫോണ്ടുകൾ വ്യത്യസ്തമാണ്
അടയാളങ്ങളും പത്രങ്ങളും സാഹിത്യങ്ങളും വെബ്‌സൈറ്റുകളും മറ്റ് സേവനങ്ങളും സാധാരണ ഫോണ്ടുകൾ ഉപയോഗിക്കുന്നു. അവർ സുഖകരമാണെങ്കിലും, അവർ വളരെക്കാലമായി വിരസമായിത്തീർന്നിരിക്കുന്നു, കണ്ണിൽ പിടിക്കുന്നില്ല. അതുകൊണ്ടാണ് പല ഡിസൈനർമാരും ഡിസൈൻ തരം ചെറുതായി മാറ്റുകയോ പുതിയ ശൈലികൾ സൃഷ്ടിക്കുകയോ ചെയ്യുന്നത്. ഏറ്റവും പ്രശസ്തവും സ്വാധീനമുള്ളതുമായ ഫോണ്ടുകൾ ഇവയാണ്:
- ഹെൽവെറ്റിക്ക;
- ഫ്യൂച്ചറ;
- ഗാരമണ്ട്;
- ബോഡോണി;
- ബെംബോ;
- റോക്ക്വെൽ;
- ടൈംസ് ന്യൂ റോമൻ.
അവരുടെ പ്രധാന വ്യത്യാസങ്ങൾ ചില കുടുംബങ്ങളുമായുള്ള ബന്ധത്തിലാണ്. സെരിഫ് (സെരിഫ്), സാൻസ് സെരിഫ്, അലങ്കാര, ഇറ്റാലിക്, മോണോസ്പേസ് കുടുംബങ്ങളുണ്ട്.
5 ഫോണ്ട് സൈസുകൾ ഉണ്ടെന്നും ഞാൻ ഊന്നിപ്പറയാൻ ആഗ്രഹിക്കുന്നു.
നമുക്ക് html ഭാഷയും അതിൻ്റെ "സൃഷ്ടിപരമായ കഴിവുകളും" ഉപയോഗിച്ച് തുടങ്ങാം
പേര് ആദ്യംതലക്കെട്ട്
പിഒരു ചുവന്ന അക്ഷരമുള്ള ഉപശീർഷകം!
ഇവിടെ സ്ഥിതി ചെയ്യുന്നു ആദ്യംഖണ്ഡിക നിലവിലെഉദാഹരണം. വ്യക്തതയ്ക്കായി ഈ വാക്കുകൾഇറ്റാലിക്സിൽ എഴുതും.
ആട്രിബ്യൂട്ട് എന്ന് ഞാൻ നിങ്ങളെ ഓർമ്മിപ്പിക്കട്ടെ വിന്യസിക്കുക = "കേന്ദ്രം"മധ്യഭാഗത്ത് പ്രദർശിപ്പിക്കേണ്ട വാചകം സജ്ജമാക്കുന്നു.
ഇപ്പോൾ css അതിൻ്റെ കഴിവുകൾ കാണിക്കേണ്ട സമയം അതിക്രമിച്ചിരിക്കുന്നു
html നൽകുന്ന വിവിധ ടാഗുകളുടെ മുഴുവൻ സെറ്റും ഉണ്ടായിരുന്നിട്ടും, ഫോണ്ടുകളുടെ രൂപം രൂപകൽപ്പന ചെയ്യുന്നതിനുള്ള കൂടുതൽ സൗകര്യപ്രദവും വഴക്കമുള്ളതുമായ ഉപകരണമാണ് css.
ഉള്ളടക്കം ഫോർമാറ്റ് ചെയ്യാൻ ഉപയോഗിക്കുന്ന പ്രധാന പ്രോപ്പർട്ടികൾ: ഫോണ്ട്അതിൻ്റെ ഘടകങ്ങളും: ടെക്സ്റ്റ് അലങ്കാരം.
ആദ്യം അത് നോക്കാം ഫോണ്ട്. ഇതൊരു സാർവത്രിക പാരാമീറ്ററാണ്, ഇതിന് നന്ദി നിങ്ങൾക്ക് ഒരേ സമയം നിരവധി മൂല്യങ്ങൾ സജ്ജമാക്കാൻ കഴിയും. കൂടാതെ, ഓരോ പരാമീറ്ററും അതിൻ്റേതായ കീവേഡുകൾ ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നു.
| വസ്തുവിൻ്റെ പേര് | കീവേഡുകൾ |
| ഫോണ്ട്-കുടുംബം | സ്റ്റാൻഡേർഡ് ഫോണ്ട് ഫാമിലികളായി ഇൻസ്റ്റാൾ ചെയ്യാൻ കഴിയും: · സെരിഫ് ഇല്ലാതെ (sans-serif); · പുരാതന (സെരിഫ്); · അലങ്കാര (ഫാൻ്റസി); · ഇറ്റാലിക് (കർസീവ്); · മോണോസ്പേസ് (മോണോസ്പേസ്), അതുപോലെ നിലവിലുള്ള സ്റ്റാൻഡേർഡ് ശൈലികൾ (ഏരിയൽ, കാലിബ്രി, മുതലായവ). |
| ഫോണ്ട് വലിപ്പം | ചിഹ്നങ്ങളുടെ സമ്പൂർണ്ണ വലുപ്പം സജ്ജീകരിക്കുന്നതിന്, ഇനിപ്പറയുന്ന നൊട്ടേഷനുകൾ ഉപയോഗിക്കുന്നു: xx-ചെറുത്, x-ചെറുത്, ചെറുത്, ഇടത്തരം, വലുത്, x-വലിയ, xx-വലിയ. നിങ്ങൾക്ക് ഒരു അദ്വിതീയ മൂല്യം വ്യക്തമാക്കാനും കഴിയും. |
| ഫോണ്ട്-ഭാരം | ടെക്സ്റ്റ് ശൈലിയുടെ സാച്ചുറേഷൻ ഉത്തരവാദിത്തം. ശ്രേണിയിലെ മാറ്റങ്ങൾ അല്ലെങ്കിൽ നോർമൽ, ബോൾഡ്, ലൈറ്റർ അല്ലെങ്കിൽ ബോൾഡർ എന്നീ വാക്കുകൾ ഉപയോഗിച്ച് വ്യക്തമാക്കിയിരിക്കുന്നു. |
| ഫോണ്ട് വേരിയൻ്റ് | കീവേഡുകൾ ഉപയോഗിച്ച് അക്ഷരങ്ങളുടെ പ്രാതിനിധ്യം വ്യക്തമാക്കുന്നു: സ്മോൾ ക്യാപ്സ്, നോർമൽ, അല്ലെങ്കിൽ ഇൻഹെറിറ്റ്. |
| ഫോണ്ട് ശൈലി | സാധാരണ, ചരിഞ്ഞ, ഇറ്റാലിക്, അല്ലെങ്കിൽ മാതാപിതാക്കളെ പാരമ്പര്യമായി സജ്ജീകരിക്കുന്നു. |
| ഫോണ്ട്-സ്ട്രെച്ച് | അക്ഷരങ്ങളുടെ സാന്ദ്രത സൂചിപ്പിക്കുന്നു. ഇനിപ്പറയുന്ന മൂല്യങ്ങൾ വ്യക്തമാക്കാൻ കഴിയും: അൾട്രാ-കണ്ടൻസ്ഡ്, അൾട്രാ-എക്സ്പാൻഡഡ്, എക്സ്ട്രാ-കണ്ടൻസ്ഡ്, എക്സ്ട്രാ-എക്സ്പാൻഡഡ്, അർദ്ധ-ഘനീഭവിച്ച, അർദ്ധ-വികസിപ്പിച്ച, സാധാരണ, വികസിപ്പിച്ച, ഘനീഭവിച്ച, അനന്തരാവകാശം. |
സ്വത്ത് ടെക്സ്റ്റ് അലങ്കാരംഅടിവരയിടുന്നത് പോലുള്ള അധിക ഘടകങ്ങൾ ഉപയോഗിച്ച് ടെക്സ്റ്റ് അലങ്കരിക്കാൻ സഹായിക്കുന്നു ( അടിവരയിടുക), സ്ട്രൈക്ക്ത്രൂ ( ലൈൻ-ത്രൂ), ഓവർലൈൻ ( ഓവർലൈൻ), കൂടാതെ മാതാപിതാക്കളുടെ പാരാമീറ്ററുകളും അവകാശമാക്കുന്നു ( അനന്തരാവകാശം) അല്ലെങ്കിൽ എല്ലാ രജിസ്ട്രേഷനും റദ്ദാക്കുക ( ഒന്നുമില്ല).
ഇപ്പോൾ രണ്ടാമത്തെ ഉദാഹരണത്തിൻ്റെ സമയമാണ്. ഞാൻ മുമ്പത്തെ കോഡ് എടുത്ത് css ഉപയോഗിച്ച് സ്റ്റൈൽ ചെയ്തു. അതിനാൽ, തലക്കെട്ട് ഒരു നിഴൽ കൊണ്ട് അലങ്കരിച്ചിരിക്കുന്നു (സ്വത്ത് ഉപയോഗിച്ച് വാചകം-നിഴൽ) കൂടാതെ ഒരു രൂപരേഖയോടും കൂടി ( അതിർത്തി-നിറം). അതേ സമയം, ഞാൻ ഒരു വാക്ക് വലുതാക്കി. പാരാമീറ്റർ ഉപയോഗിക്കാനും ഞാൻ ആഗ്രഹിച്ചു അതാര്യതസബ്ടൈറ്റിലിൻ്റെ സുതാര്യത സജ്ജമാക്കാൻ.
പേര് ആദ്യംതലക്കെട്ട്
അർദ്ധസുതാര്യമായ സബ്ടൈറ്റിൽ!
ഇവിടെ സ്ഥിതി ചെയ്യുന്നു ആദ്യംഖണ്ഡിക നിലവിലെഉദാഹരണം. വ്യക്തതയ്ക്കായി ഈ വാക്കുകൾഇറ്റാലിക്സിൽ എഴുതും.
HTML, CSS എന്നിവ ഉപയോഗിച്ച് സൈറ്റിലെ ഫോണ്ട് വലുപ്പം സജ്ജമാക്കാൻ കഴിയും. രണ്ട് ഓപ്ഷനുകളും നമുക്ക് പരിഗണിക്കാം.
HTML ഉപയോഗിച്ച് ഫോണ്ട് സൈസ് ക്രമീകരിക്കുന്നു
ടാഗ് ഉപയോഗിച്ച് പേജിലെ ഫോണ്ട് വലുപ്പം നിർണ്ണയിക്കാനാകും ഫോണ്ട് HTML. ലേഖനത്തിൽ ഞങ്ങൾ ഇതിനകം ടാഗ് നോക്കി ഫോണ്ട്അതിൻ്റെ ഗുണവിശേഷങ്ങളും. ഈ ടാഗിൻ്റെ ആട്രിബ്യൂട്ടുകളിൽ ഒന്ന് വലിപ്പം, ഇത് ഫോണ്ട് വലുപ്പം സജ്ജമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് ഇനിപ്പറയുന്ന രീതിയിൽ പ്രയോഗിക്കുന്നു:
വെബ്സൈറ്റ് ബിൽഡർ "നുബെക്സ്"
വലിപ്പം 1 മുതൽ 7 വരെയുള്ള മൂല്യങ്ങൾ എടുക്കാം (സ്ഥിരസ്ഥിതി 3 ആണ്, ഇത് ടൈംസ് ന്യൂ റോമൻ ഫോണ്ടിൻ്റെ 13.5 പോയിൻ്റുമായി യോജിക്കുന്നു). ആട്രിബ്യൂട്ട് വ്യക്തമാക്കുന്നതിനുള്ള മറ്റൊരു ഓപ്ഷൻ "+1" അല്ലെങ്കിൽ "-1" ആണ്. ഇതിനർത്ഥം യഥാക്രമം 1 പോയിൻ്റ് കൂടുതലോ കുറവോ ആധാരവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ വലുപ്പം മാറും എന്നാണ്.
ഈ രീതി ഉപയോഗിക്കാൻ വളരെ എളുപ്പമാണ് കൂടാതെ ഒരു ചെറിയ വാചകത്തിൻ്റെ ഫോണ്ട് വലുപ്പം മാറ്റണമെങ്കിൽ അത് ഒഴിച്ചുകൂടാനാവാത്തതാണ്. അല്ലെങ്കിൽ, CSS ഉപയോഗിച്ച് ടെക്സ്റ്റ് സ്റ്റൈൽ ചെയ്യാൻ ശുപാർശ ചെയ്യുന്നു.
CSS ഉപയോഗിച്ച് ഫോണ്ട് സൈസ് ക്രമീകരിക്കുന്നു
CSS-ൽ, പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഫോണ്ട് സൈസ് മാറ്റാം ഫോണ്ട് വലിപ്പം, ഇത് ഇനിപ്പറയുന്ന രീതിയിൽ പ്രയോഗിക്കുന്നു:
ചുവടെയുള്ള ഉദാഹരണത്തിൽ, ഫോണ്ട് വലുപ്പം പിക്സലുകളിൽ സജ്ജീകരിച്ചിരിക്കുന്നു. എന്നാൽ വലിപ്പം സജ്ജമാക്കാൻ മറ്റ് വഴികളുണ്ട്:
- വലിയ, ചെറിയ, ഇടത്തരം- സമ്പൂർണ്ണ വലുപ്പം സജ്ജമാക്കുക (ചെറുത്, ഇടത്തരം, വലുത്). അധിക-ചെറിയ (x-ചെറുത്, xx-ചെറുത്), അധിക-വലിയ (x-വലിയ, xx-വലിയ) മൂല്യങ്ങളും ഉപയോഗിക്കാം.
- വലുത്, ചെറുത്- ആപേക്ഷിക വലുപ്പം സജ്ജമാക്കുക (മാതൃ ഘടകവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ചെറുതോ വലുതോ).
- 100% - ആപേക്ഷിക വലുപ്പം സജ്ജീകരിച്ചിരിക്കുന്നു (മാതാപിതാവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു ശതമാനമായി). ഉദാഹരണത്തിന്: h1 (അക്ഷര വലുപ്പം: 180%; ) ഇത് ടാഗിൻ്റെ വലുപ്പത്തെ അർത്ഥമാക്കുന്നു H1അടിസ്ഥാന ഫോണ്ട് വലുപ്പത്തിൻ്റെ 180% ആയിരിക്കും.
- ആപേക്ഷിക വലുപ്പം ക്രമീകരിക്കുന്നതിനുള്ള മറ്റ് ഓപ്ഷനുകൾ:
- 5 എക്സി- വലിപ്പം 5 അക്ഷരങ്ങളുടെ ഉയരം ആയിരിക്കും എന്നാണ് അർത്ഥമാക്കുന്നത് xഅടിസ്ഥാന ഫോണ്ടിൽ നിന്ന്;
- 14pt- 14 പോയിൻ്റുകൾ;
- 22px- 22 പിക്സലുകൾ;
- 1vw- ബ്രൗസർ വിൻഡോ വീതിയുടെ 1%;
- 1vh- ബ്രൗസർ വിൻഡോ ഉയരത്തിൻ്റെ 1%;
