अपना फ़ॉन्ट चुनें। उदाहरण के लिए मैं "Stint Ultra Expanded" ले जाऊंगा। वहाँ उदाहरण के अपने पेज में जोड़ने के लिए कैसे:
<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>
केवल href ले लो और ब्राउज़र में खोलें। आप इस तरह ख़ाली देखेंगे:
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: local('Stint Ultra Expanded'), local('StintUltraExpanded-Regular'), url(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}
src संपत्ति से url मूल्य के पहले पैरामीटर ले लो (http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw। woff)।
इस फ़ाइल को डाउनलोड करें।
फ़ाइलनाम (स्टिंट अल्ट्रा विस्तारित)
आसान तरीका यह डाउनलोड करने के लिए है के रूप में localsrc का मूल्य संपत्ति का पैरामीटर का प्रयोग करें wget उपयोग कर रहा है:
wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff
अब सीएसएस फ़ाइल बनाने और सामग्री जोड़ने कि आपने पहले देखा है लेकिन आपको src संपत्ति का मूल्य बदलना होगा। सभी local एस हटाएं और url समायोजित करें। यह इस तरह ख़ाली होना चाहिए:
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: url('../fonts/Stint Ultra Expanded.woff') format('woff');
}
अब विस्तार करने के लिए अपने सीएसएस फ़ाइल जोड़ने और फ़ॉन्ट का उपयोग करें: आप करना चाहते हैं
popup.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='css/fonts.css' rel='stylesheet' type='text/css'>
</head>
<body>
<span style="font-family: 'Stint Ultra Expanded';">Hello Font</span>
</body>
</html>
इस फ़ॉन्ट का उपयोग content_script में करें, आपको अपने सीएसएस में url समायोजित करना होगा:
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: url('chrome-extension://[email protected]@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff');
}
आप अपने सीएसएस में जितना चाहें उतने @font-face नियम जोड़ सकते हैं।
नोटिस: localsrc संपत्ति में मूल्य आपको बताता है कि इसे संग्रहीत करने के लिए किस नाम का उपयोग किया जाना चाहिए। इस नाम का उपयोग करना अच्छा विचार है।
दूसरा नोटिस: यदि आप इसका उपयोग Google की अपेक्षा करते हैं, तो आपका ब्राउज़र जांच करेगा कि यह फ़ॉन्ट पहले से ही स्थानीय है या नहीं। यदि यह मामला नहीं है, तो यह डाउनलोड और संग्रहीत किया जाएगा। तो अगली बार यह पहले से संग्रहीत फ़ॉन्ट का उपयोग करेगा।
क्रोम 37 (शायद पहले), आप एक्सटेंशन के मेनिफेस्ट में एक वेब सुलभ संसाधन के रूप में फॉन्ट का उल्लेख करने की जरूरत के रूप में:
Denying load of chrome-extension://{ID}/font/My Web Font.woff2.
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
इस संकुल क्षुधा के लिए काम नहीं करता। 'web_accessible_resources' केवल एक्सटेंशन, होस्ट किए गए ऐप्स और विरासत पैकेज किए गए ऐप्स के लिए ही अनुमति है, लेकिन यह एक पैक किया गया ऐप है। –
मुझे यह तरीका मेरे क्रोम एक्सटेंशन के पॉपअप में काम करने के लिए प्रतीत नहीं होता। – offthat
यह सच है कि 'web_accessible_resources' को केवल एक्सटेंशन के लिए अनुमति है, लेकिन फ़ॉन्ट को डाउनलोड और एकीकृत करना (जैसा कि उत्तर के पहले भाग में वर्णित है) पैक किए गए ऐप्स में ठीक काम करता है। – schellmax