सफारी फ़ॉन्ट-वेट इश्यू, टेक्स्ट बहुत बोल्ड

Question

जब मैं font-weight:bold शैली लागू करता हूं, तो अन्य ब्राउज़रों की तुलना में फ़ॉन्ट का स्वरूप सफारी में बहुत बोल्ड होता है। मैंने कुछ साइट पर सुझाए गए सीएसएस के नीचे कोशिश की लेकिन यह अभी भी वही है।

text-shadow: #000000 0 0 0px; 

पाठ प्रतिपादन के स्क्रीनशॉट:

क्रोम

सफारी

यहाँ मेरी सीएसएस घोषणा है:

012,351,

p { 

margin: 8px 5px 0 15px; 
color:#D8D2CE; 
font-size:11pt; 
letter-spacing:-1px; 
font-weight: bold; 
font-family: LektonRegular; 
} 

@font-face { 
font-family: 'LektonRegular'; 
src: url('myfonts/lekton-regular-webfont.eot'); 
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfonts/lekton-regular-webfont.woff') format('woff'), 
    url(myfonts/lekton-regular-webfont.ttf) format('truetype'), 
    url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg'); 
font-weight: normal; 
font-style: normal; 

} 

यह कैसे तय किया जा सकता है?

Answer 1

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

यह भी ध्यान रखें कि सिस्टम स्तर (जैसे विंडोज़, मैक ओएस) पर विभिन्न प्लेटफ़ॉर्म पर पाठ प्रतिपादन भिन्न हो सकता है। इस तरह के मतभेद ठीक हैं और आमतौर पर तय करने की आवश्यकता नहीं है।

topic about -webkit-font-smoothing property भी देखें।

Answer 2

उपयोग -webkit-font-smoothing: antialiased;

पाठ छाया चाल अब और काम नहीं करता।

Answer 3

यहां कोई भी जवाब मेरे लिए काम नहीं करता है। संभवतः क्योंकि मैं परीक्षण के लिए सफारी के विंडोज संस्करण का उपयोग कर रहा हूं। समस्या को ठीक करने के लिए मुझे अपने सीएसएस में बोल्ड फ़ॉन्ट शामिल करना पड़ा। मूल प्रश्न के मामले में वह (नोटिस यह एक ही font-family नाम का उपयोग करता)

@font-face { 
font-family: 'LektonRegular'; 
src: url('myfonts/lekton-bold-webfont.eot'); 
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfonts/lekton-bold-webfont.woff') format('woff'), 
    url(myfonts/lekton-bold-webfont.ttf) format('truetype'), 
    url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg'); 
font-weight: bold; 
font-style: normal; 
} 

यह मेरे लिए सभी ब्राउज़रों में काम किया निम्नलिखित जोड़ने के लिए की आवश्यकता होगी।

Answer 4

-webkit समाधान कई Google फोंट, कस्टम फोंट और फ़ॉन्ट्स के लिए मजबूत समस्या के लिए काम नहीं करेगा जिनके पास प्रीसेट मान नहीं हैं।

समस्या यह है कि आपको मजबूत टैग में बोल्ड के मान को निर्दिष्ट करने की आवश्यकता है।

दो तरह से किया जा सकता:

आप या तो गूगल फ़ॉन्ट्स या जहां अपने फ़ॉन्ट अपने शीर्षक में से है से शामिल कर सकते हैं;

<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet"> 

या aboves स्रोत कोड का उपयोग करें और नीचे की तरह अपने खुद के सीएसएस में चिपकाएं: यह 400 नियमित और 600 बोल्ड उदाहरण के लिए की तरह एक अलग font-weight संख्या होनी चाहिए दोनों नियमित फ़ॉन्ट और बोल्ड फ़ॉन्ट प्रत्येक की जरूरत है:

@font-face { 
    font-family: 'XXX'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('XXX SemiBold'), local('XXX-SemiBold'), 
    url... 
} 

XXX का बजाए आपका फ़ॉन्ट जो कुछ भी है उसका उपयोग करें।

फिर भी मजबूत {font-weight:600;}