वेब ब्राउज़र पर .ff फोंट का उपयोग करना

Question

मैं एक ऐसी वेबसाइट पर काम कर रहा हूं जिसके लिए फॉन्ट ट्रायल ऑनलाइन होना चाहिए, मेरे पास जो फोंट हैं वे सभी हैं

क्या फोंट एम्बेड करने और उन्हें सभी ब्राउज़रों पर काम करने का एक तरीका है?

यदि नहीं, तो मेरे पास और क्या विकल्प हैं?

Comments

हो सकता है कि जावास्क्रिप्ट को यहां टैग सूची से हटा दिया जाए?

— kzh

Answer 1

आप अपने OTFफॉन्ट को इस तरह लागू कर सकते हैं:

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

हालाँकि यदि आप आधुनिक ब्राउज़रों की एक विस्तृत विविधता का समर्थन करना चाहते हैं तो मैं आपको स्विच WOFFऔर TTFफ़ॉन्ट प्रकारों पर स्विच करने की सलाह दूंगा। WOFFटाइप हर बड़े डेस्कटॉप ब्राउज़र द्वारा कार्यान्वित किया जाता है, जबकि TTFपुराने सफारी, एंड्रॉइड और आईओएस ब्राउज़रों के लिए टाइपबैक है। यदि आपका फ़ॉन्ट एक स्वतंत्र फ़ॉन्ट है, तो आप एक ऑनलाइन fontconverter उदाहरण के लिए अपने फ़ॉन्ट को परिवर्तित कर सकते हैं ।

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

यदि आप लगभग हर ब्राउज़र का समर्थन करना चाहते हैं जो अभी भी बाहर है (अब और आवश्यक नहीं IMHO), तो आपको कुछ और फ़ॉन्ट-प्रकार जोड़ना चाहिए:

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

आप इस बारे में अधिक पढ़ सकते हैं कि इन सभी प्रकारों को क्यों लागू किया गया है और उनके हैक यहाँ हैं । कौन से फ़ाइल-प्रकार का समर्थन किस ब्राउज़र द्वारा किया जाता है, इसका विस्तृत दृश्य देखने के लिए:

@ फ़ॉन्ट-चेहरा ब्राउज़र समर्थन

ईओटी ब्राउज़र समर्थन

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

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

एसवीजी-फ़ॉन्ट्स ब्राउज़र समर्थन

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

Comments

यह लगभग सभी ब्राउज़रों पर पूरी तरह से ठीक काम करता है ... एकमात्र ब्राउज़र जो काम नहीं करता था वह है फ़ायरफ़ॉक्स लिनक्स ... उस एक के लिए कोई सुझाव ??

— नारुतो

ध्यान दें कि यदि आप इसे विंडोज सर्वर पर होस्ट कर रहे हैं, तो आपको एक मान्य और सर्व किए जाने वाले फाइलटाइप के रूप में .otf फिलाटाइप को जोड़ना होगा। यह देखने का एकमात्र तरीका यह है कि यह समस्या फ़ॉन्ट के लिंक का पालन करना है (यदि ऐसा है तो 404 त्रुटि)। परीक्षण के लिए आप अस्थायी रूप से .ttf या सम। Html का नाम बदल सकते हैं। IE द्वारा समर्थित एकमात्र वेब फॉन्ट WOFF प्रारूप है। (नहीं, इसके बारे में कभी नहीं सुना!)

— हेनरिक एर्लडसन

अरे, इस प्रकार के फ़ॉन्ट के प्रदर्शन के बारे में कैसे? अच्छी है? या अन्य बेहतर है?

— एंजी अजीज

क्या "कोड उदाहरण में उद्धरण ( ) गायब हैं?

— स्टीफेन

ओटीएफ की तरह लगता है अब लगभग बोर्ड भर में काम करना चाहिए caniuse.com/#search=otf

— Stephen

Answer 2

से गूगल फ़ॉन्ट निर्देशिका उदाहरण:

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

यह .ttf के साथ क्रॉस ब्राउजर पर काम करता है, मेरा मानना ​​है कि यह .otf के साथ काम कर सकता है। ( विकिपीडिया का कहना है .otf ज्यादातर .ttf के साथ पीछे की ओर संगत है) यदि नहीं, तो आप .otf को .ttf में बदल सकते हैं ।

यहाँ कुछ अच्छी साइटें हैं:

• अच्छा प्राइमर:

  http://www.alistapart.com/articles/cssatten

• अन्य सूचना:

  http://randsco.com/index.php/2009/07/04/p680