J'ai testé ma page Web sur différents appareils et le texte semble plus audacieux sur les appareils avec des ratios de pixels plus élevés (iPhone, par exemple). Je l'ai testé sur l'émulateur chrome ainsi: Le texte est parfait au DPR 1 et semble beaucoup plus audacieux au DPR 2.CSS - La police semble plus audacieuse sur les appareils avec des ppp plus élevés
Au DPR 1
AT RDP 2
Est-il possible de fixer ou de réduire l'effet? Toute aide serait appréciée.
HTML:
<div class="section" id="section3">
<h1>Projects</h1>
</div>
CSS:
/*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%;
}
Ceci est le code le plus pertinent, le repos est l'alignement et les requêtes des médias pour la taille de la police.
Vous vous demandez si cela est seulement sur le débogage du navigateur ou si tel est le cas sur les appareils mobiles avec plus DPR – Persijn
Avez-vous déjà essayé jouer avec la propriété de rendu de texte? https://developer.mozilla.org/de/docs/Web/CSS/text-rendering En outre, vous pouvez utiliser une requête de média de ratio de pixels pour forcer une police moins en gras à une densité de pixels plus élevée: https: // css-tricks .com/snippets/css/retina-display-media-query/ – Connum
@Persijn - J'ai vérifié sur les périphériques physiques réels, le texte apparaît en gras –