फोंट जूमला Cufon होस्टिंग

स्निपेट्स में माइकल सोरिआनो अक्टूबर 13, 2009 70 टिप्पणियाँ

मैं WooThemes के एक बड़े प्रशंसक हूँ। ऐसा लगता है कि जब भी एक विषय के साथ बाहर आने - वे वेब डिजाइन की सीमाओं धक्का। उनकी नवीनतम निर्माण पर एक नज़र डालें: थेरेपी - मैं मदद नहीं कर सकता लेकिन ठीक पृष्ठभूमि ढ़ाल, चिकनी और सहज पारदर्शी और अच्छा गोल किनारों के साथ प्यार में गिर जाते हैं। लेकिन क्या मैं वास्तव में थेरेपी के बारे में की तरह है यह आश्चर्यजनक टाइपोग्राफी है। मैं अपने आप से कहा, "कि sIFR के उत्कृष्ट उपयोग में है।" तो मैं सही पोस्ट का शीर्षक पर क्लिक किया, "मैक्रोमीडिया फ्लैश के बारे में" प्रविष्टि देखने की उम्मीद - लेकिन यह नहीं देखा। तो मैं अपने उलझन में स्वयं से पूछा: "अगर यह sIFR नहीं है, तो यह सब गतिशील पाठ परिवर्तित क्या है?"

Cufon फोंट जूमला एक ही बात आप की मेजबानी

मैं Firebug में तत्व का निरीक्षण - तो मैं span class देख हर जगह "cufon"।

तो Cufon दुनिया में क्या है?

Cufon "कैनवास और VML साथ तेजी से पाठ प्रतिस्थापन" के रूप में परिभाषित किया गया है। है जो, जो लोग परिचित नहीं हैं - - यह भी sIFR के लिए एक योग्य विकल्प होने का दावा करता मापनीय इनमैन Flash प्रतिस्थापन के लिए खड़ा है। sIFR वेब डिजाइनर द्वारा इस्तेमाल किया गैर वेब सुरक्षित फोंट के साथ गतिशील पाठ बदलने के लिए तकनीक है। हालांकि sIFR पाठ प्रतिस्थापन के साथ एक ठीक काम किया है - यह काफी स्थापित करने के लिए मुश्किल साबित हो गया है। मैं अतीत में कुछ परियोजनाओं में sIFR उपयोग किया है और स्वीकार करते हैं कि यह जा रहा प्राप्त करने के लिए सबसे आसान काम नहीं है। उस के शीर्ष पर - sIFR थोड़ा गाड़ी लगता है, साथ ही पृष्ठ लोड को धीमा कर देती। ये गंभीर परिणाम अपने पृष्ठों के लिए एक अनूठा फ़ॉन्ट का उपयोग करके की कीमत के लिए विचार करने के लिए कर रहे हैं।

तो मैं आगे चला गया और Cufon की कोशिश की। मेरे विस्मय करने के लिए, निम्न चरणों के सभी है कि यह पूरी तरह से "Cufonize" अपने वेब पृष्ठों के लिए लेता है। * शब्द "cufonize" के उपयोग माफ कर दो - यह हास्यास्पद लग सकता है, लेकिन आप इन चरणों की कोशिश के बाद, आप भी "cufonize" अपने पृष्ठों होगा।

चरण 1: Cufon जाओ

पहली बात आप की जरूरत कोर जावास्क्रिप्ट फ़ाइल जो अपने HTML में अपने कस्टम फ़ॉन्ट का प्रतिपादन के लिए जिम्मेदार है डाउनलोड करने के लिए है। पर प्रमुख cufon.shoqolate.com/generate/ करने के लिए और सही क्लिक करें "डाउनलोड" टैब - अपने मशीन में एक स्थानीय निर्देशिका में चुनें "सहेजें लिंक के रूप में ..." सहेजें cufon-yui.js।

चरण 2: अपने फ़ॉन्ट उत्पन्न

cufon.shoqolate.com/generate/ पर एक ही पृष्ठ पर - "नियमित टाइपफेस" मैदान पर क्लिक करें - और अपने स्थानीय मशीन में अपने वांछित फॉन्ट को ब्राउज़ करें।

अपलोड शेष फ़ील्ड वैकल्पिक हैं। मैं उन सभी को इस ट्यूटोरियल कम बनाने की खातिर डिफ़ॉल्ट छोड़ दिया है। आपको लगता है कि, का उपयोग और EULAs की शर्तों का अनुबंध बंद की जाँच करने के कानूनी है एक फ़ॉन्ट उपयोग कर रहे हैं - बस सुनिश्चित करें। उस पृष्ठ के अंत में बटन "चलो इसे करते हैं" पर क्लिक करें।

