पहले अक्षर सीएसएस

Question

पर बाईं ओर स्थान मैं Google फ़ॉन्ट 'लेटो' का उपयोग कर रहा हूं और मुझे बाएं और पाठ को ठीक से संरेखित करने में समस्याएं आ रही हैं ... फ़ॉन्ट (जब बड़े) में कर्नेल स्पेस होता है पहले अक्षर और बिना अंतरिक्ष के बाएं संरेखित !?

तो यहाँ भी एक बेला:

<h1>Hello</h1> <p>Hello, this is sentance</p> 

FIDDLE

इसके अलावा, मार्जिन-बाएं (magin-बाएँ: -10px) पर एक नकारात्मक मूल्य जोड़ने सिर्फ एक की तरह लगता है भयानक कामकाज ... और यह अलग-अलग फ़ॉन्ट-आकारों के लिए समग्र रूप से काम नहीं करेगा, जब तक कि व्यक्तिगत रूप से आवश्यकतानुसार समायोजित न हो ... सख्ती से बेहतर समाधान होना चाहिए?

क्या कोई मदद कर सकता है?

Answer 1

सफेद जगह वहां है क्योंकि यह एक शीर्षलेख है। आप ऐसा करके छोड़ दिया करने के लिए इसे संरेखित कर सकते हैं:

margin-left: -10px; 

Answer 2

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

html,body { 
    font-family:Lato; 
    margin:0px; 
    padding:0px; 
} 

p{margin-left: 11px;} 

DEMO

Answer 3

पहले उपयोग करके देखें:

इस सीएसएस जोड़ें:

इस हल करने के लिए सबसे अच्छा तरीका है 0 करने के लिए सभी मार्जिन और html और शरीर टैग पर paddings स्थापित करने के लिए है पत्र

h1:first-letter { 
    margin-left: -10px 
} 

http://jsfiddle.net/w25j9L7o/1/

Answer 4

आप गिल सैन्स फ़ॉन्ट का उपयोग कर सकते हैं। यह लेटो के समान ही है। सीएएस में नहीं लैटो फ़ॉन्ट में समस्या है।

Here is your link for GillSans

Answer 5

ठीक है, हर किसी को लाइन एक हैडर होने के कारण जो कहते हैं कि यह स्वत: गद्दी या मार्जिन की वजह से है गलत है। सबूत के तौर पर इस बेला देखें:

http://jsfiddle.net/w25j9L7o/26/

अग्रणी अंतरिक्ष ब्राउज़र या सीएसएस या डोम/ब्राउज़र स्तर पर कुछ और द्वारा प्रदान की गई नहीं की जा रही है। यह फ़ॉन्ट है। H ग्लाइफ में इसके चारों ओर कुछ अंतर्निहित पैडिंग है, और फ़ॉन्ट आकार जितना बड़ा होगा, उतना ही ध्यान देने योग्य होगा कि पैडिंग होगी।

यहां तक ​​कि अगर आप क्षतिपूर्ति करने के लिए नकारात्मक हाशिए का उपयोग करें:

1. चरित्र पर ही स्थानांतरण जाता है, जो खाली जगह भी शामिल है, ताकि खाली जगह के ऊपर फिसलने की जाएगी और साथ ही, लेआउट को प्रभावित करने वाले। दृश्यमान चरित्र रिक्त स्थान में फिसल नहीं रहा है, यदि आप इसे ठीक करने के लिए सीएसएस का उपयोग करते हैं तो संपूर्ण चरित्र (दृश्यमान और अदृश्य) बाईं ओर स्थानांतरित हो रहा है।

2. आपको उस ऑफसेट को फ़ॉन्ट आकार के आधार पर समायोजित करने या अंतर्निहित प्रतिशत को समझने की आवश्यकता होगी ताकि ऑफ़सेट किसी भी फ़ॉन्ट-आकार सेट के साथ बढ़ता जा सके।

या आप केवल एक अलग फ़ॉन्ट का उपयोग कर सकते हैं जिसमें यह विशेषता नहीं है।

Answer 6

आप kernjs.com से kern.js प्राप्त कर सकते हैं और अपनी वेबसाइट पर कहा गया है, जैसे कि अपनी वेबसाइट पर कहा गया है, क्लिक करें और अपनी कर्नलिंग, लाइन-ऊंचाई, अक्षर प्लेसमेंट को समायोजित करने के लिए खींचें, जब आप पूरा कर लें, जेनरेट किए गए सीएसएस की प्रतिलिपि बनाएँ और इसे अपने स्टाइलशीट में उपयोग करें "

Answer 7

यह समस्या मुझे पागल कर रही थी, इसलिए यहां एक सुरुचिपूर्ण समाधान है जो :: प्रथम-अक्षर चयनकर्ता का उपयोग करता है। उदाहरण के लिए मैं जोड़कर अपने स्पेसिंग समस्या को ठीक करने में सक्षम था:

#yourDiv::first-letter {margin-left:-5px;} 

आशा है कि यह मेरी स्थिति में मौजूद अन्य लोगों के लिए काम करे। यहां अधिक जानकारी के लिए एक लिंक दिया गया है: http://www.w3schools.com/cssref/sel_firstletter.asp

Answer 8

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

#yourDiv::first-letter { 
    margin-left: -0.12em; 
}