किसी वेबसाइट पर कुछ गैर-मानक फ़ॉन्ट कैसे जोड़ें?

518

क्या छवियों, फ्लैश या कुछ अन्य ग्राफिक्स का उपयोग किए बिना वेबसाइट पर कुछ कस्टम फ़ॉन्ट जोड़ने का एक तरीका है ?

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

— vaske
स्रोत

18

चूंकि यह प्रश्न पूछा गया था, इसलिए इसे @font-faceअधिक व्यापक रूप से समर्थन प्राप्त हुआ है और इसे सामान्य उपयोग के लिए अनुशंसित किया गया है। आपको बस इस बात की जानकारी होनी चाहिए कि IE को अन्य ब्राउज़र में एक अलग प्रारूप में फोंट की आवश्यकता है। देखें stackoverflow.com/questions/2219916/is-font-face-usable-now

— डेविड जॉनस्टोन

10

सुनिश्चित करें कि आपको फ़ॉन्ट वितरित करने का अधिकार है!

— वियतनामी

2

Typekit.com पर जाएँ , या सस्ते fontquirrel.com के लिए

— bjudson

1

संबंधित stackoverflow.com/questions/8050640/…

— Adrien Be

3

www.fontsquirrel.com आवश्यक फ़ॉन्ट फ़ाइलों को उत्पन्न करने और एक अच्छा बुलेट-प्रूफ @fontface सिंटैक्स बनाने के लिए बहुत अच्छा लगता है (जैसा कि अनुशंसित फोंटप्रीडिंग.com/blog/ fixing-ie9-font-face- problems )

— Be

500

यह सीएसएस के माध्यम से किया जा सकता है:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

यदि आप ट्रू टाइप-फ़ॉन्ट (TTF) या वेब ओपन फ़ॉन्ट प्रारूप (WOFF) का उपयोग करते हैं तो यह सभी नियमित ब्राउज़रों के लिए समर्थित है ।

— हैंडी
स्रोत

13

इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स दोनों वेबकिट पर आधारित नहीं हैं, इसलिए यह मेरी राय में काफी बेकार समाधान है।

— कैस्पर

58

यह बेकार नहीं है क्योंकि यह मानक है: जितना अधिक आप इसे लागू करते हैं, उतना ही यह संभवतः ब्राउज़रों द्वारा कार्यान्वित किया जाएगा। इसका मतलब यह नहीं है कि आपको क्षतिपूर्ति करने का दूसरा तरीका नहीं खोजना चाहिए, लेकिन पूरक के रूप में इसका उपयोग करना मुझे अच्छा लगता है।

— e-satis

8

फ़ायरफ़ॉक्स 3.1 हालांकि @ फॉन्ट-फेस को सपोर्ट करता है।

— Ms2ger

2

@brendanjerwin: आपके लिंक का अपडेट किया गया संस्करण - brendanjerwin.com/development/web/2009/03/03/…

— मैट बॉल

60

हे दोस्तों, लगता है क्या? यह अब लगभग 2016 है! यह अब व्यापक रूप से समर्थित है! वाह! खुशी है, मुझे यह उत्तर देर से मिला। Haha।

— जेसिका

121

आप Google वेब फ़ॉन्ट्स के माध्यम से कुछ फ़ॉन्ट जोड़ सकते हैं ।

तकनीकी रूप से, फ़ॉन्ट Google पर होस्ट किए गए हैं और आप उन्हें HTML हेडर में लिंक करते हैं। फिर, आप उन्हें सीएसएस के साथ स्वतंत्र रूप से उपयोग कर सकते हैं @font-face( इसके बारे में पढ़ें )।

उदाहरण के लिए:

में <head>अनुभाग:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

फिर सीएसएस में:

h1 { font-family: 'Droid Sans', arial, serif; }

समाधान काफी विश्वसनीय लगता है (यहां तक कि स्मैशिंग पत्रिका एक लेख शीर्षक के लिए इसका इस्तेमाल करती है। ) हालाँकि, Google Font Directory में अब तक इतने सारे फोंट उपलब्ध नहीं हैं ।