यह आप के लिए एक कस्टम फ़ॉन्ट जावास्क्रिप्ट कोड उत्पन्न करनी चाहिए - अपने फ़ॉन्ट विकल्प पर निर्भर करता है। जो Gigi_400.font.js नाम की एक फ़ाइल का उत्पादन किया - Gigi.TTF: मेरे मामले में, मैं कुछ बहुत अन-असाधारण उठाया।

Cufon फोंट जूमला सब यह आप के लिए ले जाता है की मेजबानी

आगे बढ़ो और एक ही निर्देशिका है जहाँ आप कोर Cufon-yui.js फाइल सेव में इस फ़ाइल को बचाने के लिए और हम अपने पेज बनाने के लिए तैयार कर रहे हैं:

चरण 3: अपने पृष्ठ Cufonize

तुम सब वास्तव में इस बिंदु से करने की ज़रूरत है अपने HTML के सिर अनुभाग में इन जावास्क्रिप्ट फ़ाइलों से जोड़ने के लिए है। यह भी सुनिश्चित करें कि cufon-yui.js font.js फ़ाइल से पहले कहा जाता है कि:

प्रतिस्थापन की प्रक्रिया शुरू करने के लिए - नीचे की तरह कस्टम स्क्रिप्ट बना:

ऊपर स्क्रिप्ट हमारे कस्टम फ़ॉन्ट के लिए सभी H3 और पी टैग को बदलने के लिए cufon कह रहा है।

ध्यान दें कि यदि आप उसी तरह आप सीएसएस वर्गों और आईडी निर्दिष्ट अपने पृष्ठ में विशिष्ट तत्वों को लक्षित करना चाहते हैं, तो आप इस तरह के jQuery कि के रूप में एक ढांचे का उपयोग करने के लिए आप ऐसा दूँगा है। jQuery को डाउनलोड करने के docs.jquery.com/Downloading_jQuery में जाते हैं। सुनिश्चित करें कि आप पहले अपने शीर्षक में कोर cufon-yui.js इस फ़ाइल से लिंक करें।

जगह में jQuery पुस्तकालय के साथ, अब आप और अधिक विशिष्ट तत्वों अपने पृष्ठ में (आईडी और कक्षाओं के लिए अवधि के लिए हैशटैग) चुन सकते हैं। नीचे दिए गए उदाहरण कोड देखें:

उपरोक्त कोड "कन्वर्ट मुझे-भी" की आईडी के साथ "कन्वर्ट-मुझे" की आईडी के साथ ही h3 टैग, और पी टैग Cufonize होगा।

निष्कर्ष:

वह मूल रूप से यह है! बस इतना ही आप अपने वेब पृष्ठों में आप की तरह किसी भी फ़ॉन्ट का उपयोग होने में लगने है। क्या मैं Cufon के बारे में सबसे ज्यादा पसंद है कि यह जल्दी हो जाता है और यह काम करता है। तुम भी मिल जाएगा कि इस तरह के रंग, आकार और स्थिति के रूप में सामान्य सीएसएस गुण अभी भी तब्दील फॉन्ट पर लागू होता है। Cufon स्टाइल की बारीकियों के बारे में और अधिक जानकारी प्राप्त करने के लिए - wiki.github.com/sorccu/cufon/styling देखते हैं।

लोग हैं, जो Cufon बनाया करने के लिए बहुत सम्मान। मुझे यकीन है कि इस वेब टाइपोग्राफी में एक नई प्रवृत्ति के निशान हूँ। WooThemes पर लोगों के लिए: सीमाओं धक्का रखने - अपने काम वेब कलाकारों के लिए शुद्ध प्रेरणा हर जगह है।

कौन Cufon का उपयोग करना है?

वेबसाइटों की निम्न सूची पहले से ही अपने पन्नों में Cufon पाठ प्रतिस्थापन का उपयोग कर रहे हैं:

अंतर्राष्ट्रीय रग्बी अकादमी

ग्रिड taming - अपने WordPress पदों संरेखित पूरी तरह से PHP और सीएसएस का उपयोग कर

स्क्रैच से एक एकल पृष्ठ पोर्टफोलियो बनाएं - भाग 1: फ़ोटोशॉप Mockup

70 टिप्पणियाँ

अक्टूबर 25, 2009 7:18 बजे

मैं शीघ्र ही cufonize कोशिश करने के लिए और सिर्फ अपने महान लेख देखें योजना है। बांटने के लिए धन्यवाद।

