मैं एसवीजी में Google वेब फ़ॉन्ट्स कैसे एम्बेड करूं?

Question

मैं अपनी साइट पर नई वेब तकनीकों के फायदों के बारे में अन्य HTML5, CSS3 और SVGs के बीच में एक लेख लिख रहा हूं, बाद के लाभों में से एक यह है कि पाठ का चयन करने की क्षमता जो अन्यथा प्रभावी रूप से एक छवि है।

मैं एसवीजी के लिए नया हूं, और मैंने इलस्ट्रेटर में अपना पहला सभ्य ग्राफिक बनाया है। मैंने इसे टैग में उबंटू फ़ॉन्ट के लिए GWF स्क्रिप्ट के साथ एक पृष्ठ में एम्बेड किया है। जैसा कि यह पता चला है, उबंटू फ़ॉन्ट नियमित पाठ में सही ढंग से प्रदर्शित होता है, लेकिन एसवीजी में काम करने के लिए इस चाल के लिए, Google स्क्रिप्ट को एसवीजी में ही एम्बेड करना होगा। मैं यह कैसे कर सकता हूँ?

Comments

@Import आधारित समाधान के बारे में एक महत्वपूर्ण नोट: वे पृष्ठभूमि-छवियों के लिए काम नहीं करते हैं। आपको आधार के माध्यम से फ़ॉन्ट एम्बेड करना होगा या इसके बजाय एक छवि / ऑब्जेक्ट टैग का उपयोग करना होगा।

— मिकी

Answer 1

आप बेस 64 एनकोडिंग का उपयोग करके सीएसएस में फोंट एम्बेड करते हैं। आप एक <style />तत्व का उपयोग करके सीएसएस के समान एसवीजी दस्तावेजों में शैलियों को लागू कर सकते हैं । इसलिए यदि आपके पास एक WOFF फ़ॉन्ट है, तो आप इसे इस तरह एम्बेड करेंगे:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

आधार ...64 एन्कोडेड फ़ॉन्ट डेटा कहां है।

इसके उदाहरण आप Typekit के स्टाइलशीट में देख सकते हैं। मुझे यकीन नहीं है कि अगर माइम का प्रकार font/woffसही है, जैसा कि मैंने भी देखा है कि लोग दावा करते हैं कि यह होना चाहिए application/font-woff। हालांकि font/woff, font/truetype, font/opentype, आदि अधिक लोकप्रिय होने लगते हैं।

वैकल्पिक रूप से, आप वास्तव में वेब फ़ॉन्ट का एसवीजी संस्करण ले सकते हैं और अपने दस्तावेज़ के अंदर एसवीजी फ़ॉन्ट के विवरण मार्कअप को एम्बेड कर सकते हैं (हालांकि ब्राउज़र समर्थन अभी भी टिप्पणियों में ल्यूक नोट के रूप में बहुत सीमित है)।

हालांकि, आपको एसवीजी विनिर्देश के अनुसार एक बाहरी फ़ॉन्ट से लिंक करने में सक्षम होना चाहिए । यदि आप उस फ़ॉन्ट को संदर्भित करने वाले एकाधिक SVG दस्तावेज़ हैं, तो यह सबसे अच्छा समाधान प्रतीत होगा।

Comments

.Woff के लिए सही MIME-प्रकार अब है application/font-woff। stackoverflow.com/a/5142316/90674

— sshow

