बोल्ड टेक्स्ट लाइन-ऊंचाई सामान्य टेक्स्ट लाइन ऊंचाई से अधिक है

कुछ बुनियादी होना चाहिए जो मैं यहां याद कर रहा हूं। मैंने सोचा कि फ़ॉन्ट-वेट: बोल्ड को नहीं बदला जाना चाहिए कि पाठ कितना लंबवत स्थान लेता है। विशेष रूप से जब रेखा-ऊंचाई फ़ॉन्ट आकार से अधिक होने के लिए सेट की जाती है।बोल्ड टेक्स्ट लाइन-ऊंचाई सामान्य टेक्स्ट लाइन ऊंचाई से अधिक है

http://jsfiddle.net/Arkkimaagi/7xAyy/

मेरी OSX क्रोम पर उन तीन पाठ ऊंचाइयों मेल नहीं खाते। फ़ॉन्ट-वेट वाला दूसरा वाला: बोल्ड बाकी की तुलना में 1px अधिक है। तीसरे div बस समस्या को ठीक करने का एक उदाहरण है (खराब)

मैं कुछ विशिष्ट (18px) यहाँ के लिए line-height स्थापित करने के लिए कोशिश कर रहा हूँ, "ऊर्ध्वाधर लय" के लिए

मेरा प्रश्न है, उदाहरण के समान ही लाइन-ऊंचाई दोनों के साथ मेरे पास बोल्ड और सामान्य टेक्स्ट कैसे हो सकता है?

[संपादित करें:] यहाँ क्या मैं Example of the problem on my osx

इसके अलावा पर अपने मैक देखते हैं, यहाँ है कि मैं क्या "ऊर्ध्वाधर लय" द्वारा जाहिर है: http://www.alistapart.com/articles/settingtypeontheweb - आधारभूत ग्रिड उदाहरण में अधिक दिखाई देता है: http://www.alistapart.com/d/settingtypeontheweb/example_grid.html

स्रोत

2011-12-04 Mikko Tapionlinna

विंडोज़ पर फ़ायरफ़ॉक्स पर पुन: पेश नहीं किया जा सकता है। सिद्धांत में फ़ॉन्ट वजन लाइन ऊंचाई नहीं बदलना चाहिए।"ऊर्ध्वाधर लय" के साथ आपका क्या मतलब है? वास्तव में आप क्या करने की कोशिश कर रहे हैं? रेखा की ऊंचाई निर्धारित करना आमतौर पर किसी भी चीज़ के लिए सबसे अच्छा समाधान नहीं होता है। – Viruzzo

आप 'लाइन-ऊंचाई' के बजाय 'पैडिंग' का उपयोग करने का प्रयास कर सकते हैं। आप उन लोगों के लिए एक छवि भी शामिल करना चाहेंगे जिनके पास ओएसएक्स नहीं है। –

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

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

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

स्रोत

2011-12-04 16:57:52 hooleyhoop

यह अजीब बात है, हालांकि, क्योंकि लाइन-ऊंचाई स्पष्ट रूप से 'पीएक्स' में सेट की गई थी, जो इसे समान ऊंचाई के कारण बनना चाहिए, इससे कोई फर्क नहीं पड़ता कि फ़ॉन्ट का वास्तविक आकार क्या है। 'लाइन-ऊंचाई: 18 पीएक्स; 'वही होना चाहिए चाहे फ़ॉन्ट' 1px' या '100px' आकार में हो। –

धन्यवाद नेट बी, यही मैंने सोचा था। 18 पीएक्स 18 पीएक्स है, है ना? –

हाँ, मैं ब्राउज़र/प्लेटफॉर्म पर अंतर की अपेक्षा करता हूं, लेकिन मुझे अभी भी यह अजीब लगता है कि यह एक दूसरे के बगल में अलग-अलग प्रतिपादन कर रहा है। –

कभी-कभी शीर्ष लंबवत संरेखण जोड़ना इसे हल करेगा (फ़ॉन्ट आकार/परिवार के आधार पर)।

strong { vertical-align: top; }

