CSS का उपयोग करके कस्टम फोंट का उपयोग करना?

Question

मैंने कुछ नई वेबसाइटें देखी हैं जो अपनी साइटों (नियमित एरियल, ताहोमा, आदि के अलावा) पर कस्टम फोंट का उपयोग कर रही हैं।

और वे अच्छी मात्रा में ब्राउज़रों का समर्थन करते हैं।

किसी से ऐसा कैसे संभव है? यदि संभव हो तो फ़ॉन्ट डाउनलोड करने के लिए लोगों को मुफ्त में जाने से भी रोक सकता है।

Comments

जावास्क्रिप्ट प्रतिस्थापन जैसेcufon

— tq

Fontsquirrel.com , google.com/webfonts , आदि

— j08691

Answer 1

आम तौर पर, आप @font-faceअपने सीएसएस में कस्टम फ़ॉन्ट का उपयोग कर सकते हैं । यहाँ एक बहुत ही बुनियादी उदाहरण दिया गया है:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

फिर, एक विशिष्ट तत्व पर फ़ॉन्ट का उपयोग करने के लिए, तुच्छ:

.classname {
    font-family: 'YourFontName';
}

( .classnameआपका चयनकर्ता है)

ध्यान दें कि कुछ फ़ॉन्ट-प्रारूप सभी ब्राउज़रों पर काम नहीं करते हैं; आप बहुत अधिक प्रयास करने से बचने के लिए fontquirrel.com के जनरेटर का उपयोग कर सकते हैं ।

आप Google फ़ॉन्ट्स द्वारा प्रदान किए गए नि: शुल्क वेब-फोंट का एक अच्छा सेट पा सकते हैं (जिसमें स्वत: उत्पन्न सीएसएस @font-faceनियम भी हैं, इसलिए आपको अपना स्वयं का लिखना नहीं है)।

यदि संभव हो तो फ़ॉन्ट डाउनलोड करने के लिए लोगों को मुफ्त में जाने से भी रोक सकता है

नहीं, यह आपके पाठ को स्टाइल करना संभव नहीं है, जबकि कस्टम फ़ॉन्ट सीएसएस के माध्यम से एम्बेड किया जाता है, जबकि लोगों को इसे डाउनलोड करने से रोकता है। आपको छवियों, फ्लैश या एचटीएमएल 5 कैनवस का उपयोग करने की आवश्यकता है, जो सभी बहुत व्यावहारिक नहीं हैं।

मुझे आशा है कि मदद की!

Comments

शानदार विस्तृत उत्तर के लिए धन्यवाद। क्या मैं पूछ सकता हूं कि क्या पुराने ब्राउज़रों के लिए भी इस तरह का दृष्टिकोण काम करता है? जैसे .. IE8 / 7/6? और वैसे, क्या Google Webfonts पर प्रदर्शित सभी फोंट व्यावसायिक उपयोग के लिए मुफ्त हैं?

— रेड

@Don @font-faceसभी यथोचित नए ब्राउज़रों के साथ काम करता है, लेकिन आपको सही प्रारूप होने चाहिए; इसीलिए मैंने रूपांतरण और नियम-निर्माण की प्रक्रिया को स्वचालित करने के लिए Fontsquirrel.com का उपयोग करने की सिफारिश की है । और हाँ, Google Webfonts व्यावसायिक उपयोग के लिए स्वतंत्र है ( अधिक जानकारी के लिए थोड़ा लिंक )।

— क्रिस

@Chris, छोड़ते हुए है font-style:और font-weight:अपने में @font-faceघोषणा किसी भी मानकों का उल्लंघन कर?

— पचेरियर

यह काम करने के लिए मुझे format('truetype')स्रोत URL और के बीच जोड़ना पड़ा ;।

— कैलकुलेटर

हेलो क्रिस। क्या आप जानते हैं कि इस फ़ॉन्ट का उपयोग कैसे करें? fontmarket.com/font-download/gothic-821-condensed-bt

— बिलल बेगेरदज

Answer 2

यह सुनिश्चित करने के लिए कि आपका फ़ॉन्ट क्रॉस-ब्राउज़र संगत है, सुनिश्चित करें कि आप इस सिंटैक्स का उपयोग करते हैं:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

यहां से ले गए ।

