पाठ 13, कुल 30 में

CSS फ़ॉन्ट्स

5 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS टेक्स्ट CSS लिंक्स

Font अक्षरों की बनावट है। एक ही वाक्य एक font में गंभीर लगता है और दूसरे में मज़ेदार, इसलिए font चुनना पेज का एहसास बदलने का सबसे तेज़ तरीका है। CSS आपको पाँच font properties देता है, और उनमें से एक — font-family — सबसे ज़्यादा काम करती है।

Diagram — देखें, यह सब कैसे जुड़ता है

font-family — कौन-सा font

font-family fonts की एक सूची लेता है, पसंद के क्रम में: font-family: Georgia, 'Times New Roman', serif;। Browser पहले Georgia आज़माता है; अगर visitor के computer पर वह नहीं है, तो Times New Roman आज़माता है; अगर वह भी नहीं है, तो कोई भी serif font इस्तेमाल करता है। सूची के अंत में हमेशा एक generic family रखें — serif, sans-serif, monospace, cursive या fantasy — ताकि हमेशा कोई fallback रहे।

वेब-सेफ़ fonts

कुछ fonts लगभग हर computer पर होते हैं, इसलिए वे इस्तेमाल के लिए सुरक्षित हैं: Arial, Verdana, Georgia, Times New Roman और Courier New। इन्हें web-safe fonts कहते हैं। अगर आपको ऐसा font चाहिए जो किसी के पास installed नहीं है, तो Google Fonts से उसे load कर सकते हैं — नीचे देखें।

font-size — कितना बड़ा

Size px (तय), em (element के font size के सापेक्ष) या rem (root font size के सापेक्ष, आमतौर पर 16px) में तय किया जा सकता है। Beginners अक्सर हर जगह px इस्तेमाल करते हैं, लेकिन rem बेहतर आदत है: अगर visitor अपने browser में text बड़ा करता है, तो rem sizes साथ बढ़ते हैं और px sizes नहीं बढ़ते।

font-style और font-weight

font-style आमतौर पर normal या italic होता है। font-weight तय करता है कि अक्षर कितने मोटे हैं: normal, bold, या 100 (पतला) से 900 (बहुत मोटा) तक की संख्या।

Google Fonts — मुफ्त fonts

Google Fonts सैकड़ों मुफ्त fonts देता है। fonts.google.com पर कोई font चुनें, वहाँ से मिला <link> अपने पेज के <head> में copy करें, फिर font-family में उस font का नाम इस्तेमाल करें:

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

h1 {
  font-family: 'Poppins', sans-serif;
}

font shorthand — एक लाइन में पाँचों properties

पाँचों properties font shorthand से एक लाइन में आ जाती हैं — style, weight, size, line-height, family, इसी क्रम में:

p {
  font: italic bold 20px/1.5 Georgia, serif;
}

Size और family ज़रूरी हैं; बाकी वैकल्पिक हैं। Line-height size के बाद slash के साथ बैठती है: 20px/1.5।

आइकन

आइकन भी fonts ही होते हैं। Font Awesome जैसी libraries सैकड़ों आइकन font के रूप में देती हैं: आप एक <link> जोड़ते हैं और जहाँ phone आइकन चाहिए वहाँ <i class="fa fa-phone"></i> लिखते हैं। इस तरह की छोटी तस्वीरें images से ज़्यादा साफ़ दिखती हैं और load होने में लगभग कुछ नहीं लेतीं। (यह वेबसाइट खुद अपने आइकनों के लिए Font Awesome इस्तेमाल करती है।)

Note: जिन font नामों में space होता है, जैसे Times New Roman, उन्हें quotes में लिखना ज़रूरी है: font-family: 'Times New Roman', serif;। Georgia जैसे एक शब्द वाले नामों को quotes की ज़रूरत नहीं होती।

Tip: एक पेज पर ज़्यादा से ज़्यादा दो fonts इस्तेमाल करें — एक headings के लिए, एक body text के लिए। दो से ज़्यादा गंदा लगता है, और हर extra font पेज को धीमा करता है।

आम गलतियाँ

font shorthand को बिना size और family के लिखना — पूरा rule फिर नज़रअंदाज़ कर दिया जाता है, और कुछ नहीं बदलता।
font-family के अंत में generic family भूल जाना — अगर नाम वाला कोई font नहीं है, तो browser अपने डिफ़ॉल्ट पर लौट जाता है।
Font sizes के लिए सिर्फ px इस्तेमाल करना — जो visitor अपने browser settings में text बड़ा करता है उसे कोई फ़ायदा नहीं मिलता। Body text के लिए rem इस्तेमाल करें।
पाँच या छह Google Fonts load करना — हर एक download होने वाली एक और file है। एक या दो चुनें।

याद रखें

font-family एक सूची है जिसके अंत में generic family होती है: serif, sans-serif या monospace।
जब visitor text बड़ा करता है तो rem sizes बढ़ते हैं; px sizes नहीं बढ़ते।
font-weight: bold वही है जो font-weight: 700 है।
font shorthand में कम से कम size और family चाहिए, क्रम है style, weight, size/line-height, family।
जिन font नामों में space हो उन्हें quotes में लिखें।
तरकीब: दो font काफी हैं — एक शीर्षक के लिए, एक पाठ के लिए।

उदाहरण समझिए

h1 { font-family: Georgia, 'Times New Roman', serif; } — heading पहले Georgia आज़माती है, फिर Times New Roman, फिर कोई भी serif font, इसलिए यह हर computer पर सही दिखती है।
h1 { font-size: 32px; } — heading तय 32px की है, आम body size से दोगुनी, जिससे वह अलग दिखती है।
.quote { font-style: italic; } — स्वागत वाली लाइन एक तरफ झुकी हुई है, quote का क्लासिक अंदाज़।
.note { font: bold 18px/1.5 Arial, sans-serif; } — एक लाइन में shorthand: bold weight, 18px size, 1.5 line-height, Arial और sans-serif fallback।
.small { font-size: 0.9rem; } — footer text root font size का 0.9 गुना है, body text से थोड़ा छोटा।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Fonts - Welcome Card</title>
<style>
h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; }
.quote { font-family: Georgia, serif; font-style: italic; }
.note { font: bold 18px/1.5 Arial, sans-serif; }
.small { font-size: 0.9rem; color: grey; }
</style>
</head>
<body>

<h1>Welcome to KAMALDNP Academy</h1>
<p class="quote">Learn by doing - every lesson ends with something you build yourself.</p>
<p class="note">New batch starts 1st June. Limited seats.</p>
<p class="small">Varanasi, Uttar Pradesh</p>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।