मैं एक HTML साइट पर कस्टम फ़ॉन्ट कैसे स्थापित करूं

153

मैं फ्लैश या php का उपयोग नहीं कर रहा हूं - और मुझे सरल HTML लेआउट में एक कस्टम फ़ॉन्ट जोड़ने के लिए कहा गया है। "केजी जून बग"

मैंने इसे स्थानीय रूप से डाउनलोड किया है - क्या इसे पूरा करने के लिए एक सरल सीएसएस चाल है?

— एडम
स्रोत

276

हां, आप @ font-face नाम के CSS फीचर का उपयोग कर सकते हैं। यह केवल आधिकारिक तौर पर CSS3 में अनुमोदित किया गया है, लेकिन CSS2 में प्रस्तावित और कार्यान्वित किया गया है और काफी लंबे समय से IE में समर्थित है।

आप इसे सीएसएस में इस तरह घोषित करते हैं:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

फिर, आप इसे अन्य मानक फोंट की तरह ही संदर्भित कर सकते हैं:

 h3 { font-family: Delicious, sans-serif; }

तो, इस मामले में,

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

और आपको बस उसी स्थान पर JUNEBUG.TFF को html फ़ाइल के रूप में डालना होगा।

मैंने dafont.com वेबसाइट से फ़ॉन्ट डाउनलोड किया :

http://www.dafont.com/junebug.font

— निकोलस मोदज़िंक
स्रोत

1

खेद है कि अगर यह "होमवर्क" है तो कोड क्या होगा यदि मैंने इस सादे पाठ के लिए इस JUNEBUG फ़ॉन्ट का उपयोग किया

— adam

मुझे नहीं पता था कि आप ऐसा कर सकते हैं। क्या यह अन्य ब्राउज़रों में भी काम करता है?

— जूलियन बॉरडॉन

1

किसी भी सभ्य ब्राउज़र में काम करता है: webfonts.info/wiki/index.php?title=@font-face_browser_support

— निकोलस मोद्रज़ीक

मेरे लिए काम नहीं करता है, मेरा फ़ॉन्ट मेरे php पृष्ठ के समान फ़ोल्डर में है।

— ब्लैक '

1

@Black पथ निर्दिष्ट urlहै जहाँ आपकी सीएसएस फ़ाइल के सापेक्ष है ।

— एलेक्स सेमेनिउक

17

सर्वोत्तम संभव ब्राउज़र समर्थन के लिए, आपका सीएसएस कोड इस तरह दिखना चाहिए:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

अधिक जानकारी के लिए, CSS-tricks.com पर लेख @ फॉन्ट-फेस का उपयोग करके देखें ।

— जॉन सेलर्स
स्रोत

17

आप अधिकांश आधुनिक ब्राउज़रों में @ फ़ॉन्ट-फेस का उपयोग कर सकते हैं।

यहाँ कुछ लेख है कि यह कैसे काम करता है:

अपने ऐप में फ़ॉन्ट जोड़ने के लिए यहां एक अच्छा वाक्यविन्यास है:

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

यहाँ फोंट को @ फॉन्ट-फेस के साथ उपयोग के लिए बदलने के लिए कुछ स्थान दिए गए हैं:

यदि आप फॉन्ट-फेस का उपयोग नहीं करना चाहते हैं, तो भी क्यूफॉन काम करेगा, और इसका वेब साइट पर अच्छा प्रलेखन है:

http://cufon.shoqolate.com/generate/

— nheinrich
स्रोत

9

इसे इस्तेमाल करे

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}

 <div class="FontMarket">KhonKaen Market</div>

स्निपेट का विस्तार करें

vilis.org

— SIAMWEBSITE
स्रोत

4

यदि आप बाहरी शैली की शीट का उपयोग कर रहे हैं, तो कोड कुछ इस तरह दिख सकता है:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

