मैं वेब पृष्ठों में फ़ॉन्ट एम्बेड करने के लिए एक सभ्य समाधान (विशेषकर एसईओ की ओर से) जानने की कोशिश कर रहा हूं। अब तक मैंने W3C समाधान को देखा है , जो फ़ायरफ़ॉक्स पर भी काम नहीं करता है, और यह बहुत अच्छा समाधान है । दूसरा समाधान केवल शीर्षकों के लिए है। क्या पूर्ण पाठ के लिए कोई समाधान उपलब्ध है? मैं वेब पृष्ठों के लिए मानक फोंट से थक गया हूँ।
धन्यवाद!
जवाबों:
इस सवाल को मूल रूप से पूछे जाने और जवाब देने के बाद से चीजें बदल गई हैं। @ फॉन्ट-फेस एम्बेडिंग का उपयोग करके काम करने के लिए बॉडी टेक्स्ट के लिए क्रॉस-ब्राउजर फ़ॉन्ट एम्बेडिंग पर बड़ी मात्रा में काम किया गया है।
पॉल आयरिश ने एक साथ कई अन्य लोगों के प्रयासों को मिलाकर बुलेटप्रूफ @ फ़ॉन्ट-फेस सिंटैक्स डाला । यदि आप वास्तव में पूरे लेख (केवल शीर्ष नहीं) से गुजरते हैं तो यह IE, फ़ायरफ़ॉक्स, सफारी, ओपेरा, क्रोम और संभवतः अन्य को कवर करने के लिए एक एकल @ फ़ॉन्ट-फेस स्टेटमेंट की अनुमति देता है। मूल रूप से यह OTF, EOT, SVG और WOFF को उन तरीकों से खिला सकता है जो कुछ भी नहीं तोड़ते हैं।
उनके लेख से छीन लिया:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
उस आधार से कार्य करते हुए, फॉन्ट गिलहरी ने कई प्रकार के उपयोगी उपकरणों को एक साथ रखा , जिसमें @ फॉन्ट-फेस जेनरेटर शामिल है, जो आपको टीटीएफ या ओटीएफ फाइल अपलोड करने और पूर्व-निर्मित सीएसएस के साथ अन्य प्रकारों के लिए ऑटो-कन्वर्टेड फॉन्ट फाइल प्राप्त करने की अनुमति देता है। एक डेमो HTML पेज। Font Squirrel में सैकड़ों @ फॉन्ट-फेस किट भी हैं ।
सोमा डिज़ाइन ने FontFriend Bookmarklet को भी एक साथ रखा है , जो मक्खी पर एक पृष्ठ पर फोंट को फिर से परिभाषित करता है ताकि आप चीजों को आज़मा सकें। इसमें FireFox 3.6+ में ड्रैग-एंड-ड्रॉप @ फॉन्ट-फेस सपोर्ट शामिल है।
अभी हाल ही में, Google ने Google वेब फ़ॉन्ट्स प्रदान करना शुरू किया है , एक ओपन सोर्स लाइसेंस के तहत उपलब्ध फोंट का वर्गीकरण और Google के सर्वर से सेवा प्रदान की गई है।
लाइसेंस प्रतिबंध
अंत में, WebFonts.info ने लाइसेंस के आधार पर @ फॉन्ट-फेस एम्बेडिंग के लिए उपलब्ध फ़ॉन्ट्स की एक अच्छी विकि सूची सूचीबद्ध की है । यह एक संपूर्ण सूची होने का दावा नहीं करता है, लेकिन इस पर फोंट उपलब्ध होना चाहिए (संभवतः सीएसएस फ़ाइल में एट्रिब्यूशन जैसी शर्तों के साथ) एम्बेडिंग / लिंकिंग के लिए। लाइसेंस पढ़ना महत्वपूर्ण है , क्योंकि कुछ सीमाएँ हैं जिन्हें फ़ॉन्ट डाउनलोड पर स्पष्ट रूप से आगे नहीं बढ़ाया जाता है।
Facetype.js आज़माएं , आप अपने .TTF फ़ॉन्ट को जावास्क्रिप्ट फ़ाइल में रूपांतरित करें। पूर्ण एसईओ संगत, एफएफ, IE6 और सफारी का समर्थन करता है और अन्य ब्राउज़रों पर इनायत करता है।
नहीं, शरीर के प्रकार के लिए एक अच्छा समाधान नहीं है, जब तक कि आप केवल रक्तस्रावी किनारे वाले ब्राउज़रों को पूरा करने के लिए तैयार नहीं हैं।
Microsoft के पास WEFT , उनकी स्वयं की स्वामित्व वाली फ़ॉन्ट-एम्बेडिंग तकनीक है, लेकिन मैंने वर्षों में इसके बारे में बात नहीं की है, और मुझे पता है कि कोई भी इसका उपयोग नहीं करता है।
मुझे प्रदर्शन प्रकार (हेडलाइंस, ब्लॉग पोस्ट के शीर्षक इत्यादि) के लिए sIFR के साथ मिलता है और शरीर के प्रकार (जैसे ट्रेबुचेट एमएस) के लिए कम-पहनने वाले वेब-सुरक्षित फोंट में से एक का उपयोग करता है। यदि आप सभी वेब-सुरक्षित फोंट से ऊब चुके हैं, तो आप शायद इस शब्द को बहुत कम परिभाषित कर रहे हैं - स्टॉक फोंट के इस मैट्रिक्स को देखें कि प्रमुख OSes और संभावना के साथ जहाज आप एक फ़ॉन्ट कैस्केड ढूंढने में सक्षम होंगे जो होगा लगभग सभी वेब उपयोगकर्ताओं को पकड़ें।
उदाहरण के लिए: font-family: "Lucida Grande", "Verdana", sans-serifएक आम फ़ॉन्ट झरना है; ओएस एक्स लुसिडा ग्रांडे के साथ आता है, लेकिन विंडोज वाले लोगों को लुसिडा ग्रांडे के समान आकार और आकार के अक्षरों के साथ एक वेब-सुरक्षित फ़ॉन्ट वर्दाना मिलेगा। लिनक्स उपयोगकर्ता भी वेर्डाना प्राप्त करेंगे यदि उन्होंने वेब-सुरक्षित फोंट पैकेज स्थापित किया है जो कि अधिकांश डिस्ट्रोस पैकेज प्रबंधकों में मौजूद है, या फिर वे एक साधारण सेन्स-सेरिफ़ में वापस आ जाएंगे।
और यह भी संभावना नहीं है - ईओटी एक काफी प्रतिबंधात्मक प्रारूप है जो केवल आईई द्वारा समर्थित है। सफारी 3.1 और फ़ायरफ़ॉक्स 3.1 (अच्छी तरह से मौजूदा अल्फा) और संभवतः ओपेरा 9.6 सच टाइप फॉन्ट (ttf) एम्बेडिंग का समर्थन करते हैं, और कम से कम सफारी उसी तंत्र के माध्यम से एसवीजी फोंट का समर्थन करता है। इसके अलावा एक सूची में कुछ समय पहले इस बारे में अच्छी चर्चा हुई थी ।
टाइपेकिट की जाँच करेंएक व्यावसायिक विकल्प (उनके पास मुफ्त पैकेज भी उपलब्ध है)।
यह विभिन्न तकनीकों का उपयोग करता है जिसके आधार पर ब्राउज़र का उपयोग किया जा रहा है ( @font-faceबनाम EOTप्रारूप), और वे आपके लिए सभी फ़ॉन्ट लाइसेंसिंग मुद्दों का भी ध्यान रखते हैं। यह नीचे IE6 के लिए सब कुछ का समर्थन करता है।
यहां कुछ और जानकारी दी गई है कि टाइपेकिट कैसे काम करता है:
मैंने थोड़ी देर पहले यह पूछा । जवाब मूल रूप से यह काम नहीं करता है। :(