2017-10-28 14 views
16

किसी को भी कोई विचार है कि सीएसएस पीएक्स या रीम में फ़ोटोशॉप अक्षर अंतर की गणना कैसे करें। उदाहरण: मेरे पास फ़ोटोशॉप में 140 अक्षर अंतर है। अब, सीएसएस पर यह क्या होना चाहिए? या एसएएस के साथ ऐसा करने का कोई तरीका है?सीएसएस पीएक्स या रीम में फ़ोटोशॉप अक्षर अंतर की गणना कैसे करें?

+3

, मैं आम तौर पर सिर्फ इसे से बाहर नरक का परीक्षण, सुनिश्चित करें कि मेरी कंटेनर-चौड़ाई और फ़ॉन्ट आकार मैच डिजाइन कंप्यूटर अनुप्रयोग/psd _exactly_ और उन शब्दों पर बारीकी से ध्यान दें जो नई लाइनें शुरू होती हैं। शुरू करने के लिए .01em एक अच्छी जगह है। – admcfajn

+2

@admcfajn मैं आपसे सहमत हूं लेकिन जैसा कि हम ग्राहक के लिए काम करते हैं और वे पीएक्स को पीएक्स में अपनी वेबसाइट का परीक्षण करते हैं। और उस स्थिति में, मेरे पास हर बार गणना या प्रयोग करने का समय नहीं है। –

+2

एक और तकनीक जिसे मैं अक्सर सटीक फ्रंट-एंड काम के लिए उपयोग करता हूं वह प्रतिशत ढूंढना है ... कहें कि आपके पास फ़ॉन्ट आकार है: 50 पीएक्स, लेटर-स्पेसिंग 3 पीएक्स। 3/50 = 0.06। आपके psd का उपयोग कर कौन सी इकाइयां हैं? क्या आप फ़ोटोशॉप से ​​सीएसएस निर्यात करने के लिए पूछ रहे हैं? स्केच इसके लिए एक बेहतर कार्यक्रम है। यह बहुत तेज़ हो जाता है कि आप सोच सकते हैं। आपको हर शब्द का परीक्षण करने की ज़रूरत नहीं है, पीएसडी के कितने डिज़ाइन तत्व हैं? अच्छी डिजाइन दोहराई जाती है, इसलिए यदि आप आवश्यक हो तो क्यूए के दौरान शायद प्रत्येक शैलियों के लिए आधार रेखा पा सकें और इसे ठीक-ठीक कर सकें। क्या आप प्री-कंपाइलर का उपयोग कर रहे हैं? इसमें कुछ फ़ंक्शंस फेंकने से मदद मिल सकती है। – admcfajn

उत्तर

14

फ़ोटोशॉप में 1000 से मूल्य को विभाजित करना और em में परिणाम को पिक्सेल-परिपूर्ण परिणाम देता है।

उदाहरण के लिए, फ़ोटोशॉप में कहें कि आपके पास 50 का अक्षर अंतर है, जिसके परिणामस्वरूप सीएसएस letter-spacing: 0.05em होगा।

एक साधारण समारोह बनाएं यदि आप गणित हर कार्य करने में सहायता करने के लिए: ईमानदारी से

@function letter-spacing($ps-value) { 
    @return ($ps-value/1000) * 1em 
} 
+4

हो सकता है कि आप सही हों और मैंने आपके कोड को भी आजमाया लेकिन जैसा कि मैंने पाया कि यह सटीक नहीं है। जैसा कि यह फ़ोटोशॉप में दृश्यमान है। लेकिन प्रयास के लिए सभी तरह से धन्यवाद। –

+3

@ हार्डेनराहुल यह सटीक नहीं होने की उम्मीद है, लेकिन स्टीव के जवाब (वह पूरी तरह से सही है) के कारण नहीं, बल्कि फ़ोटोशॉप और ब्राउज़रों के बीच फ़ॉन्ट प्रतिपादन अंतर के कारण। – Flying

+0

@flying जिसका मतलब है कि उत्तर 100% सटीक नहीं होना चाहिए जैसा कि होना चाहिए। –

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