अक्टूबर 28, 2009 11:15 बजे

मैं दो वर्डप्रेस साइटों पर WP-Cufon प्लगइन (www.tobias-battenberg.de/wp-cufon/) का उपयोग कर रहा हूँ। बहुत अच्छी है, लेकिन निर्दोष नहीं। वहाँ कुछ देरी जब फ़ॉन्ट के लिए पृष्ठ लोड दिखाने के लिए और "हैक" इसे कवर करने के लिए प्रतीत नहीं होता है। मैं भी यह मुख पृष्ठ और विषय मैं का उपयोग कर उन्हें अलग तरह से कोडित किया गया था के रूप में अन्य पृष्ठों पर काम में समस्या आई।

तीन महीने पहले यह कर (यह एक तरह एक लेख के लिए बधाई देने के लिए) मैं मुसीबत जे एस के लिए मुझे लगता है कि यह था फ़ॉन्ट परिवर्तित करने के लिए किया था। मैं इसे एक दो बार ऐसा करने के लिए यह सही पाने के लिए था।

इस साइट में लगभग पूरा हो चुका है और आप एक नि: शुल्क Museo_300 फ़ॉन्ट का उपयोग देख सकते हैं:
lightonsolutions.com/

मैं अन्य उदाहरण साइट जब यह समाप्त हो गया है पोस्ट करेंगे।

लेख के लिए धन्यवाद।

अक्टूबर 28, 2009 12:19 बजे

सही पर! Museo_300 फ़ॉन्ट एक सुंदर फ़ॉन्ट है। बहुत बढ़िया!

नवंबर 4, 2009 9:40 बजे

बस मुझे पता करने के लिए कैसे cufon में "id" और "वर्ग" लागू करना चाहते हैं।

संक्षिप्त और भी उदाहरण sitor यूआरएल में दे कृपया।

नवंबर 4, 2009 9:56 बजे

- आप सादे जावास्क्रिप्ट या jQuery चयनकर्ताओं का उपयोग करके तत्वों लक्ष्य। मैं jQuery रास्ता आसान हो पाते हैं।

उदाहरण के लिए। आप "उप शीर्षक" के एक वर्ग के साथ अपने पृष्ठ के सभी h3 खिताब cufonize करना चाहते हैं, तो आप स्क्रिप्ट बताओ: cufon.replace ( 'h3.subtitle')

नवंबर 4, 2009 10:02 बजे

हाय क्विक प्रतिक्रिया के लिए धन्यवाद।
लेकिन कुछ समस्या।

मैं कोई भी परिवर्तन नहीं मिल रहा है इस code..but उपयोग कर रहा हूँ।