— मिशाल Pękała
स्रोत

1

जुलाई 2014 में, Google ने फोंट का विस्तार किया है और इसमें Google Noto फोंट शामिल किए गए हैं जो अधिकांश भाषाओं में google.com/get/noto/# का समर्थन करते हैं । Abobe ने सभी भाषाओं में समर्थन करते हुए इस ओपन फॉन्ट पहल का समर्थन किया है। blog.typekit.com/2014/07/15/introducing-source-han-sans

— vsingh

ऐसा लगता है (Google वेब फ़ॉन्ट) .eot और .woff और .svg फ़ॉन्ट के संस्करणों का समर्थन नहीं करता है। यह सिर्फ फोंट के .ttf संस्करण का समर्थन करता है!

— महदी जाजिनी

77

जाने का रास्ता @ फॉन्ट-फेस सीएसएस घोषणा का उपयोग कर रहा है जो लेखकों को अपने वेब पृष्ठों पर पाठ प्रदर्शित करने के लिए ऑनलाइन फोंट निर्दिष्ट करने की अनुमति देता है। लेखकों को अपने स्वयं के फोंट प्रदान करने की अनुमति देकर, @ फॉन्ट-फेस उन उपयोगकर्ताओं की सीमित संख्या पर निर्भर करने की आवश्यकता को समाप्त करता है जिन्हें उपयोगकर्ताओं ने अपने कंप्यूटर पर स्थापित किया है।

निम्नलिखित तालिका पर एक नज़र डालें:

यहाँ छवि विवरण दर्ज करें

जैसा कि आप देख सकते हैं, कई प्रारूप हैं जिनके बारे में आपको मुख्य रूप से क्रॉस-ब्राउज़र संगतता के कारण जानने की आवश्यकता है। मोबाइल उपकरणों में परिदृश्य बहुत अलग नहीं है।

समाधान:

1 - पूर्ण ब्राउज़र संगतता

यह इस समय सबसे गहरे समर्थन के साथ संभव है:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - अधिकांश ब्राउज़र

चीजें हालांकि WOFF की ओर बहुत अधिक बढ़ रही हैं , इसलिए आप शायद इससे दूर हो सकते हैं:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - केवल नवीनतम ब्राउज़र

या यहां तक कि सिर्फ WOFF।
आप फिर इसे इस तरह उपयोग करते हैं:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

संदर्भ और आगे पढ़ने:

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

— जेवियर काडिज़
स्रोत

2

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

— जैकब स्टैम

किसलिए svgFontNameखड़ा है? क्या मुझे इसे अपने फ़ॉन्ट परिवार के नाम में बदल देना चाहिए या इसे छोड़ देना चाहिए?

— घर्मन

17

यदि गैर मानक फ़ॉन्ट से, आप मानक प्रारूप के कस्टम फ़ॉन्ट से मतलब रखते हैं, तो मैं इसे कैसे करता हूं, और यह उन सभी ब्राउज़रों के लिए काम करता है जिन्हें मैंने जांचा है:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

तो आपको बस ttf और eot दोनों फोंट की आवश्यकता होगी। ऑनलाइन उपलब्ध कुछ उपकरण रूपांतरण कर सकते हैं।

लेकिन अगर आप एक गैर मानक प्रारूप (बिटमैप आदि) में फ़ॉन्ट संलग्न करना चाहते हैं, तो मैं आपकी मदद नहीं कर सकता।

— BiAiB
स्रोत

1

ऑनलाइन टूल उदाहरण: kirsle.net/wizards/ttf2eot.cgi ऑफ़लाइन टूल उदाहरण: code.google.com/p/ttf2eot/wiki/Demo - WOFF फोंट का उपयोग करना भी संभव होना चाहिए ।

— विल्फ

11

मैंने पाया है कि sIFR का उपयोग करने के लिए एक वेबसाइट पर गैर-मानक फोंट का सबसे आसान तरीका है

