2012-11-22 10 views
6

में समतुल्य अक्षर-स्थान पर कनवर्ट करें मैं वर्तमान में एक PSD से साइट बना रहा हूं। अधिकांश फोंट में -25 (<- AV-> का लेटर-ट्रैकिंग है: मुझे लगता है कि यह अक्षर अंतर के लिए प्रतीक है?)।फ़ोटोशॉप में अक्षर-ट्रैकिंग मान सेट को सीएसएस

मुझे सीएसएस में एक ही प्रभाव कैसे मिलेगा? मुझे पता है कि संपत्ति letter-spacing: X है लेकिन इसमें प्रतिशत नहीं लगते हैं और -25 पीएक्स या अंक एक बड़ी संख्या होगी!

+0

संभावित डुप्लिकेट [सीएसएस अक्षर-रिक्ति vs की गणना कैसे करें। टाइपोग्राफी में "ट्रैकिंग"? (https://stackoverflow.com/questions/2760784/how-to-calculate-css-letter-spacing-v-s-tracking-in-typography) – davidcondrey

उत्तर

9

आप px के बजाय em आयाम का उपयोग कर सकते हैं, इस प्रकार फ़ॉन्ट आकार के सापेक्ष अंतर को आकार दे रहे हैं (इसलिए फ़ोटोशॉप का 25% कहीं .25em है)।

+0

यह गलत है। 25% = 0.025em। –

2

अगर आपकी समस्या इकाई रूपांतरण के साथ बस है, तो आप px

के बजाय em उपयोग कर सकते हैं em दशमलव संख्याओं अनुमति देता है, यह प्रतिपादन सटीकता नहीं बदलता है। 0.5px या समकक्ष सटीकता ब्राउज़र पर नहीं दिखायी जाती है - यह या तो 0 या 1px बन जाएगी। सिर्फ इसलिए कि एक स्क्रीन आधे पिक्सेल नहीं दिखा सकती है, सबसे अच्छा यह एंटी-एलियासिंग के साथ अनुमान लगा सकता है।

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

सीएसएस स्पेसिंग बस फ़ोटोशॉप के रूप में सटीक नहीं है। एक कारण यह है कि फ़ोटोशॉप प्रिंटिंग के लिए भी प्रस्तुत करता है - स्क्रीन/पिक्सेल संकल्प के साथ आपको पिक्सेल सटीकता के साथ रहना होगा। यद्यपि सैद्धांतिक रूप से यह अक्षर अंतरण के साथ संभव होगा जो ज़ूमिंग आदि पर अधिक सटीक हो जाता है। मुझे किसी भी कार्यान्वयन के बारे में पता नहीं है जो वास्तव में उस तरह से काम करेगा।

यदि सही अक्षर अंतर आपके लिए वास्तव में महत्वपूर्ण है, तो आप ब्राउज़र के सक्षम होने के मुकाबले फोंट अंतर को अधिक सटीक रूप से प्रस्तुत करने के लिए एसआईएफआर का उपयोग करने का प्रयास कर सकते हैं - वे बदलते एंटी-एलियासिंग का उपयोग करने में सक्षम हो सकते हैं। स्पष्ट रूप से यह केवल तभी समझ में आता है जब पत्र-अंतर एक बड़ा मुद्दा है।

7

इस तरह के संदर्भों में, यूनिटलेस संख्या आमतौर पर एक टाइपोग्राफिक इकाई का संकेत देती है जो em इकाई का एक छोटा सा अंश है। इसे आमतौर पर केवल "इकाई" कहा जाता है। इस इकाई का मूल्य फ़ॉन्ट पर निर्भर करता है, और इसे यूपीएम (इकाइयों प्रति एम) मूल्य के रूप में व्यक्त किया जाता है। सामान्य यूपीएम मान 1,000 है, लेकिन माइक्रोसॉफ्ट फोंट में 2,048 है, और अन्य मान भी होते हैं। (इस मुद्दे को आलेख UPM value of 1000 set in stone? में कुछ विवरणों में वर्णित किया गया है)

1,000 का यूपीएम मूल्य मानते हुए, -25 -0.025em पर नक्शा होगा। letter-spacing: -0.025em को सेट करने के बजाय एक छोटा सा प्रभाव पड़ता है: एक लम्बी पाठ रेखा लगभग "i" कम हो जाती है। सीएसएस का उपयोग करने वाले प्रभाव को फ़ोटोशॉप में समान होने की उम्मीद नहीं की जानी चाहिए; फ़ोटोशॉप की प्रतिपादन तंत्र ब्राउज़र के उन लोगों से अलग है।

+0

इस उत्तर का मूल संस्करण सही था: "1,000 का यूपीएम मूल्य मानते हुए, -25 -0.025em पर मैप करेगा।" – Daghall

+1

@ दघल, ठीक है। मुझे नहीं पता कि 'em' इकाई जोड़ते समय मैंने संख्या क्यों बदल दी। –

13

फ़ोटोशॉप लेटर-स्पेसिंग में अक्षर-ट्रैकिंग कहा जाता है और विशेष रूप से टेक्स्ट के प्रत्येक अक्षर के बीच की जगह होती है। समस्या यह है कि फ़ोटोशॉप लेटर ट्रैकिंग 1: 1 को सीएसएस में लेटर स्पेसिंग में परिवर्तित नहीं करती है।

फ़ोटोशॉप से ​​सीएसएस में रूपांतरण की गणना करना बहुत आसान है।

सूत्र सीएसएस पत्र-रिक्ति के लिए फ़ोटोशॉप पत्र ट्रैकिंग कन्वर्ट करने के लिए

em फॉर्मूला

X/1000 = Y 

X is the value of the letter-tracking in Photoshop 
Y is the value in "em" to use in CSS 

उदाहरण

निम्न उदाहरण पर विचार करें: फ़ोटोशॉप 200 का एक पत्र पर नज़र रखने के महत्व है ..

200/1000 = 0.2 

परिणाम है सीएसएस में 0.2em

px फॉर्मूला

आप "पिक्सल" का उपयोग करना पसंद करते हैं को महत्व देता सूत्र है

X * S/1000 = P 

X is equal to the letter-tracking value in Photoshop 
S is the font-size in pixels 
P is the resulted value in "px" to use in CSS 

उदाहरण

निम्न उदाहरण पर विचार करें: फ़ोटोशॉप 200 और एक फ़ॉन्ट का एक पत्र पर नज़र रखने के महत्व है आकार का आकार 10.

200 * 10/1000 = 2 

परिणाम 2px सीएसएस में है।

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