दिलचस्प पोस्ट

सीएसएस का उपयोग कस्टम फ़ॉन्ट का उपयोग करना?

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

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

किसी से ऐसा कैसे संभव है? जबकि लोगों को फ़ॉन्ट डाउनलोड करने के लिए निःशुल्क पहुंच प्राप्त करने से रोकना है, यदि संभव हो तो

वेब के समाधान से एकत्रित समाधान "सीएसएस का उपयोग कस्टम फ़ॉन्ट का उपयोग करना?"

आम तौर पर, आप अपने सीएसएस में @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 आपका चयनकर्ता है)।

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

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

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

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

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

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

Fe मैं अपने वेब अनुप्रयोग में Yanone Kaffeesatz फ़ॉन्ट का उपयोग कर रहा हूँ

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

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

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

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

 @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'); } 

यहां से लिया गया

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

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

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

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

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

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

अपने टीटीएफ फोंट को वफ़्फ़ में बदलने से पहले यहां जाएं

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

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

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

  • ईओई केवल आईई है,
  • टीटीएफ का आंशिक 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; }