Css Notes

CSS Fonts

by

सही फ़ॉन्ट चुनने का पाठकों के वेबसाइट अनुभव पर बहुत गहरा प्रभाव पड़ता है। सही फ़ॉन्ट आपके ब्रांड की एक मज़बूत पहचान बना सकता है। पढ़ने में आसान फ़ॉन्ट चुनना ज़रूरी है। अपने फ़ॉन्ट के लिए सही रंग और आकार चुनना भी ज़रूरी है।

CSS Font Family

CSS में font-family प्रॉपर्टी किसी एलिमेंट के लिए फ़ॉन्ट निर्दिष्ट करती है।

font-family प्रॉपर्टी में “fallback” सिस्टम के रूप में कई फ़ॉन्ट नाम होने चाहिए। अगर ब्राउज़र पहले फ़ॉन्ट का समर्थन नहीं करता है, तो वह अगले फ़ॉन्ट को आज़माता है। फ़ॉन्ट नामों को अल्पविराम से अलग किया जाना चाहिए।

Example
Specify some different fonts for three paragraphs:

body {
  font-family: "Times New Roman", Times, serif;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-family: "Lucida Console", "Courier New", monospace;
}

यहाँ कुछ फॉन्ट के प्रकार इस तरह हैं –

This font is Times New Roman

This font is Sans-serif

This font is Lucida Console

This font is Copperplate

This font is Monaco

This font is Verdana

This font is Lucida Handwriting

नोट – यदि फ़ॉन्ट नाम एक से अधिक शब्दों का है, तो उसे डबल कोट (Double Quote) में लिखा जाना चाहिए, जैसे- “Times New Roman”, “Courier New” आदि।

Some Font Family Examples

यहाँ कुछ फॉन्ट के उदाहरण निम्न प्रकार हैं –

  • Serif – Times New Roman, Georgia, Garamond
  • Sans-serif – Arial, Verdana, Helvetica
  • Monospace – Courier New, Lucida Console, Monaco
  • Cursive – Brush Script MT, Lucida Handwriting
  • Fantasy – Copperplate, Verdana

CSS Font Style

font-style प्रॉपर्टी फॉन्ट का स्टाइल निर्धारित करता है, font-style प्रॉपर्टी की वैल्यू निम्न प्रकार हैं –

  • normal – The text is shown normally
  • italic – The text is shown in italics
  • oblique – The text is similar to italic
Example

p {
  font-style: normal;
}

p{
  font-style: italic;
}

p {
  font-style: oblique;
}

This font style is normal

This font style is italic

This font style is oblique

CSS Font Weight

font-weight प्रॉपर्टी निर्दिष्ट करता है कि में टेक्सट में अक्षर कितने मोटे या पतले प्रदर्शित किए जाने चाहिए। यहाँ font-weight प्रॉपर्टी की वैल्यू निम्न प्रकार हैं –

  • normal – यह डिफ़ॉल्ट स्टाइल है, इसमे अक्षर सामान्य दिखाई देते हैं।
  • bold – इसमे अक्षर मोटे दिखाई देते हैं।
  • bolder – इसमे अक्षर अधिक मोटे दिखाई देते हैं।
  • lighter – इसमे अक्षर अधिक पतले दिखाई देते हैं।
  • 100-900 – इसमे अक्षरों को पतला या मोटा वैल्यू के आधार पर सेट किया जा सकता है। यहाँ 400 सामान्य आकार है और 700 बोल्ड।
Example

p {
  font-weight: normal;
}

p{
  font-weight: lighter;
}

p {
  font-weight: bold;
}

p {
  font-weight: 900;
}

उपरोक्त उदाहरण का आउटपुट इस प्रकार है –

This font weight is normal

This font weight is lighter

This font weight is bold

This font weight is 900

CSS Font Variant

