2015-01-23 18 views
12

के साथ कस्टम फ़ॉन्ट लाइन-ऊंचाई ठीक करें मुझे एक नए वेबैप पर एक कस्टम फ़ॉन्ट का उपयोग करते समय एक अजीब समस्या का सामना करना पड़ रहा है, जिस पर मैं काम कर रहा हूं।सीएसएस

यह कस्टम फ़ॉन्ट (एफएफ दीन) स्वाभाविक रूप से खड़ी ऑफ केंद्र line-height, जो मुझे बटन और इनपुट की तरह तत्व पर शीर्ष अंतरिक्ष क्षतिपूर्ति करने के लिए कुछ गद्दी-टॉप हैक डाल करने के लिए मजबूर है लगता है।

उदाहरण: हरे रंग में फ़ॉन्ट (Helvetica Neue) सही ढंग से संरेखित है, जहां हम का उपयोग करें (एफएफ दीन) कस्टम फ़ॉन्ट खड़ी ऑफ केंद्र है:

enter image description here

वहाँ किसी भी ज्ञात तरीका है सीएसएस पर उस केंद्रित मुद्दे को स्वाभाविक रूप से ठीक करने के लिए, किसी भी तरह से फ़ॉन्ट बेसलाइन व्यवहार को मजबूर करने के लिए?

धन्यवाद।

+1

यह लाइन-ऊंचाई के बारे में नहीं है बल्कि ग्लिफ के लंबवत प्लेसमेंट के बारे में है। –

+0

इस के लिए कोई अन्य व्यावहारिक समाधान? स्वीकार्य समाधान के अलावा? मैं फ़ॉन्ट को मैन्युअल रूप से संपादित नहीं करना चाहता हूं –

उत्तर

2

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

UIButton custom font vertical alignment

1

यह कुछ ऐसा है जो मैंने हाल ही में किया है। मैं जिस कारण से उपयोग कर रहा था, उस फोंट पर आधार रेखा रेखाबद्ध नहीं हुई थी, इसलिए मैंने नीचे से गठबंधन किया और पैडिंग जोड़ने की बजाए लाइन ऊंचाई बढ़ा दी।

इस प्रकार मैंने अपनी समस्या हल की है, अगर आपके पास कोड पेन का लिंक है तो मैं यह जांच सकता हूं कि यह आपके लिए काम करेगा या कोई अन्य समाधान बेहतर होगा।

p { 

    vertical-align: text-bottom; 
    line-height: 1.5; 

} 
+0

मैंने कोशिश की है लेकिन इससे कुछ भी नहीं बदला है, मैं वास्तव में कोडन अप नहीं कर सकता क्योंकि यह फ़ॉन्ट सुरक्षित है – kirkas

6

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

समस्या से निपटने के कई तरीके हैं। यदि अक्षरों के नीचे बहुत अधिक जगह है, तो line-height को कम करने से यह छोटा हो जाता है, लेकिन यह उपर्युक्त स्थान को भी प्रभावित करता है। शीर्ष पैडिंग एक अर्थ में मदद करता है, लेकिन यह तत्व द्वारा कब्जा कर लिया गया कुल ऊंचाई बढ़ाता है। आप vertical-align के साथ भी खेल सकते हैं, लेकिन यह लाइन बक्से की ऊंचाई को प्रभावित करता है।

शायद सबसे सरल दृष्टिकोण यह सोचते हैं कि समस्या एक एक लाइनर पाठ के साथ सौदों, सापेक्ष स्थिति उपयोग करने के लिए है। संबंधित स्थिति केवल लेआउट को प्रभावित किए बिना, किसी निर्दिष्ट तरीके से सामग्री को विस्थापित करती है। इसके लिए आपको एक रैपर की आवश्यकता होगी, यानी एक तत्व जिसमें टेक्स्ट होता है, ताकि आप पृष्ठभूमि को न केवल टेक्स्ट को विस्थापित कर सकें।

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

<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'> 
 
<style> 
 
div { font-family: Candal } 
 
div { background: lightgreen; font-size: 200%} 
 
</style> 
 
<p>What we have got initially: 
 
<div>BRAKE HOSE AND AIR CHAMBER</div> 
 
<p>Reducing line height (even “setting solid”) does not really help: 
 
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div> 
 
<p>But displacing the text upwards by 0.1em does: 
 
<div><span style="position: relative; bottom: 0.1em"> 
 
BRAKE HOSE AND AIR CHAMBER</span></div>

+0

यह काम कर रहा है, लेकिन मैं एक स्केलेबल तरीके की तलाश में हूं यह मेरे सभी तत्व (बटन/इनपुट) में बदलने के लिए, मैं हर बटन में अवधि नहीं डाल सकता, और यह इनपुट संरेखण को ठीक नहीं करेगा। – kirkas

+0

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

1

मैंने पहले भी रूप में अच्छी तरह है कि समस्या पड़ा है, यहां तक ​​कि विभिन्न ब्राउज़रों अलग लाइन ऊंचाइयों दिया! मुझे लगता है कि यह वेबफॉन्ट जेनरेटर का उपयोग करते समय होता है और जहां तक ​​मुझे पता है कि अलग-अलग लाइन-ऊंचाई का उपयोग करने के साथ ही तय किया जा सकता है।

क्या आपने फोंटक्वायरल का प्रयास किया था? विभिन्न परिणामों के साथ कुछ विकल्प हैं।

http://everythingfonts.com/font-face

http://www.font2web.com/

http://www.fontsquirrel.com/tools/webfont-generator

https://www.web-font-generator.com/

+0

फ़ॉन्ट्सक्वायरल में एक्स-ऊंचाई को संशोधित करने का विकल्प है, फोंटशॉप से ​​फ़ॉन्ट को संरक्षित किया गया है .. – kirkas

1

क्रोम में मुझे पता चला है कि यदि आप फ़ॉन्ट-फेस घोषणा का उपयोग कर रहे हैं। आप लाइन-ऊंचाई समस्या को या तो शैली = "" कॉल के साथ एचटीएमएल, या बस अपने सीएसएस में फ़ॉन्ट घोषणा के बाद लाइन-ऊंचाई घोषित कर सकते हैं।

मुझे लगता है कि क्रोम सिर्फ यह नहीं जानता कि रेखा-ऊंचाई की गणना कैसे करें जब तक कि यह कस्टम फ़ॉन्ट प्रदान नहीं करता है।