CSS Font
ஒரு text-ன் style அல்லது அதன் appearance-ஐ control செய்ய CSS Font property பயன்படுத்தபடுகிறது. அதாவது text-ன் size, color, style,etc..
Important font attributes:
- font-family: font face-ஐ மாற்றிகொல்வதர்க்காக பயன்படுத்தபடுகிறது.
- font-style: text-ஐ bold, italic or oblique செய்ய பயன்படுத்தபடுகிறது.
- font-size: font size-ஐ increase or decrease செய்ய பயன்படுத்தபடுகிறது.
- font-variant: small-calis effect-ஐ உருவாக்க பயன்படுத்தபடுகிறது.
- font-weight: ஒரு text-இன் boldness and lightness-ஐ increase or decrease செய்ய பயன்படுத்தபடுகிறது.
- font-color: text-இன் color-ஐ மாற்றி கொள்வதற்காக பயன்படுத்தபடுகிறது.
CSS Font Family
font-ன் face-ஐ மாற்றிகொல்வதர்க்காக பயன்படுத்தபடுகிறது.
Example
.f1 { font-family: sans-serif; }
.f2 { font-family: serif; }
.f3 { font-family: monospace; } Example
Try this code<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 class="f1"> This heading displays in sans-serif.</h1>
<h1 class="f2"> This heading displays in serif.</h1>
<h1 class="f3">This heading displays in monospace.</h1>
</body>
</html>
Output:
This heading displays in sans-serif.
This heading displays in serif.
This heading displays in monospace.
CSS Font Style
CSS Font style என்பது எந்த type font-ஐ display செய்யவேண்டும் என்பதற்காக பயன்படுத்தபடுகிறது . It may be italic, oblique, or normal.
Example
.d1 { font-style: italic; }
.d2 { font-style: oblique; }
.d3 { font-style: normal; } Example
Try this code<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="d1"> This heading displays in italic font.</div>
<div class="d2"> This heading displays in oblique font.</div>
<div class="d3">This heading displays in normal font.</div>
</body>
</html>
Output:
This heading displays in italic font.
This heading displays in oblique font.
This heading displays in normal font.
CSS Font Size
font size-ஐ மாற்றிக்கொள்ள இந்த font-size property பயன்படுத்தபடுகிறது.
கீழ்கண்ட முறைகளில் font-size-ஐ நாம் apply செய்யமுடியும்.
- xx-small - display the extremely small text size.
- x-small - display the extra small text size.
- small - display small text size.
- medium - display medium text size.
- large - display large text size.
- x-large - display extra large text size.
- xx-large - display extremely large text size.
- smaller - display comparatively smaller text size.
- larger - display comparatively larger text size.
- size in pixels or % - set value in percentage or in pixels.
Example
Example
Try this code.fz1{font-size:xx-small;}
.fz2{font-size:x-small;}
.fz3{font-size:small; }
.fz4{font-size:medium;}
.fz5{font-size:large;}
.fz6{font-size:x-large;}
.fz7{font-size:xx-large;}
.fz8{font-size:smaller;}
.fz9{font-size:larger;}
.fz10{font-size:200%;}
.fz11{font-size:20px;} Example
Try this code<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="fz1"> This font size is extremely small.</div>
<div class="fz2"> This font size is extra small.</div>
<div class="fz3">This font size is small.</div>
<div class="fz4">This font size is medium.</div>
<div class="fz5">This font size is large.</div>
<div class="fz6">This font size is extra large.</div>
<div class="fz7">This font size is extremely large.</div>
<div class="fz8">This font size is smaller.</div>
<div class="fz9">This font size is larger.</div>
<div class="fz10">This font size is set on 250%.</div>
<div class="fz11">This font size is 250 pixels.</div>
</body>
</html>Output:
This font size is extremely small.
This font size is extra small.
This font size is small.
This font size is medium.
This font size is large.
This font size is extra large.
This font size is extremely large.
This font size is smaller.
This font size is larger.
This font size is set on 250%.
This font size is 250 pixels.
CSS Font Color
font-color என்பது ஒரு standalone attribute ஆகும், அதுமட்டுமல்லாமல் text-இன் color-ஐ மாற்றி கொள்வதற்காக பயன்படுத்தபடுகிறது..
color name,hexadecimal value,RGB போன்ற முறைகளில் apply செய்யபடுகிறது.
Example
.c1 { color: red; }
.c2 { color: #9000A1; }
.c3 { color: rgb(0, 220, 98); }Example
Try this code<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 class="c1"> Never make a decision when you are sad.</h1>
<h1 class="c2"> Never make promises when you are happy.</h1>
<h1 class="c3">Never reply when you are in angry.</h1>
</body>
</html>Output:
Never make a decision when you are sad
Never make promises when you are happy
Never reply when you are in angry
CSS Font variant
CSS font-weight property, font weight-ஐ வரையறை செய்கிறது அத்தோடு how bold a font is. கீழே உள்ள முறைகளில் font weight apply செய்யபடுகிறது.
normal, bold, bolder, lighter or number (100, 200..... upto 900).
Example
Example
Try this code.fw1{font-weight:bold;}
.fw2{font-weight:bolder;}
.fw3{font-weight:lighter;}
.fw4{font-weight:100;}
.fw5{font-weight:200;}
.fw6{font-weight:300;}
.fw7{font-weight:400;}
.fw8{font-weight:500;}
.fw9{font-weight:600;}
.fw10{font-weight:700;}
.fw11{font-weight:800;}
.fw12{font-weight:900;}Example
Try this code<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="fw1"> This font size is bold.</div>
<div class="fw2"> This font size is bolder.</div>
<div class="fw3">This font size is lighter.</div>
<div class="fw4">This font size is 100 weight.</div>
<div class="fw5">This font size is 200 weight.</div>
<div class="fw6">This font size is 300 weight.</div>
<div class="fw7">This font size is 400 weight.</div>
<div class="fw8">This font size is 500 weight.</div>
<div class="fw9">This font size is 600 weight.</div>
<div class="fw10">This font size is 700 weight.</div>
<div class="fw11">This font size is 800 weight.</div>
<div class="fw12">This font size is 900 weight.</div>
</body>
</html>Output:
This font is bold.
This font is bolder.
This font is lighter.
This font is 100 weight.
This font is 200 weight.
This font is 300 weight.
This font is 400 weight.
This font is 500 weight.
This font is 600 weight.
This font is 700 weight.
This font is 800 weight.
This font is 900 weight.
இது பற்றிய தங்களின் கருத்துகளை இங்கே பதிவிடுங்கள் . இது பயனுள்ளதாக விரும்பினால் மற்றவர்களுக்கும் இதை share செய்யுங்கள்.
Comments