Cufon.replace ( 'h3.subtitle', textShadow: '2px 2px # 666',
FONTSIZE: '17px',
रंग: '-linear-ढाल (#fff, 0.2 = # FFF, 0.5 = # FFF, #fff)',
मंडराना: textShadow: '2px 2px # 9d9d9d',
रंग: '-linear-ढाल (# d4d4d4, सफेद)

नवंबर 6, 2009 5:25 बजे

हाय क्विक प्रतिक्रिया के लिए धन्यवाद।
लेकिन कुछ समस्या।

मैं कोई भी परिवर्तन नहीं मिल रहा है इस code..but उपयोग कर रहा हूँ।

Cufon.replace ( 'h3.subtitle', textShadow: '2px 2px # 666',
FONTSIZE: '17px',
रंग: '-linear-ढाल (#fff, 0.2 = # FFF, 0.5 = # FFF, #fff)',
मंडराना: textShadow: '2px 2px # 9d9d9d',
रंग: '-linear-ढाल (# d4d4d4, सफेद)

09:31 दिसंबर 23, 2009

यह बहुत ही उपयोगी "मूर्ख प्रूफ" ट्यूटोरियल के लिए धन्यवाद। मैं एक ग्राहक है कि मुझे पाठ प्रतिस्थापन तकनीक के आसपास कुछ सवाल पूछे, मैं तो वह खुद के लिए पढ़ सकते हैं उसे अपने लिंक देने के लिए जा रहा हूँ है।

जिस तरह से मैं WooThemes के बारे में अपनी भावनाओं को साझा करने से, मैं पक्षपाती हो सकता है के रूप में मैं उनके लिए एक बीटा परीक्षक हूँ

27 जुलाई, 2010 6:30 पर

अच्छा लेख!
मैं PHP और jQuery हाल ही में एक ट्रैवल एजेंसी की साइट पर के साथ संयोजन के रूप में इस्तेमाल किया cufon - महान काम करता है!
मैं इसे इस्तेमाल किया (shipsandtripstravel.com) मुख पृष्ठ पर एक फीचर रोटेटर पर गतिशील पाठ और गतिशील विशेष शैली और उनके प्रशंसापत्र पेज (shipsandtripstravel.com/about/testimonials.html) पर एक से अधिक फोंट का इस्तेमाल किया

28 जुलाई, 2010 11:28 बजे

@Gregg - कि एक प्रभावशाली साइट है। मुझे यात्रा करना चाहते हैं बनाता है

29 अप्रैल, 2012 2:54 बजे

बहुत बहुत धन्यवाद। क्योंकि मैं बहुत ही बात आप किया था अजीब बात है मैं अपनी पोस्ट पाया ... सोचा एक फ़ॉन्ट जब तक मैं गूगल के डेवलपर उपकरण का उपयोग किया और पहली बार के लिए Cufon के बारे में सुना एक img फ़ाइल होना ही था। नहीं यह बेहतर है, हालांकि गूगल के jQuery पुस्तकालय का उपयोग करना है ??

// आप "1" या "1.3" के रूप में आंशिक संस्करण संख्याओं, निर्दिष्ट कर सकता है,
एक ही परिणाम के साथ //। ऐसा करना अपने आप लोड होगा
// नवीनतम संस्करण मिलान कि आंशिक संशोधन पैटर्न
// (जैसे 1.3 1.3.2 आज लोड होता है और 1 1.7.2 लोड होगा)।
google.load ( "jQuery", "1.7.2");

google.setOnLoadCallback (function () // प्लेस init $ (document) .ready के बजाय यहाँ कोड ()
>);

चीयर्स और इस महान सामग्री बह रहा रखने!

स्टीव
किंग्स्टन, कनाडा पर

30 अप्रैल, 2012 9:50 बजे

किसी को भी cufon में समस्याएं आ रही है? मैं अपने फॉन्ट "cufonized", यह मेरी वेबसाइट में काम कर रहा है और की तुलना में ... Cufon फ़ॉन्ट सबकुछ बदल बनाने के लिए सब किया था। चीजें वहाँ सही जगह में नहीं रह रहे हैं? यह किसी को भी अभी तक हुआ?

मई 5, 2012 7:16 बजे

क्या फ़ॉन्ट cufin थेरेपी का उपयोग कर रहा है?

इस वीडियो को देखें!

संबंधित आलेख

होस्टिंग Joomla के लिए सर्वश्रेष्ठ साइटमैप जनरेटरविशेषताएं: - sitemap.xml फ़ाइलें मुक्त करने के लिए ऑनलाइन उत्पन्न करता है - पृष्ठों * की असीमित संख्या की प्रक्रिया कर सकते हैं - गूगल साइटमैप / एक्सएमएल साइट मानचित्र सत्यापनकर्ता प्रदान करता है - रिपोर्ट टूटी कड़ियाँ - पूरक, कोई पर ...
GameOn FJT जूमला होस्टिंगजानकारी Michaelson के लिए धन्यवाद। मैं Firebug डाउनलोड किया है और यह एक भयानक संसाधन है! मैं सीएसएस फ़ाइल में कोड की लाइन का पता लगाने में सक्षम था। हालांकि, एक नई समस्या में उभरा है: template.css ...
पीडीएफ एम्बेड 15 जूमला की मेजबानीजूमला 2.5 2014/12/31 के लिए के रूप में जीवन के अपने अंत तक पहुँच गया है। कृपया ध्यान रखें यह अपनी वेबसाइट के लिए एक सुरक्षा जोखिम हो सकता है। आप जीवन के अंत के बारे में अधिक जानकारी देख सकते हैं। कारण उनके...
जूमला होस्टिंग में दो टेम्पलेट का उपयोग करनाजूमला 2.5 / 3 में, आप अपने वेबपेज में एक से अधिक डिजाइन टेम्पलेट का उपयोग कर सकते हैं। इसका मतलब यह है कि आप उपपृष्ठ के समूह, या यहाँ तक कि व्यक्ति उपपृष्ठ एक अद्वितीय है के साथ एक वेब पेज बना सकते हैं ...
फ़ीड XML पार्सर जूमला होस्टिंगएक्सएमएल फ़ाइल क्या है? एक्सटेंसिबल मार्कअप लैंग्वेज, या एक्सएमएल भंडारण, संरचना, हेरफेर और डेटा की ढुलाई के लिए सबसे अधिक इस्तेमाल किया खुला स्वरूपों में से एक है। मुख्य में से एक...