Chapter 10CSS Tutorial~2 min read
CSS Fonts
font-size, font-family, font-weight — Typography
Fonts web design मध्ये खूप important role play करतात. ते फक्त readability नाही — website चे personality आणि style पण define करतात. CSS मध्ये fonts पूर्णपणे control करता येतात.
1. font-size — Text चा आकार
font-size — उदाहरण
css
/* Predefined values */
p { font-size: small; }
p { font-size: medium; } /* Default */
p { font-size: large; }
/* Absolute unit — px (pixels) */
h1 { font-size: 48px; }
p { font-size: 16px; }
/* Relative units */
p { font-size: 1.5em; } /* Parent element च्या 1.5 पट */
p { font-size: 1.2rem; } /* Root (<html>) च्या 1.2 पट */
p { font-size: 120%; } /* Parent च्या 120% */2. font-family — Font निवडणे
font-family मध्ये comma-separated fonts लिहितात — priority order मध्ये. पहिला font नसेल तर दुसरा वापरतो. शेवटी generic family असणे best practice.
font-family — Font Stack
css
/* Font Stack — priority order */
h1 { font-family: 'Courier New', Courier, monospace; }
h2 { font-family: 'Times New Roman', Times, serif; }
body { font-family: Arial, Helvetica, sans-serif; }
/* Generic Font Families (fallback) */
/* serif — Times New Roman, Georgia (formal, traditional) */
/* sans-serif — Arial, Helvetica (modern, clean) */
/* monospace — Courier New, Consolas (code/tech) */
/* cursive — handwritten style */
/* fantasy — decorative fonts */Google Fonts — Free Custom Fonts
Google Fonts Integrate करणे
html
<!-- Step 1: fonts.google.com वरून link copy करा -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Step 2: CSS मध्ये वापरा -->
<style>
body {
font-family: 'Poppins', sans-serif;
}
h1 {
font-weight: 700; /* Bold */
}
</style>3. font-weight — Bold/Thin
font-weight
css
p { font-weight: 100; } /* Extra Light */
p { font-weight: 400; } /* Normal (default) */
p { font-weight: 700; } /* Bold */
p { font-weight: 900; } /* Extra Bold */
/* Keywords */
p { font-weight: bold; }
p { font-weight: lighter; }
p { font-weight: bolder; }4. font-style — Italic
font-style
css
p { font-style: normal; } /* Default */
p { font-style: italic; } /* Slanted */
p { font-style: oblique; } /* Slightly slanted */💡
rem units वापरणे best practice आहे — accessibility साठी. User browser मध्ये font size बदलला तर rem automatically scale होतो. px fixed असतो.
✅ Key Points — लक्षात ठेवा
- ▸font-size: px (fixed), em (parent relative), rem (root relative)
- ▸font-family: Font Stack — priority order, शेवटी generic family
- ▸Google Fonts: fonts.google.com — free, beautiful fonts
- ▸font-weight: 100 (thin) ते 900 (extra bold)
- ▸font-style: normal | italic | oblique
0/16 chapters पूर्ण