2010-05-18 11 views
7

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

मैक पर, यह एक अलग कहानी है। किसी कारण से, मैक फ़ॉन्ट रेंडरर सोचता है कि फ़ॉन्ट इसकी तुलना में बहुत छोटा है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
     <title>Webble</title> 
     <style type="text/css"> 
     @font-face 
     { 
      font-family: "Bubbleboy 2"; 
      src: url("bubbleboy-2.ttf") format('truetype');   
     } 

     body 
     { 
      font-family: "Bubbleboy 2"; 
      font-size: 30px; 
     } 

     div 
     { 
      background-color: maroon; 
      color: yellow; 
      height: 100px; 
      line-height: 100px; 
     } 
     </style> 
    </head> 
    <body> 
     <div>The quick brown fox jumped over the lazy dog.</div> 
    </body> 
</html> 

ओपन विंडोज Firefox पर और मैक Firefox पर यह:

उदाहरण के लिए, इस परीक्षण कोड (live example here) पर विचार करें। इसे चुनने के लिए अपने माउस का प्रयोग करें।

विंडोज़ पर, आप देखेंगे कि यह पूरी तरह से फ़ॉन्ट का चयन करता है।

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

क्या इस तरह की बड़ी विसंगति को ठीक करने के लिए वैसे भी है?

उत्तर

7

फॉन्ट की चढ़ाई बहुत छोटा है। विंडोज़ ब्राउज़र (और मैक सफारी भी, मेरे परीक्षण में) बस चढ़ाई मूल्य को गलत के रूप में फेंक देते हैं, जबकि मैक पर फ़ायरफ़ॉक्स और ओपेरा इसे स्वीकार करते हैं।

इसे ठीक करने का सबसे आसान तरीका टीटीएक्स, FontTools का हिस्सा है।

इस तरह यह प्रयोग करें:

% ttx bubbleboy-2.ttf 
[...] 
% edit bubbleboy-2.ttx 

बदलें 1100 चढ़ाई मूल्य (या जो भी आप के लिए काम करता है):

% ttx bubbleboy-2.ttx 
Compiling "bubbleboy-2.ttx" to "bubbleboy-2#1.ttf"... 
[...] 

यह:

<hhea> 
    <tableVersion value="1.0"/> 
    <ascent value="1100"/> 

तब फ़ॉन्ट का पुनर्गठन नया फ़ॉन्ट तय किया जाना चाहिए; आप इसे फ़ॉन्ट बुक में खोलकर देख सकते हैं।

यदि आप समस्या की एक और दृश्य तस्वीर चाहते हैं, तो FontForge आज़माएं, हालांकि चेतावनी दी जानी चाहिए कि इसका इंटरफ़ेस बार्को है। एक बार फ़ॉन्ट खोलने के बाद, पूंजी पत्र पर डबल-क्लिक करें; आप ग्लिफ को विभाजित करने वाली एक क्षैतिज रेखा देखेंगे। यह (गलत) चढ़ाई है। आप एलिमेंट> फ़ॉन्ट जानकारी में चढ़ाई को ठीक कर सकते हैं, फिर सामान्य क्लिक करें। "स्केल आउटलाइन" अनचेक करें या चढ़ाई बड़ी होगी लेकिन फिर भी गलत होगी। :-)

हालांकि, फ़ॉन्ट संशोधित करने के लिए, मैं FontForge से अधिक TTX इस तरह छोटे परिवर्तन के लिए है क्योंकि यह कम नष्ट करने के लिए यह नहीं समझती क्या संभावना है की सिफारिश करेंगे।

+0

धन्यवाद निकोलस, मैं इसे जाने दूंगा। – cdmckay

+0

पूरी तरह से काम किया, धन्यवाद! – cdmckay

+0

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

-3

असल में विंडोज अपराधी है। विंडोज क्लियरटाइप फ़ॉन्ट रेंडरर वास्तव में फ़ॉन्ट के आकार को पिक्सेल सीमाओं में "स्पष्ट" बनाने के लिए हथौड़ा देता है जबकि मैक ओएस फ़ॉन्ट के आकार को स्पर्श नहीं करता है (जो कि मैं बहुत पसंद करता हूं)। यह अक्सर स्क्रीन पर "लम्बे" या "पतले" ग्लिफ की ओर जाता है, जबकि मैक ओएस पर आपको डिजाइनर के इरादे के रूप में फ़ॉन्ट का सही प्रतिनिधित्व मिलता है।

जेफ एटवुड द्वारा अंतरों को समझाते हुए यहां एक लेख दिया गया है। किसी भी मामले में, आप इसके आसपास पाने में सक्षम नहीं होंगे।

http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html

+0

उह ... गंभीर? क्या मुसीबत है। मुझे लगता है कि मुझे कुछ सीएसएस हैक के साथ आना होगा :( – cdmckay

+0

दुर्भाग्यवश जिस तरह से फ़ॉन्ट प्रस्तुत किया जाता है, वह वेब डिज़ाइनर के नियंत्रण से बाहर होता है, कम से कम जब तक आप बुलेट काटने और छवियों का उपयोग नहीं करते हैं या शायद सर्वर को शीर्षक वाली छवियां प्रदान करते हैं। –

+7

यह बिल्कुल सही नहीं है; यहां वर्णित वर्णों की लगभग आधा ऊंचाई की तुलना में पिक्सेल ग्रिड परिवर्तन छोटे हैं। समस्या सिर्फ एक छोटी गाड़ी है। कृपया मेरा उत्तर देखें। –

3

मैं टीटीएफ संस्करण को FontSquirrel पर अपलोड करके और "विशेषज्ञ" विकल्प का चयन करके और फिर सभी डिफ़ॉल्ट विकल्पों को रखकर अपने फ़ॉन्ट को ठीक करने में सक्षम था। जो इसे ठीक करता है, मेरा मानना ​​है कि "वर्टिकल मेट्रिक्स को ठीक करें"।

अब फ़ॉन्ट लाइन की ऊंचाई मैक और पीसी पर समान होती है। शुभकामनाएं

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