2009-07-21 5 views
27

के साथ संकीर्ण वर्ण बनाएं मैं सीएसएस के साथ एरियल जैसी फोंट की वर्णों की चौड़ाई कैसे कम करूं?सीएसएस

+0

मुझे लगता है कि यह सीएसएस 3 में संभव है लेकिन सीएसएस 2 –

उत्तर

21

आप चरित्र की चौड़ाई को कम नहीं कर सकते हैं, लेकिन आप अक्षर-अंतर को कम कर सकते हैं।

span { 
letter-spacing: 0px; 
} 
+2

भी दशमलव अंश (उदा। 0.2 पीएक्स) और नकारात्मक (उदा। -1 पीएक्स, -0.2 पीएक्स) लेता है, ताकि आप कुछ सुंदर जुर्माना नियंत्रण प्राप्त कर सकें। – Val

+2

ओह, और विभिन्न इकाइयां, इसलिए यह आकार-स्वतंत्र हो सकती है: -1%, -0.01em - यदि प्रश्न में पाठ आकार में भिन्न होता है तो आसान। – Val

+3

@ वैल, मुझे नहीं पता कि आप किस ब्राउजर का उपयोग कर रहे थे/लेकिन तीन साल बाद क्रोम 21 में दशमलव अंश काम नहीं करते हैं। – JohnK

16

font-stretch property of CSS 3 के साथ एक फ़ॉन्ट खींचना संभव होगा।

+1

लेकिन वेबकिट ब्राउज़र (Google क्रोम, ऐप्पल सफारी, ...) –

+19

@PrimozRome के साथ समर्थित नहीं है इसलिए मैंने भविष्य के तनाव का उपयोग किया। – Gumbo

+4

यह अभी भी समर्थित नहीं है, उत्तर के बाद 6 साल बीत चुके हैं। वैसे भी जवाब के लिए धन्यवाद। :) काफी –

24

अपने फ़ॉन्ट-पारिवारिक घोषणा में संकीर्ण फ़ॉन्ट का उपयोग करें। ये बहुत आम हैं।

font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;

1

आप इस

+0

एफवाईआई - यह केवल कुछ फ़ॉन्ट्स –

7

तुम बस अपने पाठ पैमाने पर कर सकते हैं के लिए अपने सीएसएस कोड में font-weight: उपयोग कर सकते हैं।

.my-text { 
    transform: scaleX(0.5); 
} 

लेकिन transform-origin से सावधान जो (यदि आप इसे इसके केंद्र में एक मूल के साथ पैमाने पर उदाहरण के लिए) अपने पाठ कहीं और ले जाते बना सकते हैं: उदाहरण के लिए।

+0

के साथ काम करता है मैंने 'SELECT' तत्व में टेक्स्ट के लिए फ़ायरफ़ॉक्स 54 में' ट्रांसफॉर्म 'का उपयोग किया था। यह मेरे 'SELECT' तत्व के अंदर टेक्स्ट को सही ढंग से स्केल कर दिया और' SELECT' तत्व सही ढंग से खींचा, लेकिन यह ऑब्जेक्ट्स के बीच अंतर को समायोजित करने में विफल रहा। 'SELECT' तत्व एक ही स्थान लेता है, भले ही यह क्षैतिज रूप से छोटा हो। – JBH