font-variant प्रॉपर्टी यह निर्दिष्ट करता है कि किसी टेक्सट को छोटे अक्षरों वाले फ़ॉन्ट में प्रदर्शित किया जाना चाहिए या नहीं। यहाँ font-variant प्रॉपर्टी की वैल्यू निम्न प्रकार हैं –

Example

p {
  font-variant: small-caps;
}

p {
  font-variant: normal;
}

उपरोक्त उदाहरण का आउटपुट इस प्रकार है –

This font variant is Small Caps

This font varient is normal

CSS Font Size

font-size प्रॉपर्टी के द्वारा फॉन्ट का साइज़ (आकार) अडजस्ट किया जा सकता है, फ़ॉन्ट-आकार को निरपेक्ष आकार या सापेक्ष आकार पर सेट किया जा सकता है।

Absolute sizes:

  • px – पिक्सेल्स फ़ॉन्ट आकार पर निश्चित और सटीक नियंत्रण प्रदान करता है।
  • xx-small, x-small, small, medium, large, x-large, xx-large. इन सभी कीवर्ड्स का ब्राउज़र में आकार का एक पूर्वनिर्धारित सेट होता है।

Relative sizes:

  • em – यह यूनिट पैरेंट एलीमेंट के फ़ॉन्ट आकार के सापेक्ष है।
  • rem – यह यूनिट मूल HTML एलीमेंट के फ़ॉन्ट आकार के सापेक्ष है।
  • % – यह यूनिट पैरेंट एलीमेंट के फ़ॉन्ट आकार के सापेक्ष है
  • smaller and larger: ये यूनिट्स पैरेंट एलीमेंट के सापेक्ष फ़ॉन्ट आकार को समायोजित करती हैं।

How to Pick the Right Unit?

  • निश्चित और सटीक नियंत्रण के लिए, px का उपयोग किया जा सकता है। px के साथ, वेब पेज अलग-अलग स्क्रीन आकारों पर या उपयोगकर्ता की प्राथमिकताओं के अनुसार ठीक से स्केल नहीं होगा।
  • स्केलेबल वेब डिज़ाइन के लिए, em या rem का उपयोग करें; ये उपयोगकर्ताओं को अपनी ब्राउज़र सेटिंग्स में टेक्स्ट का आकार समायोजित करने की अनुमति देते हैं।
  • प्रतिशत (%) पैरेंट एलीमेंट के आधार पर फ़ॉन्ट आकार समायोजित करने के लिए उपयोगी हो सकता है।

Font Size With Pixels

पिक्सेल (px) के साथ टेक्स्ट का आकार निर्धारित करने से आपको टेक्स्ट के आकार पर पूरा नियंत्रण मिलता है।

यदि आप पिक्सेल का उपयोग करते हैं, तो हो सकता है कि वेब पेज अलग-अलग स्क्रीन आकारों पर ठीक से स्केल न हो और उपयोगकर्ता अपनी ब्राउज़र सेटिंग में टेक्स्ट का आकार समायोजित न कर पाएँ। हालाँकि, उपयोगकर्ता पूरे पेज का आकार बदलने के लिए ज़ूम टूल का उपयोग कर सकते हैं।

Example
Set font sizes with px:

