2011-12-21 13 views
7

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

प्रश्न में एसवीजी फ़ाइल को Here's a link

उत्तर

11

यहाँ एक एसवीजी अंदर अलग वेबफ़ॉन्ट की एक जोड़ी का उपयोग करने का एक example है।

Google वेब फोंट द्वारा प्रदान की गई स्क्रिप्ट का वर्तमान संस्करण svg में काम नहीं करता है। हालांकि Google को ठीक करने के लिए यह बहुत आसान होगा।

यहाँ कुछ उल्लेख अन्य तरीकों के साथ svg में गूगल वेब फोंट का उपयोग कर उदाहरण हैं:

+0

Google के लिए अपनी वेब फ़ॉन्ट स्क्रिप्ट एसवीजी-संगत बनाने के लिए यह व्यर्थ क्यों होगा? – Jules

+2

नहीं व्यर्थ बिल्कुल, मुझे लगता है कि यह करता है, तो गूगल फोंट स्क्रिप्ट एक जैसे svg और html के लिए काम किया बहुत मददगार होगा। यह फ़ॉन्ट्स को शामिल करने के तरीके के रूप में xml-styleheets को सूचीबद्ध नहीं करता है। –

2

मैं यह वास्तव में उदाहरण here is the Firefox bug के लिए, लिंक किए गए एसवीजी के लिए अभी तक काम करता है नहीं लगता।

svg .text { 
    font-family:"Familiar Pro Bold", 'Helvetica Neue', Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    font-style:normal; 
} 
बेशक

, यह केवल एचटीएमएल 5 सक्षम ब्राउज़रों में काम करने के लिए जा रहा है: यदि आप inline the SVG in the HTML और फिर सीएसएस नियम इस प्रकार बना यह काम करता है। Here's an example

+0

जीनियस है यही कारण है कि। धन्यवाद! – Jules

संबंधित मुद्दे

 संबंधित मुद्दे