Html वेब पेज पर सभी तत्वों के लिए फ़ॉन्ट विशेषताएँ कैसे निर्दिष्ट करें?

127

जब मैं फ़ॉन्ट परिवार, फ़ॉन्ट आकार, रंग आदि सेट करता हूं, तो ऐसा लगता है कि कुछ नेस्टेड तत्व बदसूरत ब्राउज़र डिफॉल्ट्स के साथ इन्हें ओवरराइड करते हैं।

क्या मुझे वास्तव में अपने पृष्ठ पर किसी भी प्रकार के तत्व के लिए उन दर्जनों बार निर्दिष्ट करना चाहिए, या क्या उन्हें एक बार और हमेशा के लिए विश्व स्तर पर स्थापित करने का एक तरीका है?

उसको कैसे करे?

css

— गर्व सदस्य
स्रोत

1

वर्तमान में आप फ़ॉन्ट परिवार, आकार कैसे सेट कर रहे हैं ...?

— दि कूप

251

* {
 font-size: 100%;
 font-family: Arial;
}

तारांकन का तात्पर्य सभी तत्वों से है।

— Bazzz
स्रोत

15

यह काम करता है, लेकिन यह सबसे अच्छा समाधान नहीं है। जब ब्राउज़र '*' को देखता है तो यह पृष्ठ के सभी HTML तत्वों पर लूप करता है और सीएसएस को उन पर लागू करता है। यहां तक कि उन तत्वों के लिए भी जहां नियम का कोई मतलब नहीं है। HTML के आकार के आधार पर यह पेज रेंडरिंग को धीमा कर सकता है।

— सीज़र कैन्सा

4

सहमत हैं, लेकिन यह सभी तत्वों के लिए सीएसएस लागू होता है, जैसा कि BugAlert ने पूछा था। यदि कोई सभी तत्वों को प्रभावित करना चाहता है, तो प्रदर्शन थोड़ा कम करने की उम्मीद कर सकता है। :)

— बाज़ू

1

आप प्रत्येक शैली की घोषणा के अंत में महत्वपूर्ण जोड़ सकते हैं।

— एस ..

4

मुझे पता है कि यह 5 साल हो गया है, लेकिन मुझे आश्चर्य है कि किसी ने भी अब तक ध्यान नहीं दिया है: आपको "फ़ॉन्ट-परिवार" में केवल एक विंडोज फ़ॉन्ट निर्दिष्ट नहीं करना चाहिए (जब तक कि यह एक वेबफ़ोन न हो) - एरियल, हेल्वेटिका, सैन्स-सेरिफ़ अधिक है संगत।

— रोबा

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}फ़ॉन्ट की विरासत, और यदि आप वास्तव में ओवरराइड के उपयोग से बचना चाहते हैं: *,:before,:after{font-family:inherit;}यदि आपको एक सार्वभौमिक चयनकर्ता का उपयोग करना चाहिए, तो इसके बजाय विरासत का उपयोग करें।

— दारचीर

18

यदि आप IE का उपयोग कर रहे हैं, तो संभावना है कि यह कुछ तत्वों के लिए ब्राउज़र डिफॉल्ट पर वापस आ जाएगा, जैसे टेबल। आप निम्नलिखित सीएसएस की तरह कुछ के साथ मुकाबला कर सकते हैं:

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

संपादित करें: आप सीएसएस रीसेट पर पढ़ना चाह सकते हैं; इस तरह से धागे देखें

— पॉल
स्रोत

10

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

एरिक मेयर रीसेट रीसेट करें। देखें।

— क्रिस कॉक्स
स्रोत

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

— डार्थ कोडर

1

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

— क्रिस कॉक्स

धन्यवाद! मैंने इसकी कोशिश की और इसने मेरी अधिकांश समस्याओं को हल कर दिया है। हालाँकि, मैं अभी भी अपनी स्टाइल शीट के विनिर्देशों के बावजूद क्रोम और फ़ायरफ़ॉक्स के बीच फ़ॉन्ट आकार में अंतर देख सकता हूँ। इस बारे में कोई विचार? इसके अलावा, क्या यह एक अच्छा अभ्यास है?

— डार्थ कोडर

8

आप उन्हें बॉडी टैग में सेट कर सकते हैं

body
{
    font-size:xxx;
    font-family:yyyy;
}

— jimplode
स्रोत

13

यह सटीक नहीं है क्योंकि अधिकांश ब्राउज़र इस फ़ॉन्ट को कुछ तत्वों पर लागू नहीं करेंगे (तत्व फ़ॉन्ट-शैली को इनहेरिट नहीं करेंगे)

— ट्रैविस -144

@ ट्रैविस -142 क्या ब्राउज़र? कौन से तत्व? आप जानते हैं कि एक युक्ति है जिसे सभी ब्राउज़रों को पालन करना चाहिए।

— बमीह

@Bamieh क्रोम 72 पर एक विशिष्ट उदाहरण (जो मुझे यहां लाया था, वास्तव में) यह है कि यह फ़ॉन्ट को बटन या चयन मेनू में पाठ पर लागू नहीं करता है।

— Nick Silvestri

2

यदि आप अपने bodyतत्व के लिए सीएसएस विशेषताओं को निर्दिष्ट करते हैं तो इसे कुछ <body></body>समय के भीतर लागू करना चाहिए जब तक आप उन्हें स्टाइलशीट में बाद में ओवरराइड नहीं करते हैं।

— टायलर ट्रीट
स्रोत

0

यदि आप शरीर में सभी तत्वों की शैलियों को सेट करना चाहते हैं, तो आपको अगला कोड ^ का उपयोग करना चाहिए

  body{
    color: green;
    }

— Stepan Poperechnyi
स्रोत