CSS Font Size
CSS font-size பண்பு உரை/எழுத்துருவின் அளவை குறிப்பிட பயன்படுகிறது.
உரை அளவை நிர்வகிக்க முடியும் என்பது வலை வடிவமைப்பில் மிகவும் முக்கியமானது.
இருப்பினும், பத்திகளை தலைப்புகள் போல் தோன்றும்படி அல்லது தலைப்புகளை பத்திகள் போல் தோன்றும்படி எழுத்துரு அளவு சரிசெய்தலைப் பயன்படுத்தக்கூடாது. எப்போதும் சரியான HTML டேக்குகளைப் பயன்படுத்தவும், தலைப்புகளுக்கு <h1> - <h6> மற்றும் பத்திகளுக்கு <p> போன்றவை.
font-size-ஐ absolute size அல்லது relative size-ஆக அமைக்கலாம்.
Absolute sizes:
- px: பிக்சல்கள் எழுத்துரு அளவின் மீது நிலையான மற்றும் துல்லியமான கட்டுப்பாட்டை வழங்குகின்றன.
- xx-small, x-small, small, medium, large, x-large, xx-large. இந்த முக்கிய சொற்கள் உலாவிகளில் முன்குறிப்பிடப்பட்ட அளவுகளைக் கொண்டுள்ளன.
Relative sizes:
- em: இந்த அலகு பெற்றோர் உறுப்பின் எழுத்துரு அளவைப் பொறுத்தது.
- rem: இந்த அலகு root HTML உறுப்பின் எழுத்துரு அளவைப் பொறுத்தது.
- %: இந்த அலகு பெற்றோர் உறுப்பின் எழுத்துரு அளவைப் பொறுத்தது
- smaller மற்றும் larger: இந்த அலகுகள் பெற்றோர் உறுப்பைப் பொறுத்து எழுத்துரு அளவை சரிசெய்கின்றன.
How to Pick the Right Unit?
- நிலையான மற்றும் துல்லியமான கட்டுப்பாட்டிற்கு, px பயன்படுத்தப்படலாம்.
- px உடன், வலைப்பக்கம் வெவ்வேறு திரை அளவுகளில் அல்லது பயனர் விருப்பங்களுடன் நன்றாக அளவிடாது.
- வெளியீட்டின் இயற்பியல் அளவு தெரிந்தால் absolute size பயனுள்ளதாக இருக்கும்.
- அளவிடக்கூடிய வலை வடிவமைப்புகளுக்கு, em அல்லது rem பயன்படுத்தவும்; அவை பயனர்கள் தங்கள் உலாவி அமைப்புகளில் உரை அளவை சரிசெய்ய அனுமதிக்கின்றன.
- சதவீதம் (%) பெற்றோர் உறுப்புகளை அடிப்படையாகக் கொண்டு எழுத்துரு அளவுகளை சரிசெய்வதற்கு பயனுள்ளதாக இருக்கும்.
Set Font Size With Pixels
பிக்சல்கள் (px) உடன் உரை அளவை அமைப்பது உங்களுக்கு உரை அளவின் மீது முழு கட்டுப்பாட்டை வழங்குகிறது.
நீங்கள் பிக்சல்களைப் பயன்படுத்தினால், வலைப்பக்கம் வெவ்வேறு திரை அளவுகளில் மிகவும் நன்றாக அளவிடாது மற்றும் பயனர்கள் தங்கள் உலாவி அமைப்புகளில் உரை அளவை சரிசெய்ய முடியாது. இருப்பினும், பயனர்கள் இன்னும் முழு பக்கத்தையும் மறுபரிமாணப்படுத்த அளவிடும் கருவியைப் பயன்படுத்தலாம்.
எடுத்துக்காட்டு
px உடன் எழுத்துரு அளவுகளை அமைக்கவும்:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}Set Font Size With Em
em அலகு பெற்றோர் உறுப்பின் எழுத்துரு அளவைப் பொறுத்தது. எனவே, பெற்றோர் உறுப்பு 16px எழுத்துரு அளவைக் கொண்டிருந்தால், 2.5em 40px-க்கு விளைவிக்கும்.
பின்வரும் எடுத்துக்காட்டில், em-ல் உள்ள உரை அளவு பிக்சல்களில் உள்ள முந்தைய எடுத்துக்காட்டின் அதே அளவு. இருப்பினும், em அலகு பயனரை உலாவி அமைப்புகளில் உரை அளவை சரிசெய்ய அனுமதிக்கிறது.
எடுத்துக்காட்டு
em உடன் எழுத்துரு அளவுகளை அமைக்கவும்:
body {
font-size: 16px; /* அடிப்படை எழுத்துரு அளவு */
}
h1 {
font-size: 2.5em; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875em; /* 1.875 * 16 = 30px */
}
p {
font-size: 1em; /* 1 * 16 = 16px */
}Set Font Size With Rem
rem அலகு root HTML உறுப்பின் (<html>) எழுத்துரு அளவைப் பொறுத்தது.
அதன் பெற்றோர் உறுப்பின் font-size-ஐப் பொறுத்த em-ஐப் போலன்றி, rem எப்போதும் <html> உறுப்பின் font-size-ஐக் குறிக்கிறது, ஆவண மரத்தில் அதன் நிலை எதுவாக இருந்தாலும். இது rem-ஐ அளவிடக்கூடிய மற்றும் பதிலளிக்கும் வடிவமைப்புகளை உருவாக்க மிகவும் பயனுள்ளதாக்குகிறது. <html> உறுப்பின் font-size-ஐ மாற்றுவதன் மூலம், rem அலகுகளுடன் அளவிடப்பட்ட அனைத்து உறுப்புகளும் முழு பக்கத்திலும் விகிதாசாரத்தில் அளவிடப்படும்.
பெரும்பாலான உலாவிகளில் <html> உறுப்பின் இயல்புநிலை font-size 16px ஆகும். எனவே, CSS-ல் வெளிப்படையாக மேலெழுதப்படாத வரை, இயல்புநிலையில் 1rem 16px-க்கு சமம்.
எடுத்துக்காட்டு
rem உடன் எழுத்துரு அளவுகளை அமைக்கவும்:
html {
font-size: 16px; /* root எழுத்துரு அளவை அமைக்கவும் */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875rem; /* 1.875 * 16 = 30px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
}The vw Unit
எழுத்துரு அளவை vw அலகுடன் அமைக்கலாம், இது "viewport width" என்று பொருள்படும்.
vw அலகு viewport-ன் அகலத்தின் சதவீதத்தைக் குறிக்கும் ஒரு தொடர்புடைய அலகு.
1vw = உலாவியின் viewport-ன் தற்போதைய அகலத்தில் 1%. எனவே, viewport 500px அகலமாக இருந்தால், 1vw என்பது 5px ஆகும்.
இந்த வழியில் உரை அளவு உலாவி சாளரத்தின் அளவைப் பின்பற்றும்:
Hello World
எழுத்துரு அளவு எவ்வாறு அளவிடுகிறது என்பதைப் பார்க்க உலாவி சாளரத்தை மறுபரிமாணப்படுத்தவும்.
எடுத்துக்காட்டு
h1 {
font-size: 10vw;
}
p {
font-size: 5vw;
}CSS Font Size பயிற்சி
இந்த டுடோரியலில் உள்ள பல அத்தியாயங்கள் உங்கள் அறிவு நிலையைச் சரிபார்க்கக்கூடிய பயிற்சியுடன் முடிகின்றன.
h1 இன் எழுத்துரு அளவை 60px ஆக அமைக்க சரியான பண்பு மற்றும் மதிப்பை இழுத்து விடவும்.
h1 {
: ;
}