"आप वास्तव में वेब फ़ॉन्ट का एसवीजी संस्करण ले सकते हैं और अपने दस्तावेज़ के अंदर एसवीजी फ़ॉन्ट के विवरण मार्कअप को एम्बेड कर सकते हैं" के बारे में, आपको पता होना चाहिए कि "एसवीजी फ़ॉन्ट्स वर्तमान में केवल सफारी और एंड्रॉइड ब्राउज़र में समर्थित हैं।" डेवलपर देखें ।.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts ( caniuse.com/#feat=svg-fonts )

— ल्यूक

इस धागे ने बहुत मदद की, लेकिन यह सवाल तब बन गया कि एक फ़ॉन्ट को बेस 64 में कैसे बदला जाए। इस साइट ने transfonter.org को बहुत मदद की और एक को केवल फ़ॉन्ट का एक सबसेट चुनने की अनुमति दी, ताकि फ़ाइल का आकार कम किया जा सके।

— फेबिन स्नूवर्ट

यह उत्तर आकर्षक लग रहा था, लेकिन अंततः मुझे ये कदम आसान लगे, इसलिए मैंने उन्हें साझा किया: ग्राफिकडेग्न.स्टैकएक्सचेंज.com

— रायन

जब मैं उस svg को Adobe Illustrator में खोल रहा हूँ, तो फोंट लोड नहीं हो रहा है। कोई मदद?

— आमिर नखवा

Answer 2

<defs>जैसे एक खंड

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

काम करता है।

Comments

वर्तमान (फरवरी 2016) वेब ब्राउज़रों में, यह एसवीजी फ़ाइल स्टैंड-अलोन को लोड करते समय ही काम करता है। एक उदाहरण के लिए marians.github.io/test-webfonts-in-svg/test.svg देखें । एक HTML पृष्ठ के भीतर एक ही एसवीजी खोलना, फ़ॉन्ट लोड / प्रदान नहीं किया जाता है। उदाहरण के तौर पर marians.github.io/test-webfonts-in-svg का उपयोग करें ।

— मैरियन

Chrome संस्करण 73.0.3683.103 (आधिकारिक बिल्ड) (64-बिट) में स्टैंड-अलोन एसवीजी और एचटीएमएल पेज दोनों एक ही काम करते हैं।

— पॉल ग्रिम

जब मैं ब्राउज़र पर svg खोलता हूं तो यह फोंट लोड कर रहा होता है, लेकिन जब मैं Adobe Illustrator में एक ही svg फाइल खोलता हूं, तो यह फोंट लोड नहीं कर रहा है। कोई मदद?

— आमिर नखवा

Answer 3

आप नैनो का उपयोग करके सीधे अपने SVG में Google वेब फ़ॉन्ट्स एम्बेड कर सकते हैं । यह स्वचालित रूप से आपके एसवीजी को स्कैन करता है और चुनिंदा रूप से केवल आवश्यक फोंट एम्बेड करता है, यह सुनिश्चित करता है कि आपके उबंटू फोंट सभी आधुनिक ब्राउज़रों पर समान दिखते हैं। मेरे मामले में, मुझे अपने एसवीजी में एम्बेडेड होने के लिए रोबोटो की आवश्यकता थी:

डिस्क्लेमर: मैं नैनो के पीछे टीम के साथ हूं, और हम भी, पहले भी इसी समस्या का सामना कर चुके हैं, इसलिए नैनो का निर्माण करके अपनी खुद की खुजली को दूर करने का फैसला किया। आशा है कि यह उपयोगी है!

संपादित करें: यहाँ दृश्य के पीछे क्या होता है, इस पर एक त्वरित स्पष्टीकरण दिया गया है:

एसवीजी में फोंट एम्बेड करने के लिए, आपको पहले यह जानना होगा कि फॉन्ट परिवारों का क्या उपयोग किया जाता है। फिर आपको इन फ़ॉन्ट फ़ाइलों को खोजने और उन्हें डाउनलोड करने की आवश्यकता है। एक बार डाउनलोड करने के बाद, आपको नियमित, बोल्ड, इटैलिक्स और बोल्ड इटैलिक्स को 64 एन्कोडिंग के आधार पर बदलना होगा। यदि आप इसे मैन्युअल रूप से कर रहे हैं, तो यह एक बड़ी मात्रा में काम है, बड़ी संख्या में फाइलें, यह जानने के लिए कि कौन सी फ़ाइल बोल्ड का उपयोग करती है और कौन सी नहीं। फिर आपको अपने एसवीजी में सभी 4 बेस 64 एन्कोडेड स्ट्रिंग्स को कॉपी करना होगा।

इसलिए हम नैनो का निर्माण करते हैं और सुनिश्चित करते हैं कि यह एसवीजी को स्वचालित रूप से स्कैन करता है और केवल उपयोग किए जा रहे फोंट को सम्मिलित करता है। उदाहरण के लिए, यदि बोल्ड का उपयोग नहीं किया जाता है या यदि कोई पाठ मौजूद नहीं है, तो कोई फोंट एम्बेड नहीं किया जाएगा। आपको बस अपने SVG को नैनो में ड्रैग और ड्रॉप करना है और यह एक आकर्षण की तरह काम करता है! आप यहां अधिक जान सकते हैं: https://vecta.io/blog/making-svg-easier-to-use

Comments

ठीक है, बहुत अच्छा लग रहा है। दुर्भाग्य से एक वर्डप्रेस साइट पर अपलोड करना जो एसवीजी को स्वीकार करने से पहले बहुत खुश था, अब "क्षमा नहीं, सुरक्षा कारणों से इस फ़ाइल प्रकार की अनुमति नहीं है।" - इस काम को करने के लिए मुझे क्या करना होगा?

— क्रिस पिंक

Answer 4

यह सरलीकृत हो सकता है, लेकिन क्या आपने फ़ॉन्ट को Google से ज़िप फ़ाइल के रूप में डाउनलोड करने पर विचार किया है और फिर Illustrator को इसे अपने SVG फ़ाइल आउटपुट में आवश्यकतानुसार परिवर्तित करने दिया है?

यह केवल सैद्धांतिक है क्योंकि मैंने अभी तक यह कोशिश नहीं की है, लेकिन सिद्धांत रूप में काम करने लगता है।

Answer 5

<desc>टैग के बाद निम्नलिखित जोड़ें

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

Comments

क्यों इतने सारे Google फोंट शामिल हैं? यह उन सभी या सबसे अधिक इस्तेमाल नहीं किया जाता है जो मैं बहुत देखता हूं और एसवीजी के समग्र वजन में जोड़ देगा।

— MrMesees

जब मैं ब्राउज़र पर svg खोलता हूं तो यह फोंट लोड कर रहा होता है, लेकिन जब मैं Adobe Illustrator में एक ही svg फाइल खोलता हूं, तो यह फोंट लोड नहीं कर रहा है। कोई मदद?

— आमिर नखवा

Answer 6

मेरे उत्तर के लिए अद्यतन करें। मैं अब इस पृष्ठ पर एक अलग उत्तर पसंद करता हूं, जिसे नैनो का उपयोग करना है: https://graphicdesign.stackexchange.com/a/121950/45239

यह मानते हुए कि आपने अपने सिस्टम पर एक वेब फ़ॉन्ट डाउनलोड और इंस्टॉल किया है और एक एसवीजी बनाया है (हो सकता है कि मैं नीचे बताए गए समान चरणों का उपयोग कर रहा हूं लेकिन "फ़ॉन्ट: कन्वर्ट टू आउटलाइन" नहीं चुन रहा है), आप एसवीजी को नैनो में अपलोड कर सकते हैं और "एम्बेड फ़ॉन्ट: हाँ" विकल्प देखें, और डाउनलोड पर क्लिक करें।

मेरा पिछला जवाब:

यदि आप चयन करने योग्य पाठ और एसईओ का त्याग करने को तैयार हैं:

1. वेब फ़ॉन्ट डाउनलोड करें।
2. इसे स्थानीय स्तर पर स्थापित करें।
3. Adobe Illustrator खोलें
4. अपना पाठ लिखें।
5. फ़ाइल> निर्यात> इस रूप में निर्यात करें ...
6. ".SVG" चुनें

7. इन सेटिंग्स को चुनें:

   • स्टाइलिंग: इनलाइन स्टाइल
   • फ़ॉन्ट: कन्वर्ट करने के लिए रूपरेखा
   • छवियाँ: संरक्षित करें
   • ऑब्जेक्ट आईडी: परत नाम
   • दशांश: २
   • (सक्षम) छोटा करें
   • (सक्षम) उत्तरदायी

8. वैकल्पिक रूप से परिणामी svg को https://vecta.io/nano पर अपलोड करें (यह मेरी फ़ाइल का आकार 8.2% तक कम करने में सक्षम था)

Comments

दुर्भाग्य से sizes कन्वर्ट टू आउटलाइन ’छोटे पाठ आकारों के लिए एक बढ़िया विकल्प नहीं है।

— क्रिस पिंक

@ क्रिसपिन, हाँ आप सही कह रहे हैं!, कृपया साझा करें यदि आपको छोटे फ़ॉन्ट आकार के लिए कोई अन्य विकल्प मिला है

— सुपर मॉडल

@SuperModel मैंने नैनो का इस्तेमाल बड़ी सफलता के साथ किया, जिसमें फॉन्ट्स संलग्न शैली से दस्तावेज़ उठाते हैं। मेरा पहला प्रयास विफल रहा, लेकिन नैनो टीम की मदद से हमने यह काम किया कि यह सुनिश्चित करने का मामला था कि एसवीजी हेडर बरकरार रहे।

— क्रिस पिंक