इसमें एक फ्लैश ऑब्जेक्ट का उपयोग शामिल है जिसमें फ़ॉन्ट शामिल है, लेकिन यह मानक पाठ / फ़ॉन्ट को अच्छी तरह से नीचा दिखाता है यदि फ्लैश स्थापित नहीं है।

शैली आपके सीएसएस में सेट है, और जावास्क्रिप्ट आपके पाठ के लिए फ्लैश प्रतिस्थापन सेट करता है।

संपादित करें: (मैं अभी भी गैर-मानक फोंट के लिए छवियों का उपयोग करने की सलाह देता हूं क्योंकि sIFR एक परियोजना में समय जोड़ता है और रखरखाव की आवश्यकता हो सकती है)।

— मैट
स्रोत

24

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

— ई-सतीस

2

@ ई-सतीस: ऐसा कैसे? व्यक्तिगत रूप से, मैं कभी भी उस पृष्ठ के बीच अंतर नहीं देखता जो sIFR का उपयोग करता है और एक, जो सूक्ष्म पाठ रेंडरिंग मतभेदों से अलग नहीं होता है। मुझे लगता है कि यह एक महान विचार है, ईमानदारी से, हालांकि @font-faceबहुत बेहतर है जहां समर्थित है।

— साशा चोडगोव्ग

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

— डेरेक अडायर

10

आईई में लेख फ़ॉन्ट-चेहरा: वेब फोंट बनाना कार्य कहता है कि यह तीनों प्रमुख ब्राउज़रों के साथ काम करता है।

यहाँ एक नमूना है जो मुझे काम कर रहा है: http://brendanjerwin.com/test_font.html

अधिक चर्चा एम्बेडिंग फ़ॉन्ट्स में है ।

— brendanjerwin
स्रोत

10

Typeface.js और Cufon दो अन्य दिलचस्प विकल्प हैं। वे जावास्क्रिप्ट घटक हैं जो JSON प्रारूप में विशेष फ़ॉन्ट डेटा को प्रस्तुत करते हैं (जिसे आप अपने वेब साइटों पर ट्रू टाइप या ओपन टाइप स्वरूपों से बदल सकते हैं) इंटरनेट एक्सप्लोरर को छोड़कर और इंटरनेट एक्सप्लोरर में वीएमएल के माध्यम से सभी नए ब्राउज़रों में तत्व के माध्यम से ।

दोनों (अब के रूप में) के साथ मुख्य समस्या यह है कि पाठ का चयन काम नहीं करता है या कम से कम केवल काफी अजीब तरह से काम करता है।

फिर भी, यह सुर्खियों के लिए बहुत अच्छा है। शारीरिक पाठ ... मुझे नहीं पता।

और यह आश्चर्यजनक रूप से तेज है।

— थॉमस
स्रोत

एक और दिलचस्प विकल्प टाइपेकिट.कॉम समान अवधारणा है।

— जैक

8

या आप sIFR की कोशिश कर सकते हैं । मुझे पता है कि यह फ्लैश का उपयोग करता है, लेकिन केवल अगर उपलब्ध है। यदि फ्लैश उपलब्ध नहीं है, तो यह मूल पाठ को अपने मूल (CSS) फ़ॉन्ट में प्रदर्शित करता है।

— कैस्पर
स्रोत

4

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

— स्टीव मोयर
स्रोत

4

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

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

— zobier
स्रोत

यह जावास्क्रिप्ट के साथ करने की आवश्यकता नहीं है। मुझे पता है कि आजकल बहुत सारे लोग जावास्क्रिप्ट का उपयोग करना पसंद करते हैं, लेकिन यहां मानक सीएसएस तकनीक अधिक उपयुक्त हो सकती है। देखें sitepoint.com/article/header-images-css-xhtml

— hangy

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

— ज़ॉबियर

4

यदि आप ASP.NET का उपयोग करते हैं, तो वास्तव में स्थापित किए बिना छवि आधारित फोंट उत्पन्न करना बहुत आसान है (जैसा कि स्थापित फॉन्ट बेस में जोड़ने के लिए) सर्वर पर फोंट का उपयोग करके:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

