मैं वेब पेजों में फोंट एम्बेड करने के लिए एक सभ्य समाधान (विशेष रूप से एसईओ पक्ष से) को समझने की कोशिश कर रहा हूं। अब तक मैंने the W3C solution देखा है, जो फ़ायरफ़ॉक्स पर भी काम नहीं करता है, और this pretty cool solution। दूसरा समाधान केवल शीर्षक के लिए है। क्या पूर्ण पाठ के लिए कोई समाधान उपलब्ध है? मैं वेब पृष्ठों के लिए मानक फोंट से थक गया हूँ।एचटीएमएल में फोंट कैसे एम्बेड करें?
धन्यवाद!
चीजें बदल गई हैं क्योंकि इस सवाल को मूल रूप से पूछा गया था और उत्तर दिया गया था। @ Font-face एम्बेडिंग का उपयोग करके कार्य करने के लिए बॉडी टेक्स्ट के लिए क्रॉस-ब्राउज़र फ़ॉन्ट एम्बेड करने पर बड़ी मात्रा में काम किया गया है।
पॉल आयरिश एक साथ रखे Bulletproof @font-face syntax कई अन्य लोगों के प्रयासों को मिलाकर। यदि आप वास्तव में पूरे लेख (केवल शीर्ष पर नहीं) के माध्यम से जाते हैं तो यह आईई, फ़ायरफ़ॉक्स, सफारी, ओपेरा, क्रोम और संभवतः अन्य लोगों को कवर करने के लिए एक @ फ़ॉन्ट-फेस स्टेटमेंट की अनुमति देता है। असल में यह ओटीएफ, ईओटी, एसवीजी और डब्ल्यूओएफएफ को ऐसे तरीकों से खिला सकता है जो कुछ भी नहीं तोड़ते हैं।
@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");
}
कि आधार, Font Squirrel एक साथ @font-face Generator जो आपको एक TTF या OTF फ़ाइल अपलोड करें और के लिए स्वतः रूपांतरित फ़ॉन्ट फ़ाइलें प्राप्त करने के लिए अनुमति देता है सहित उपयोगी उपकरणों की एक किस्म डाल से कार्य करना:
अपने लेख से कतरना पूर्व-निर्मित सीएसएस और डेमो एचटीएमएल पेज के साथ अन्य प्रकार। फ़ॉन्ट गिलहरी में भी Hundreds of @font-face kits है।
सोमा डिज़ाइन ने FontFriend Bookmarklet को एक साथ रखा, जो फ्लाई पर किसी पृष्ठ पर फोंट को फिर से परिभाषित करता है ताकि आप चीजों को आजमा सकें। इसमें फ़ायरफ़ॉक्स 3.6+ में ड्रैग-एंड-ड्रॉप @ फ़ॉन्ट-फेस समर्थन शामिल है।
हाल ही में, Google ने ओपन सोर्स लाइसेंस के तहत उपलब्ध फ़ॉन्ट्स का वर्गीकरण Google Web Fonts प्रदान करना शुरू कर दिया है और Google के सर्वर से सेवा प्रदान की है।
लाइसेंस प्रतिबंध
अंत में, WebFonts.info एक साथ Fonts available for @font-face embedding का एक अच्छा wiki'd सूची लाइसेंस के आधार पर दिया है। यह एक विस्तृत सूची होने का दावा नहीं करता है, लेकिन एम्बेडिंग/लिंकिंग के लिए इसके पर फोंट उपलब्ध हो सकते हैं (संभावित रूप से सीएसएस फ़ाइल में एट्रिब्यूशन जैसी स्थितियों के साथ)। लाइसेंस को पढ़ना महत्वपूर्ण है, क्योंकि कुछ सीमाएं हैं जिन्हें स्पष्ट रूप से फ़ॉन्ट डाउनलोड पर आगे नहीं धकेल दिया जाता है।
मुझे लगता है कि यह जोर देने योग्य है कि आपको स्वचालित रूप से फ़ॉन्ट और @ फ़ॉन्ट-फेस-इज़ लेने की अनुमति नहीं है, भले ही आपने कानूनी रूप से और बहुत सारे पैसे के लिए उस फ़ॉन्ट का लाइसेंस खरीदा हो। आपको इस तरह के इलेक्ट्रॉनिक पुन: वितरण की अनुमति है या नहीं, इसके लिए आपको फ़ॉन्ट का लाइसेंस जांचना होगा। उल्लंघनों का पता लगाना और पता लगाना इतना आसान है कि अन्यथा आसानी से परेशानी हो सकती है, खासकर अगर आप सही क्षेत्राधिकार में स्थित कंपनी हैं। –
FontSquirrel इसकी पूर्व-निर्मित फ़ॉन्ट किट और इसके जनरेटर में दोनों का एक स्पष्ट बिंदु बनाता है (जिसके लिए आपको यह सत्यापित करने की आवश्यकता है कि फोंट वास्तव में इस तरह के उपयोग के लिए लाइसेंस प्राप्त हैं)। वहाँ अन्य रूपांतरण उपकरण हैं, लेकिन मुझे नहीं पता कि कौन से लाइसेंसिंग पर चर्चा करने का मुद्दा बनाते हैं। – fencepost
मैंने अपनी प्रतिक्रिया में यह स्पष्ट करने के लिए संशोधित किया। – fencepost
और यह भी असंभव है - ईओटी एक काफी प्रतिबंधित प्रारूप है जो केवल आईई द्वारा समर्थित है। सफारी 3.1 और फ़ायरफ़ॉक्स 3.1 (अच्छी तरह से वर्तमान अल्फा) और संभवतः ओपेरा 9.6 सच्चा प्रकार फ़ॉन्ट (टीटीएफ) एम्बेडिंग का समर्थन करता है, और कम से कम सफारी उसी तंत्र के माध्यम से एसवीजी फोंट का समर्थन करता है। एक सूची के अलावा इस समय back के बारे में अच्छी चर्चा हुई थी।
अरे, मैं उस लिंक को पोस्ट करने वाला था, इसके बजाय ऊपर की ओर। – Kris
नहीं, नहीं शरीर के प्रकार के लिए एक सभ्य समाधान, जब तक आप ब्लीडिंग-एज ब्राउज़रों के साथ उन लोगों के लिए केवल पूरा करने के लिए तैयार हैं।
माइक्रोसॉफ्ट WEFT है, अपने स्वामित्व फ़ॉन्ट एम्बेडिंग प्रौद्योगिकी , लेकिन मैंने यह वर्षों में बात नहीं की है, और मुझे इसका कोई भी पता नहीं है।
मुझे डिस्प्ले प्रकार (हेडलाइंस, ब्लॉग पोस्ट के शीर्षक आदि) के लिए एसआईएफआर के साथ मिलता है और इनमें से एक का उपयोग करना शरीर के प्रकार (जैसे ट्रेबुचेट एमएस) के लिए कम पहने हुए वेब-सुरक्षित फोंट। यदि आप सभी वेब-सुरक्षित फ़ॉन्ट्स से ऊब गए हैं, तो आप शायद इस शब्द को बहुत कम परिभाषित कर रहे हैं - this matrix of stock fonts पर देखें जो प्रमुख ओएस के साथ जहाज है और संभावना है कि आप ' एक फ़ॉन्ट कैस्केड खोजने में सक्षम हो जाएगा जो लगभग सभी वेब उपयोगकर्ताओं को पकड़ लेगा।
उदाहरण के लिए: font-family: "Lucida Grande", "Verdana", sans-serif एक आम फ़ॉन्ट कैस्केड है; ओएस एक्स लुसीडा ग्रांडे के साथ आता है, लेकिन विंडोज़ वाले लोगों को वर्डाना, एक वेब-सुरक्षित फ़ॉन्ट मिलेगा, जो ल्यूसिडा ग्रांडे के समान आकार और आकार के अक्षरों के साथ होगा। लिनक्स उपयोगकर्ताओं को वेरदाना भी मिलेगा यदि उन्होंने वेब-सुरक्षित फोंट पैकेज स्थापित किया है जो अधिकांश डिस्ट्रोज़ पैकेज प्रबंधक में मौजूद है, अन्यथा वे सामान्य सैन्स-सेरिफ़ में वापस आ जाएंगे।
मुझे भी एक मिनट के लिए सोपबॉक्स पर खड़ा करते हैं: हालांकि मैं इच्छा विंडोज था अधिक "अच्छा" फोंट (ओएस एक्स टाइपोग्राफी इतिहास की सबसे बड़ी हिट है: Futura, Helvetica, गिल संस, आदि), यह एक अच्छी बात है कि हम फोंट उठाते समय खुद को रोकना होगा। बुराई के लिए भी स्वतंत्रता का उपयोग किया जा सकता है। – savetheclocktower
आपकी टिप्पणी पर कोई टिप्पणी नहीं, लेकिन उत्तर के लिए धन्यवाद। एक दम बढ़िया। क्या कहीं कैस्केड की एक सूची है? फिर से धन्यवाद। –
यहां एक सूची है: (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html)। यह रूढ़िवादी है, केवल सूचीबद्ध फोंट जो प्लेटफॉर्म पर समान (या लगभग इतना) हैं। आपको यह देखने के लिए तुलना करना पड़ सकता है कि कौन सा "सुरक्षित" फ़ॉन्ट आपके "जोखिम भरा" फ़ॉन्ट जैसा है। – savetheclocktower
Facetype.js आज़माएं, आप अपने टीटीएफ फ़ॉन्ट को जावास्क्रिप्ट फ़ाइल में कनवर्ट करें। पूर्ण एसईओ संगत, एफएफ, आईई 6 और सफारी का समर्थन करता है और अन्य ब्राउज़रों पर गहराई से गिरावट करता है।
बहुत बहुत अच्छा है। मैं इसे देख लूंगा। –
जो लोग सोचते हैं कि यह कैसे काम करता है, यह कैनवास टैग (एचटीएमएल 5) या वीएमएल का उपयोग करता है। –
मुझे इस समाधान से सहमत होना होगा कि यह बेहद सरल दिखता है और ऐसा लगता है कि मैं उस ब्राउज़र पर काम कर रहा हूं। – askon
चेक बाहर Typekit, एक वाणिज्यिक विकल्प (वे भी एक नि: शुल्क पैकेज उपलब्ध है)।
यह निर्भर करता है जिस पर ब्राउज़र का इस्तेमाल किया जा रहा है (@font-face बनाम EOT प्रारूप) विभिन्न तकनीकों का उपयोग करता है, और वे भी आप के लिए सभी फ़ॉन्ट लाइसेंस के मुद्दों का ख्याल रखना। यह आईई 6 तक सब कुछ का समर्थन करता है।
यहाँ कैसे बहुत बढ़िया काम करता है के बारे में कुछ और जानकारी है:
एक्स रेफरी [कैसे एक वेबसाइट के लिए कुछ गैर मानक फ़ॉन्ट को जोड़ने के लिए?] (Http://stackoverflow.com/q/107936/367456) – hakre
[वेब पर फ़ॉन्ट्स] के संभावित डुप्लिकेट (http://stackoverflow.com/questions/16233/fonts-on-the-web) – user2284570
@ user2284570 यह सवाल एक बेहतर है जवाब। मैंने इसे एक डुप्लिकेट के रूप में बंद कर दिया है। –