जवाबों:
Woff फ़ाइलों की पीढ़ी के बाद, आपको फ़ॉन्ट-परिवार को परिभाषित करना होगा, जिसे बाद में आपके सभी सीएसएस शैलियों में उपयोग किया जा सकता है। नीचे फ़ॉन्ट परिवारों को परिभाषित करने के लिए कोड है (सामान्य, बोल्ड, बोल्ड-इटैलिक, इटैलिक) टाइपफेस। यह माना जाता है, कि fontsउपनिर्देशिका में रखी गई 4 * .woff फाइलें (उल्लिखित टाइपफेस के लिए) हैं ।
सीएसएस कोड में:
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font.woff") format('woff');
}
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font-bold.woff") format('woff');
font-weight: bold;
}
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font-boldoblique.woff") format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "myfont";
src: url("fonts/awesome-font-oblique.woff") format('woff');
font-style: italic;
}उस परिभाषा के होने के बाद, आप उदाहरण के लिए लिख सकते हैं,
HTML कोड में:
<div class="mydiv">
<b>this will be written with awesome-font-bold.woff</b>
<br/>
<b><i>this will be written with awesome-font-boldoblique.woff</i></b>
<br/>
<i>this will be written with awesome-font-oblique.woff</i>
<br/>
this will be written with awesome-font.woff
</div>सीएसएस कोड में:
.mydiv {
font-family: myfont
}पीढ़ी के woff फ़ाइलों के लिए अच्छा उपकरण, जिसे CSS स्टाइलशीट में शामिल किया जा सकता है, यहाँ स्थित है । सभी फ़ायरफ़ॉक्स फ़ाइलें नवीनतम फ़ायरफ़ॉक्स संस्करणों के तहत सही ढंग से काम नहीं करती हैं, और यह जनरेटर 'सही' फोंट का उत्पादन करता है।
आपको @font-faceअपनी स्टाइलशीट में इस तरह की घोषणा करने की आवश्यकता है
@font-face {
font-family: 'Awesome-Font';
font-style: normal;
font-weight: 400;
src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}अब यदि आप इस फॉन्ट को एक पैराग्राफ में लागू करना चाहते हैं तो बस इसे इस तरह उपयोग करें ..
p {
font-family: 'Awesome-Font', Arial;
}