2012-04-06 20 views
64

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

button{font-family:Algerian;} 
div{font-family:Algerian;} 

विधि नीचे लिखा भी अत्यधिक हतोत्साहित किया जाता है:

div,button,span,strong{font-family:Algerian;} 
+3

font-family एक विरासत मूल्य है, तो क्यों न सिर्फ शरीर पर इसे परिभाषित? –

+0

आप जुक्का के। कोर्पेला से जवाब चुनना चाहते हैं। यह लगभग एक महीने के लिए वर्तमान उठाए गए उत्तर से पहले है, और वैसे भी लगभग समान सामग्री है। – okm

+0

संभावित डुप्लिकेट [संपूर्ण HTML दस्तावेज़ में वैश्विक फ़ॉन्ट कैसे लागू करें] (http://stackoverflow.com/questions/7025756/how-to-apply-global-font-to-whole-html-document) – davidcondrey

उत्तर

68

रखो font-family एक body चयनकर्ता में घोषणा:

body { 
    font-family: Algerian; 
} 

सभी अपने पृष्ठ पर तत्व तो यह font-family प्राप्त कर लेंगे (जब तक, ज़ाहिर है आप ओवरराइड की बाद में)।

+8

एक तत्व को केवल अपने माता-पिता से 'फ़ॉन्ट-फ़ैमिली' प्राप्त होता है जब * नहीं * स्टाइल शीट तत्व के लिए फ़ॉन्ट परिवार सेट करता है। ब्राउज़र स्टाइल शीट आम तौर पर कम से कम 'इनपुट', 'textarea', 'code',' tt', और 'pre' तत्वों के लिए फ़ॉन्ट परिवार सेट करते हैं। –

+0

आप सही हैं। मैं इतने लंबे समय तक सीएसएस रीसेट के साथ काम कर रहा हूं, मैं इस तरह की चीजों को भूल जाता हूं :) –

15
* { font-family: Algerian; } 

सार्वभौमिक चयनकर्ता * किसी भी तत्व को संदर्भित करता है।

body, input, textarea { 
    font-family: Algerian; 
} 

body { 
    font-family: Algerian !important; 
} 

वहाँ अभी भी पूर्व जैसे तत्वों पर एक monospace फॉन्ट होगा:

2

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

महत्वपूर्ण नोट: यदि बहुत कम लोगों को यह फ़ॉन्ट उनके ओएस पर स्थापित किया गया है, तो सूची में दूसरा फ़ॉन्ट उपयोग किया जाएगा। यहां आपने कोई दूसरा फ़ॉन्ट परिभाषित नहीं किया है, इसलिए डिफ़ॉल्ट सेरिफ़ फ़ॉन्ट का उपयोग किया जाएगा, और टाइम्स, टाइम्स न्यू रोमन शायद लिनक्स पर छोड़कर होगा।
दो विकल्प वहां: @ फ़ॉन्ट-फेस का उपयोग करें यदि आपका फ़ॉन्ट डाउनलोड करने योग्य फ़ॉन्ट के रूप में उपयोग से मुक्त है या फ़ॉलबैक जोड़ें: दूसरा, तीसरा, आदि और अंत में एक डिफ़ॉल्ट परिवार (sans-serif, cursive (*) , मोनोस्पेस या सेरिफ़)। उपयोगकर्ता के ओएस पर मौजूद सूची में से पहला का उपयोग किया जाएगा।

(*) विंडोज पर डिफ़ॉल्ट कर्सर कॉमिक सैन्स है। अगर आप विंडोज उपयोगकर्ताओं को ट्रॉल करना चाहते हैं, तो ऐसा न करें :) यह फ़ॉन्ट आपके बच्चों के जन्मदिन को छोड़कर भयानक है जहां इसका स्वागत है।

17

कि मोबाइल उपकरणों सुनिश्चित सार्वभौमिक चयनकर्ता * के साथ साथ महत्वपूर्ण का उपयोग करके अपने डिफ़ॉल्ट फ़ॉन्ट के साथ फ़ॉन्ट परिवर्तन नहीं होगा:

* { font-family: Algerian !important;} 
86
*{font-family:Algerian;} 

इस

+2

दिलचस्प बात यह है कि यह एरिक मेयर के सीएसएस रीसेट – ianbeks

+0

