सीएसएस के साथ एक पूरी वेबसाइट के लिए एक ही फ़ॉन्ट लागू करना

Question

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

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

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

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

Comments

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

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

— ओकम

पूरे HTML दस्तावेज़ में वैश्विक फ़ॉन्ट को लागू करने के

— davidcondrey

मेरा सुझाव है कि आप कभी भी (Jan Hančič) के उत्तर का उपयोग न करें क्योंकि यह आपके फ़ॉन्ट को सभी html टैगों पर लागू करता है यहां तक ​​कि वह टैग भी जिसे आप बदलना पसंद नहीं करते हैं। उदाहरण के लिए: यदि आप एक td टैग के अंदर एक img टैग बनाते हैं और इसे टेक्स्ट-संरेखित करते हैं: केंद्र और ऊर्ध्वाधर-संरेखित: मध्य। इस तरह से आपके img टैग का उपयोग कभी भी TD का केंद्र नहीं होगा। सबसे अच्छा तरीका: अपने दस्तावेज़ की जाँच करें और उन टैग्स के लिए फ़ॉन्ट प्रारूप लागू करें जिनमें उनके ग्रंथ हैं

— महदी जज़िनी

Answer 1

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

body {
  font-family: Algerian;
}

आपके पृष्ठ के सभी तत्व इस फ़ॉन्ट-परिवार को विरासत में देंगे (तब तक, जब तक कि आप इसे बाद में ओवरराइड नहीं करते)।

Comments

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

— जुक्का के। कोर्पेला

तुम सही हो। मैं सीएसएस के साथ काम कर रहा हूँ इतने लंबे समय के लिए मैं इस तरह की बातें भूल जाता हूं :)

— Jan Hančič

या बेहतर अभी तक, दो शीर्ष उत्तरों को मिलाएं ... शरीर, * {फ़ॉन्ट-परिवार: अल्जीरियाई;}

— इम्स

Answer 2

*{font-family:Algerian;}

नीचे बेहतर समाधान सीएसएस के साथ एक पूरी वेबसाइट पर एक ही फ़ॉन्ट लागू करना

Comments

दिलचस्प रूप से पर्याप्त है, यह एरिक मेयेर के सीएसएस रीसेट का उपयोग करते समय काम नहीं करता है

— 15:19

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

— मैक्स स्ट्रेटर

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

— जूलियन एफ। वेनर्ट

चूँकि noboy ने इसका उल्लेख किया है, इसलिए सार्वभौमिक चयनकर्ता धीमा होना जानता है। उस पर यहाँ और अधिक: clairecodes.com/blog/…

— Terje Solem

या बेहतर अभी तक, दो शीर्ष उत्तरों को मिलाएं ... शरीर, * {फ़ॉन्ट-परिवार: अल्जीरियाई;}

— इम्स

Answer 3

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

*{
  font-family:Algerian;
}

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

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

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

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

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

यह इस परिवार को दस्तावेज़ में सभी तत्वों पर लागू करेगा सिवाय वर्ग "fa" के तत्वों के अलावा जो फॉंटवॉफ़ल डिफ़ॉल्ट वर्ग को संदर्भित करता है, आप इस तरह एक से अधिक वर्ग को लक्षित कर सकते हैं:

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

Comments

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

— लक्ष्मण

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

— महदी जज़िनी

Answer 4

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

* { font-family: Algerian !important;}

Answer 5

* { font-family: Algerian; }

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

Answer 6

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

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

body {
    font-family: Algerian !important;
}

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

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

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

Answer 7

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

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

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

Answer 8

ठीक है, इसलिए मैं इस मुद्दे पर था जहाँ मैंने कई अलग-अलग विकल्पों की कोशिश की।

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

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

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

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

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

अगर मैं तब चाहता था कि मेरे सभी H1 टैग कुछ और हों तो मुझे कहना चाहिए कि sans sarif मैं कुछ ऐसा करूंगा

h1{
   font-family: Sans-sarif;
}

जिस स्थिति से केवल मेरे H1 टैग्स ही sans-sarif फॉन्ट होंगे और मेरे पेज का बाकी हिस्सा Ubuntu-Lone फॉन्ट होगा

Answer 9

बूटस्ट्रैप में, वेब इंस्पेक्टर का कहना है कि हेडिंग 'वारिस' पर सेट हैं

मुझे नए फॉन्ट में अपना पेज सेट करने की ज़रूरत थी

div, p {font-family: Algerian}

वह .scss में है

Answer 10

*{font-family:Algerian;}

इस html ने मेरे लिए काम किया। WordPress में कैनवास सेटिंग्स में जोड़ा गया।

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