और फिर उस फ़ॉन्ट के साथ एक पर ड्राइंग Graphics।

— mattlant
स्रोत

1

ठीक है, हाँ ... और आप उपयोगकर्ता कॉपी और पेस्ट करने के बारे में भूल सकते हैं। और पुराने ब्राउज़रों में भी ज़ूम कर रहा है। मैं भी बैंडविड्थ मुद्दों के बारे में बात नहीं करते!

— e-satis

2

हाँ, ठीक है, और यह प्रश्न निर्दिष्ट करता है कि यह सामग्री पाठ के लिए इसका उपयोग करने जा रहा है? नहीं, यह सामान्य प्रश्न नहीं था, और यह एक सामान्य उत्तर था। पाठ, हेडर, आदि के छोटे स्निपेट, बहुत सारे बैंडविड्थ नहीं लेते हैं। शीश, पकड़ लो!

— मैटलैंट

3

ऐसा लगता है कि यह केवल इंटरनेट एक्सप्लोरर में काम करता है, लेकिन "html एम्बेड फोंट" के लिए एक त्वरित Google खोज http://www.spoono.com/html/tutorials/tutorial.php?id=19

यदि आप प्लेटफ़ॉर्म-अज्ञेयवादी रहना चाहते हैं (और आपको चाहिए!) तो आपको छवियों का उपयोग करना होगा, या बस एक मानक फ़ॉन्ट का उपयोग करना होगा।

— जेम्स मस्कट
स्रोत

3

मैंने थोड़ा शोध किया और डायनामिक टेक्स्ट रिप्लेसमेंट (2004-06-15 प्रकाशित) को खोदा ।

यह तकनीक छवियों का उपयोग करती है, लेकिन यह "हाथों से मुक्त" प्रतीत होती है। आप अपना पाठ लिखते हैं, और आप कुछ स्वचालित स्क्रिप्ट को फ़्लाइट पर आपके लिए पृष्ठ पर स्वचालित खोज और प्रतिस्थापित करते हैं।

इसकी कुछ सीमाएँ हैं, लेकिन यह शायद मेरे द्वारा देखे गए बाकी सभी की तुलना में आसान विकल्पों (और अधिक ब्राउज़र संगत) में से एक है।

— केंट फ्रेड्रिक
स्रोत

3

यहां WOFF फोंट - उदाहरण का उपयोग करना भी संभव है

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

— विल्फ़
स्रोत

3

बस इस तरह वास्तविक फ़ॉन्ट के लिए लिंक प्रदान करें और आप जाने के लिए अच्छा होगा

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>

— अभिजीत कुमार
स्रोत

एक अच्छा सरल विकल्प। और इसका उपयोग करने के अधिकार आपके पास हैं। डेवलपर्स

— टिम एरिकसन

2

Typeface.js जावास्क्रिप्ट तरीका:

Typeface.js के साथ, आप अपने वेब पेजों में कस्टम फोंट एम्बेड कर सकते हैं ताकि आपको छवियों के पाठ को प्रस्तुत करना न पड़े

छवियों को बनाने या फ्लैश का उपयोग करने के बजाय, अपनी साइट के ग्राफिक टेक्स्ट को अपने इच्छित फ़ॉन्ट में दिखाने के लिए, आप typeface.js का उपयोग कर सकते हैं और सादे HTML और CSS में लिख सकते हैं, जैसे कि आपके आगंतुकों ने स्थानीय रूप से फ़ॉन्ट स्थापित किया था।

http://typeface.neocracy.org/

— bakkal
स्रोत

2

वैकल्पिक तरीकों के लिए सुंदर वेब टाइपोग्राफी के लिए लेख 50 उपयोगी डिजाइन उपकरण देखें ।

मैंने केवल Cufon का उपयोग किया है । मैंने इसे विश्वसनीय और उपयोग करने में बहुत आसान पाया है, इसलिए मैं इसके साथ फंस गया हूं।

— ब्लेयर
स्रोत

2

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

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

— saadeez
स्रोत