का उपयोग करते समय काम नहीं करता है क्या यह प्रत्येक परिवार को फ़ॉन्ट परिवार लागू नहीं करता है? ऐसा लगता है कि यह इसे अनावश्यक तत्वों (जैसे ) पर लागू करेगा और अक्षम होगा। मैं निश्चित रूप से गलत हो सकता था, लेकिन मैंने सब कुछ के लिए शैली लागू करने के साथ सावधानी बरतने के लिए पढ़ा है। –

+0

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

-1
*{font-family:Algerian;} 

इस एचटीएमएल पसंद है मेरे लिए काम किया वर्डप्रेस में कैनवास सेटिंग्स में जोड़ा गया।

अच्छा लगता है - धन्यवाद!

1

ठीक है तो मुझे यह समस्या थी जहां मैंने कई अलग-अलग विकल्पों की कोशिश की।

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

मैं इसे लागू करने में सक्षम था ... अंत में यहाँ मेरे कार्य कोड

मैं अपने पूरे वेबसाइट के लिए लागू करने के लिए इस चाहता था इसलिए मैं इसे सीएसएस दस्तावेज़ में सबसे ऊपर रखा है।डिव टैग की सब से ऊपर (नहीं है कि यह मायने रखती है, सिर्फ इतना पता है कि किसी भी व्यक्ति के फोंट आप अपनी स्क्रिप्ट पोस्ट आवंटित प्राथमिकता दी जाती है)

@font-face{ 
    font-family: "Ubuntu-LI"; 
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"), 
    url("../fonts/Ubuntu/Ubuntu-LI.ttf"); 
} 

*{ 
    font-family:"Ubuntu-LI"; 
} 

तो मैं तो कुछ और ही बिना कहते हैं की सुविधा देता है होना करने के लिए मेरी एच 1 के सभी टैग चाहता था जो मामले से केवल मेरे एच 1 टैग बिना sarif फ़ॉन्ट और मेरा पेज के बाकी उबंटू-LI फ़ॉन्ट

0

कृपया शीर्ष पर रखें होगा होगा कुछ की तरह

h1{ 
    font-family: Sans-sarif; 
} 

sarif मैं क्या करना होगा आपके पृष्ठ (ओं) के अगर "शरीर" को 1 और उसी फ़ॉन्ट के उपयोग की आवश्यकता है:

<style type="text/css"> 
body {font-family:FONT-NAME ; 
    } 
</style> 

टैग <body> और </body> के बीच सब कुछ एक ही फॉन्ट

20

सार्वभौमिक चयनकर्ता * सभी तत्वों को संदर्भित करता है, इस सीएसएस यह तुम्हारे लिए क्या करेंगे:

*{ 
    font-family:Algerian; 
} 

लेकिन दुर्भाग्य से यदि आप FontAwesome आइकन, या किसी भी आइकन के लिए अपने स्वयं के फ़ॉन्ट परिवार की आवश्यकता है, तो यह केवल आइकन को नष्ट कर देगा और वे आवश्यक दृश्य नहीं दिखाएंगे।

इससे बचने के लिए आप :not का भी उपयोग करेंगे, fontawesome आइकन का एक नमूना <i class="fa fa-bluetooth"></i> है, इसलिए केवल आप का उपयोग कर सकते हैं:

*:not(i){ 
    font-family:Algerian; 
} 

इस के साथ तत्वों को छोड़ दस्तावेज़ में सभी तत्वों को यह परिवार लागू होगी टैग नाम <i>, आप भी कक्षाओं के लिए यह कर सकते हैं:

*:not(.fa){ 
    font-family:Algerian; 
} 

इस वर्ग के "पिता" जो defau fontawesome को संदर्भित करता है के साथ तत्वों को छोड़ दस्तावेज़ में सभी तत्वों को यह परिवार लागू होगी lt वर्ग, आप भी एक से अधिक वर्ग इस तरह लक्षित कर सकते हैं:

*:not(i):not(.fa):not(.YourClassName){ 
    font-family:Algerian; 
} 
+0

यह उत्तर बूटस्ट्रैप (ग्लिफिकॉन) और फ़ॉन्ट भयानक – Lakshman

+0

से आइकन के उपयोग के कारण वेबपृष्ठों में स्टाइल के वर्तमान उपयोग के अनुसार एक बहुत आवश्यक विवरण देता है कृपया ध्यान दें: (चयनकर्ता नहीं) CSS3 है जो सभी ब्राउज़रों के साथ संगत नहीं है। आईई 9 + हमें दुनिया भर के सभी लोगों के लिए आईई-9 परिवारों को हमेशा के लिए छोड़ने के लिए कम से कम 10 साल का इंतजार करना होगा: डी: '( –