Answer 3

आपको फ़ॉन्ट फ़ाइल डाउनलोड करनी होगी और इसे अपने सीएसएस में लोड करना होगा।

Fe मैं अपने वेब एप्लिकेशन में यानोन काफ़िज़ेट फ़ॉन्ट का उपयोग कर रहा हूं ।

मैं इसे लोड करता हूं और इसके माध्यम से उपयोग करता हूं

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

मेरी स्टाइलशीट में।

Answer 4

आज वेब पर उपयोग में चार फ़ॉन्ट कंटेनर प्रारूप हैं: EOT, TTF, WOFF,औरWOFF2.

दुर्भाग्य से, विकल्पों की एक विस्तृत श्रृंखला के बावजूद, एक भी सार्वभौमिक प्रारूप नहीं है जो सभी पुराने और नए ब्राउज़रों में काम करता है:

• EOT केवल IE है,
• TTF में आंशिक IE समर्थन है,
• WOFF को व्यापक समर्थन प्राप्त है, लेकिन कुछ पुराने ब्राउज़रों में उपलब्ध नहीं है
• WOFF 2.0 समर्थन कई ब्राउज़रों के लिए प्रगति पर काम है।

यदि आप चाहते हैं कि आपका वेब ऐप सभी ब्राउज़रों में एक ही फॉन्ट हो तो आप सीएसएस में सभी 4 फॉन्ट प्रकार प्रदान करना चाह सकते हैं

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

Comments

हाय हितेश। क्या मैं पूछ सकता हूं कि इसका क्या उपयोग है #iefix? और यह हिस्सा font-family: 'besom'; !important, !importantबाहर है ;?

— जोन्जी

Answer 5

अगर आपको Google.com/webfonts या fontquirrel.com से कोई भी फोंट पसंद नहीं है, तो आप हमेशा अपने खुद के वेब फॉन्ट को आपके द्वारा बनाए गए फॉन्ट से बना सकते हैं।

यहाँ एक अच्छा ट्यूटोरियल है: अपना स्वयं का फ़ॉन्ट फेस वेब फ़ॉन्ट किट बनाएं

हालांकि किसी को अपने फॉन्ट को डाउनलोड करने से रोकने के बारे में निश्चित नहीं है।

उम्मीद है की यह मदद करेगा,

Answer 6

CUFON नामक एक दिलचस्प उपकरण भी है । इस ब्लॉग में इसका उपयोग करने का एक प्रदर्शन है यह वास्तव में सरल और दिलचस्प है। साथ ही, यह लोगों को उत्पन्न सामग्री को ctrl + c / ctrl + v करने की अनुमति नहीं देता है।

Answer 7

मैं विन 8 पर काम कर रहा हूं, इस कोड का उपयोग करें। यह IE और FF, ओपेरा, आदि के लिए काम करता है जो मुझे समझ में आया है: woff फ़ॉन्ट Google फोंट पर हल्का एट आम है।

इससे पहले अपने ttf फ़ॉन्ट को woff में बदलने के लिए यहां जाएं ।

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

Answer 8

सबसे पहले, आप लोगों को फोंट डाउनलोड करने से नहीं रोक सकते हैं, सिवाय इसके कि यह आपका है और आमतौर पर इसमें महीनों लगते हैं। और यह फोंट का उपयोग करने से लोगों को रोकने के लिए कोई मतलब नहीं है। बहुत सारे फोंट जो आप वेबसाइटों पर देखते हैं, उन्हें नि: शुल्क प्लेटफार्मों पर पाया जा सकता है, जैसे कि मैंने नीचे उल्लेख किया है।

लेकिन अगर आप अपनी वेबसाइट में एक फ़ॉन्ट लागू करना चाहते हैं तो इसे पढ़ें: अपनी वेबसाइट में फ़ॉन्ट को लागू करने का एक बहुत ही सरल और मुफ्त तरीका है। मैं Google फोंट की सिफारिश करूंगा क्योंकि यह मुफ्त और उपयोग में आसान है। उदाहरण के लिए, मैं Google से बैंगर्स फ़ॉन्ट का उपयोग करूंगा। ( https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) यह इस तरह दिखाई देगा: HTML

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

सीएसएस

body {
font-family: 'Bangers', cursive;
}