फ़ॉन्ट परीक्षण के लिए वेब ब्राउज़र में ओटीएफ फ़ॉन्ट एम्बेड करना

एक ऐसी वेबसाइट शुरू करना जिसके लिए ऑनलाइन फ़ॉन्ट परीक्षण की आवश्यकता होती है, एक डेवलपर एम्बेडिंग की चुनौती का सामना करता है। विभिन्न ब्राउज़रों में अनुकूलता सुनिश्चित करने के लिए ओटीएफ फ़ॉन्ट। @font-face CSS नियम लागू करने से, OTF फ़ॉन्ट एम्बेड करना संभव हो जाता है:

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

ब्राउज़र संगतता संबंधी विचार

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

• WOFF: प्रमुख डेस्कटॉप ब्राउज़रों के साथ संगत।
• TTF: पुराने के लिए फ़ॉलबैक सफ़ारी, एंड्रॉइड, और आईओएस ब्राउज़र। फ़ॉन्ट-परिवार: GraublauWeb; src: url("path/GraublauWebBold.woff") प्रारूप("woff"), url("path/GraublauWebBold.ttf") प्रारूप("truetype"); }

अधिकतम ब्राउज़र समर्थन

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

@font-face { फ़ॉन्ट-परिवार: GraublauWeb; src: url('webfont.eot'); /* IE9 कॉम्पैट मोड */ src: url("webfont.eot?#iefix") प्रारूप("एम्बेडेड-ओपनटाइप"), /* IE6-IE8 */ url("webfont.woff") प्रारूप("woff"), /* आधुनिक ब्राउज़र्स */ यूआरएल ("वेबफॉन्ट.ttf") प्रारूप ("ट्रूटाइप"), /* सफारी, एंड्रॉइड, आईओएस */ url('webfont.svg#svgFontName') प्रारूप('svg'); /* लीगेसी आईओएस */ }