सीएसएस - उच्च डीपीआई

Question

के साथ डिवाइस पर फ़ॉन्ट बोल्डर दिखाई देता है। मैं विभिन्न डिवाइसों पर अपने वेब पेज का परीक्षण कर रहा हूं, टेक्स्ट उच्च डिवाइस पिक्सेल अनुपात (उदाहरण के लिए, आईफोन) वाले उपकरणों पर बोल्डर दिखाई देता है। मैं भी क्रोम एम्युलेटर पर यह परीक्षण किया है: पाठ डीपीआर 1 पर सही लगता है और डीपीआर में ज्यादा बोल्ड 2.

डीपीआर पर 1

डीपीआर में दिखाई देता है 2

वहाँ ठीक करने या प्रभाव को कम करने कोई तरीका है? किसी भी सहायता की सराहना की जाएगी।

HTML:

<div class="section" id="section3"> 
    <h1>Projects</h1> 
</div> 

सीएसएस:

/*to fix safari bold font*/ 
h1, h2, h3, h4, h5, strong, b { 
    font-weight: 400; 
} 

#section4 h1,#section3 h1 { 
    visibility: hidden; 
    position: absolute; 
    font-family: Graphik-Semibold, Roboto; 
    font-weight: 600; 
    margin: 0; 
    top: 3.7%; 
} 

यह है सबसे अधिक प्रासंगिक कोड, बाकी संरेखित और फ़ॉन्ट आकार के लिए मीडिया के प्रश्नों है।

Answer 1

@media only screen and (max-device-pixel-ratio: 2) { 
    b { 
    font-weight: 600; 
    } 
} 

@media only screen and (min-device-pixel-ratio: 2) { 
    b { 
    font-size: 400; 
    } 
} 

आपको कुछ संख्याओं को बदलने की आवश्यकता हो सकती है, हालांकि परिणाम प्राप्त करने के लिए आपको यह एक उदाहरण है।

ऐसा करने का कोई और तरीका नहीं है जो मुझे पता है क्योंकि फ़ॉन्ट-वेट वास्तव में हमेशा अलग होता है, भले ही संख्या समान हो। साथ ही यह वास्तव में है कि डीपीआर पर एक अंतर का बड़ा नहीं है 2.0

यह अच्छा :)