2017-10-21 94 views
5

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

enter image description here

AT RDP 2

enter image description here

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.

+0

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

+0

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

+1

@Persijn - J'ai vérifié sur les périphériques physiques réels, le texte apparaît en gras –

Répondre

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; 
    } 
} 

Vous devrez peut-être modifier certains des nombres pour obtenir le résultat souhaité, ce n'est qu'un exemple.

Il n'y a pas vraiment d'autre moyen de le faire que je connaisse car le poids de la police est vraiment toujours différent même si le nombre est le même. De plus, il est pas vraiment grande d'une différence sur le DPR 2.0

Il semble bon :)

+0

Ce serait une bonne réponse si vous avez utilisé des requêtes médias pour sélectionner le DPR comme 'min -device-pixel-ratio: 2' et pas la taille de l'écran puisque cela est calculé en utilisant DPR. – Persijn

+0

j'ai essayé cela, il semble toujours gras:/ –

+0

Je suis désolé, je ne suis pas sûr que je saurais quoi faire d'autre –