अपने बेला उदाहरण में, क्योंकि आप कंटेनर (div) पर एक पंक्ति ऊंचाई निर्धारित किया है, तो आप बस निम्नलिखित जोड़ सकते हैं: Chivo फ़ॉन्ट के साथ

span { line-height: 1em; }

स्रोत

2013-09-01 14:16:56 DaveC

मैं का सामना किया है बहुत समान समस्या : http://www.fontsquirrel.com/fonts/chivo। अभी मैं ugliest हैक उपयोग कर रहा हूँ (वर्तमान फ़ायरफ़ॉक्स और क्रोम, IE पर काम करता है अभी तक untested):

strong { vertical-align: top; position: relative; top: -1px; }

मैं काफी मुश्किल के रूप में आप देख Chivo पर हार नहीं की कोशिश ...

स्रोत

2014-01-09 23:36:29

एक की स्थापना कंटेनर और बोल्ड टेक्स्ट दोनों पर पूर्ण रेखा-ऊंचाई, या बोल्ड टेक्स्ट को 1em की लाइन ऊंचाई (जैसे डेवसी ऊपर बताती है) देकर दोनों इसे ठीक करें, उदाहरण के लिए jsfiddle से तुम सिर्फ line-height: 1em

.bolded span { 
    font-weight:bold; 
    line-height: 1em; 
}

जोड़ने की जरूरत है या क्यों एचटीएमएल मानकों का पालन नहीं और बोल्ड स्पैन की बजाय सही टैग का उपयोग? जैसे

strong, em { line-height: 1em }

स्रोत

2014-12-19 10:10:25 Jon

मैं स्थापित करने के लिए नहीं करना चाहती। लाइन-ऊंचाई 1em के रूप में मैं लाइन चाहता हूँ - ठीक है 18px जैसा कि मैंने अपने प्रश्न में कहा था। अगर मेरे पास बोल्ड किए गए शब्दों की कई पंक्तियां होंगी, तो संरेखण 1em = 13px लाइन-ऊंचाई अक्षरों के साथ बंद हो जाएगा। नमूना कोड बस इतना है, नमूना कोड। अवधि के बजाए मजबूत उपयोग करने के लिए कोड को बदलने से यहां मदद नहीं मिलती क्योंकि मैं बस लाइन समस्याओं का प्रदर्शन करना चाहता था। –

मुझे लगता है कि आपने मेरे उत्तर के बिंदु को याद किया है। रेखा ऊंचाई बिल्कुल 18px है। बाल तत्वों पर 1em का उपयोग करने का मतलब है कि 18px की गणना की ऊंचाई का उत्तराधिकारी है, बल्कि अपने स्वयं के मूल्य को लागू करना है। div की रेखा-ऊंचाई को बदलने का सुझाव नहीं दे रहा था, लेकिन बोल्ड सामग्री के लिए 1em निर्दिष्ट करना ताकि इसे div की रेखा-ऊंचाई प्राप्त हो। – Jon

(* सुधार - मैं अपना जवाब संपादित करने के लिए समय से बाहर भाग गया *) बाल तत्वों पर 1em का उपयोग करने का अर्थ है कि वे अपने मूल्य को लागू करने के बजाय 18px की div की रेखा-ऊंचाई का उत्तराधिकारी हैं। मैंने ओएस एक्स क्रोम में इसका परीक्षण किया है और यह एक अच्छा फिक्स है। क्या आपको नहीं लगता कि 'इसे संभालने का कोई बेहतर तरीका है' तो किसी को सुझाव देने के लिए किसी को कम करना एक कठोर है? – Jon

मुझे लगता है कि यह एक फ़ॉन्ट मुद्दा है। मुझे नुनिटो (Google वेब फ़ॉन्ट) के इटैलिक संस्करण के लिए अलग-अलग लाइन ऊंचाई मिलीं। जब मैंने "नुनिटो सैन्स" नामक उस फ़ॉन्ट के एक पुनर्वित्तित संस्करण पर स्विच किया तो समस्या हल हो गई।

स्रोत

2017-12-30 12:16:15 Quotes

बोल्ड टेक्स्ट लाइन-ऊंचाई सामान्य टेक्स्ट लाइन ऊंचाई से अधिक है

उत्तर

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