CSS @font-face नियम

  • पिछला पृष्ठ
  • अगला पृष्ठ

वर्णन और उपयोग

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

@font-face नियम में, आपको पहले फ़ॉन्ट का नाम (उदाहरणतः myFirstFont) वर्णित करना होगा, फिर फ़ॉन्ट फ़ाइल के उपर इंद्रहार करें.

सूचना:फ़ॉन्ट के URL को छोटे अक्षरों से लिखें. बड़े अक्षरों का उपयोग IE में अनावश्यक परिणाम पैदा कर सकता है!

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

div {
  font-family: myFirstFont;
}

अन्य संदर्भ:

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

उदाहरण

एक "myFirstFont" नाम का फ़ॉन्ट निर्दिष्ट करें और इसका यूआरएल निर्दिष्ट करें:

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

अपने आप प्रयोग कीजिए

अधिक TIY उदाहरण विन्यास के लिए पाने के नीचे खोजें.

CSS व्याकरण

@font-face {
  font-properties
}
फ़ॉन्ट वर्णिका मूल्य वर्णन
font-family 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 वैकल्पिक।फ़ॉन्ट को समर्थन करने वाले Unicode अक्षर की दायरा को परिभाषित करें।मूवबन्धन "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" रखना आवश्यक है).

  • पिछला पृष्ठ
  • अगला पृष्ठ