CSS @font-face नियम

परिभाषा और उपयोग

@font-face नियम का उपयोग करके, Web डिजाइनरों को अब किसी "सुरक्षित" फ़ॉन्ट का उपयोग करने की आवश्यकता नहीं है।

@font-face नियम में आपको पहले फ़ॉन्ट का नाम (उदाहरण के लिए myFirstFont) परिभाषित करना होगा और फ़ॉन्ट फ़ाइल को इंद्रियकरण करें।

सूचना:फ़ॉन्ट के URL को छोटे अक्षरों से लिखें। बड़े अक्षर आईई में अपशिष्ट परिणाम पैदा कर सकते हैं!

फ़ॉन्ट को HTML एलिमेंट के लिए उपयोग करने के लिए font-family गुण के द्वारा फ़ॉन्ट का नाम (myFirstFont) उद्धृत करें:

div {
  font-family: myFirstFont;
}

अन्य देखें:

CSS शिक्षण:CSS वेब-फ़ॉन्ट

उदाहरण

एक "myFirstFont" नाम का फ़ॉन्ट निर्दिष्ट करें और इसका दिशा URL निर्दिष्ट करें:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

खुद एक प्रयोग कीजिए

अधिक TIY उदाहरणों को पृष्ठ के नीचे ढूंढें।

CSS व्याकरण

@font-face {
  font-properties
}
फ़ॉन्ट वर्णनकर्ता मूल्य वर्णन
फ़ॉन्ट-फैमिली name लाजमी। फ़ॉन्ट के नाम को परिभाषित करें。
src URL लाजमी। डाउनलोड किए जाने वाले फ़ॉन्ट के URL को परिभाषित करें。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 वृद्धि. फ़ॉन्ट को कैसे फैलाना चाहिए इसे निर्धारित करता है। डिफ़ॉल्ट मूल्य "normal" है。
font-style
  • normal
  • italic
  • oblique
 वृद्धि. फ़ॉन्ट के शैली को निर्धारित करता है। डिफ़ॉल्ट मूल्य "normal" है。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 वृद्धि. फ़ॉन्ट की मोटाई को निर्धारित करता है। डिफ़ॉल्ट मूल्य "normal" है。
unicode-range unicode-range वृद्धि. डिफ़ॉल्ट मूल्य "U+0-10FFFF" है。

और अधिक उदाहरण

उदाहरण

आपको एक अन्य @font-face नियम जोड़ना होगा, जिसमें बोल्ड टेक्स्ट के वर्णनकर्ता है:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

खुद एक प्रयोग कीजिए

फ़ाइल "sansation_bold.woff" एक अन्य फ़ॉन्ट फ़ाइल है, जिसमें Sansation फ़ॉन्ट के बोल्ड अक्षर हैं。

जब फ़ॉन्ट परिवार "myFirstFont" के एक लेख को बोल्ड प्रस्तुत करना चाहिए तो, ब्राउज़र इसे उपयोग करेगा。

इस तरह, आप एक ही फ़ॉन्ट के लिए कई @font-face नियम सेट कर सकते हैं。

ब्राउज़र समर्थन

Internet Explorer, Firefox, Opera, Chrome और Safari @font-face नियम का समर्थन करते हैं。

तालिका में दिए गए नंबर को फ़ॉन्ट फॉर्मेट के पूर्ण समर्थन वाले पहले ब्राउज़र के संस्करण के रूप में दिया गया है。

फ़ॉन्ट फॉर्मेट
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG समर्थित नहीं समर्थित नहीं समर्थित नहीं 3.2 समर्थित नहीं
EOT 6.0 समर्थित नहीं समर्थित नहीं समर्थित नहीं समर्थित नहीं

* Edge और IE: फ़ॉन्ट फॉर्मेट केवल "installable" सेट किया गया होने पर ही वैध है

* Firefox: मूवल रूप से निष्क्रिय है, लेकिन सक्षम किया जा सकता है (WOFF2 को उपयोग करने के लिए flag को "true" सेट करना आवश्यक है).