और एक अलग .css फ़ाइल (जैसे style.css) में सहेजा जाना चाहिए। यदि आपकी .css फ़ाइल पृष्ठ कोड से अलग स्थान पर है, तो वास्तविक फ़ॉन्ट फ़ाइल में .css फ़ाइल, NOT .HTML या .php वेब पेज फ़ाइल के समान पथ होना चाहिए। फिर वेब पेज को कुछ इस तरह की जरूरत है:

<link rel="stylesheet" href="css/styles.css">

अपने HTML पृष्ठ के <head> अनुभाग में। इस उदाहरण में, फ़ॉन्ट फ़ाइल को स्टाइलशीट के साथ सीएसएस फ़ोल्डर में स्थित होना चाहिए। इसके बाद, बस उस तत्व में Junebug फ़ॉन्ट का उपयोग करने के लिए अपने html में किसी भी टैग के अंदर वर्ग = "junebug" जोड़ें।

यदि आप वास्तविक वेब पेज में css डाल रहे हैं, तो html के सिर में शैली टैग जोड़ें:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

और वास्तविक तत्व शैली या तो ऊपर <style>या तत्व के अनुसार कक्षा या आईडी द्वारा शामिल की जा सकती है , या आप तत्व के साथ शैली को इनलाइन घोषित कर सकते हैं। तत्व से मेरा मतलब है <div>, <p>, <h1> या html के भीतर कोई अन्य तत्व जिसे Junebug फ़ॉन्ट का उपयोग करने की आवश्यकता है। इन दोनों विकल्पों के साथ, फ़ॉन्ट फ़ाइल (Junebug.ttf) को html पृष्ठ के समान पथ में स्थित होना चाहिए। इन दो विकल्पों में से, सबसे अच्छा अभ्यास इस तरह दिखेगा:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

तथा

<h1 class="junebug">This is Junebug</h1>

और कम से कम स्वीकार्य तरीका होगा:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

तथा

<h1 style="font-family: Junebug;">This is Junebug</h1>

इनलाइन शैलियों का उपयोग करने के लिए अच्छा नहीं होने का कारण यह है कि सबसे अच्छा अभ्यास यह निर्धारित करता है कि शैलियों को सभी एक ही स्थान पर रखा जाना चाहिए ताकि संपादन व्यावहारिक हो। यह भी मुख्य कारण है कि मैं बाहरी स्टाइल शीट का उपयोग करने के पहले विकल्प का उपयोग करने की सलाह देता हूं। आशा है कि ये आपकी मदद करेगा।

— रिचर्ड स्टिट्ज
स्रोत

-1

ऐसा करने का एक सरल तरीका है: html फ़ाइल ऐड में:

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

नोट: आपके पास .ttf फ़ाइल का नाम है। फिर अपनी सीएसएस फ़ाइल में जाएं और जोड़ें:

h1 {
    color: blue;
    font-family: vermin vibes;
}

नोट: आप अपने पास मौजूद फ़ॉन्ट का फ़ॉन्ट परिवार नाम रख सकते हैं।

नोट: फ़ॉन्ट-परिवार का नाम अपने font.ttf नाम उदाहरण के रूप में न लिखें: यदि आपका font.ttf नाम है: "vermin_vibes.ttf" तो आपका फ़ॉन्ट-परिवार होगा: "वर्मिन वाइब्स" फ़ॉन्ट परिवार विशेष वर्ण नहीं करता है "-, _" ... आदि के रूप में इसमें केवल रिक्त स्थान हो सकते हैं।

— अब्बास शरारा
स्रोत

आपको वास्तव font-faceमें ttf फ़ाइल की आवश्यकता के बजाय इसे CSS में परिभाषित करना चाहिए ।

— अर्कथ

ऐसा करने की आवश्यकता नहीं है इसलिए आप इसे बस इस तरह से कर सकते हैं मैं हमेशा इसे दो तरीकों से करता

— हूं

@Arcath फ़ॉन्ट-फेस का उपयोग करना बेहतर क्यों है?

— एंटोनियो अरूजो