p {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

p {
  font-size: 16px;
}

उपरोक्त उदाहरण का आउटपुट इस प्रकार है –

This paragraph has 30px font size

This heading has 25px font size

This paragraph has 16px font size

Font Size With Em

em यूनिट पैरेंट एलीमेंट के फ़ॉन्ट आकार के सापेक्ष होती है। इसलिए, यदि पैरेंट एलीमेंट का फ़ॉन्ट आकार 16px है, तो 2.5em का मान 40px (16×2.5=40) होगा।

निम्नलिखित उदाहरण में, em में टेक्स्ट का आकार पिक्सेल में पिछले उदाहरण के समान ही है। हालाँकि, em इकाई उपयोगकर्ता को ब्राउज़र सेटिंग्स में टेक्स्ट का आकार समायोजित करने की अनुमति देती है।

Example
Set font sizes with em:

body {
  font-size: 16px; /* Base font size */
}

p {
  font-size: 1.8em; /* 1.8 * 16 = 30px */
}

h2 {
  font-size: 1.5em; /* 1.5 * 16 = 25px */
}

p {
  font-size: 1em; /* 1 * 16 = 16px */
}

उपरोक्त उदाहरण का आउटपुट इस प्रकार है –

This paragraph has 1.8em font size

This heading has 1.5em font size

This paragraph has 1em font size

Font Size With Rem

rem यूनिट मूल HTML एलीमेंट <html> के फॉन्ट आकार के सापेक्ष होती है।

em के विपरीत, जो अपने पैरेंट एलीमेंट के फ़ॉन्ट आकार के सापेक्ष होता है, rem हमेशा <html> एलीमेंट के फ़ॉन्ट आकार को संदर्भित करता है, चाहे दस्तावेज़ ट्री में उसकी स्थिति कुछ भी हो। यह rem को स्केलेबल और रिस्पॉन्सिव डिज़ाइन बनाने के लिए बहुत उपयोगी बनाता है। एलीमेंट के फ़ॉन्ट आकार को बदलने से, rem यूनिट्स वाले सभी एलीमेंट पूरे पृष्ठ में आनुपातिक रूप से स्केल हो जाएँगे।

ज़्यादातर ब्राउज़रों में एलिमेंट का डिफ़ॉल्ट फ़ॉन्ट-साइज़ 16px होता है। इसलिए, डिफ़ॉल्ट रूप से, 1rem 16px के बराबर होता है, जब तक कि CSS में इसे स्पष्ट रूप से ओवरराइड न किया गया हो।

Example
Set font sizes with rem:

html {
  font-size: 16px; /* Set the root font size */
}

p {
  font-size: 1.8rem; /* 1.8 * 16 = 30px */
}

h2 {
  font-size: 1.5rem; /* 1.5 * 16 = 25px */
}

p {
  font-size: 1rem; /* 1 * 16 = 16px */
}

The vw Unit

फ़ॉन्ट आकार को vw यूनिट, जिसका अर्थ है “viewport width”, से भी सेट किया जा सकता है।

  • vw यूनिट एक सापेक्ष यूनिट है जो व्यूपोर्ट की चौड़ाई के प्रतिशत को दर्शाती है।
  • 1vw = ब्राउज़र के व्यूपोर्ट की वर्तमान चौड़ाई का 1% है, इसलिए, यदि व्यूपोर्ट 600px चौड़ा है, तो 1vw = 6px होगा।
  • इस प्रकार, टेक्स्ट का आकार ब्राउज़र विंडो के आकार के अनुरूप होगा।
Example

h1 {
  font-size: 4vw;
}

h1 {
  font-size: 3vw;
}

p {
  font-size: 2vw;
}

उपरोक्त उदाहरण का आउटपुट इस प्रकार है –

This paragraph has 4vw font size

This heading has 3vw font size

This paragraph has 2vw font size

Google Fonts

अगर आप HTML में किसी भी स्टैन्डर्ड फ़ॉन्ट का इस्तेमाल नहीं करना चाहते, तो आप गूगल फ़ॉन्ट्स का इस्तेमाल कर सकते हैं। गूगल फ़ॉन्ट्स का इस्तेमाल मुफ़्त है और इसमें चुनने के लिए 1000 से ज़्यादा फ़ॉन्ट उपलब्ध हैं।

How To Use Google Fonts

Just add a special style sheet link in the <head></head> section and then refer to the font in the CSS.

Example 1
Here, we want to use a font named "Sofia" from Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>

Example 2
Here, we want to use a font named "Trirong" from Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", sans-serif;
}
</style>
</head>

Example 3
Here, we want to use a font named "Audiowide" from Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
Share This Page

Leave a Comment