web-dev-qa-db-fra.com

Problème d'épaisseur de police dans Safari, texte trop gras

Lorsque j'applique un style font-weight:bold, l'aspect de la police est trop gras dans Safari par rapport aux autres navigateurs. J'ai essayé ci-dessous css comme suggéré dans certains sites, mais c'est toujours le même.

text-shadow: #000000 0 0 0px;

Captures d'écran du rendu du texte:

Chrome
enter image description here

Safari
enter image description here

Voici ma déclaration css:

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;

}

Comment cela peut-il être corrigé?

csscss3safari
17
user1184100

Pour rendre le texte en gras de manière cohérente sur tous les navigateurs, votre police doit contenir explicitement des caractères en gras. Sinon, les navigateurs essaieront probablement de créer des variantes audacieuses de caractères en fonction de leurs variantes normales, et les résultats seront incohérents sur tous les navigateurs, car ils utilisent probablement des algorithmes différents pour cette conversion.

Notez également que le rendu du texte peut différer d'une plate-forme à l'autre au niveau du système (Windows, Mac OS, par exemple). De telles différences sont acceptables et n'ont généralement pas besoin d'être corrigées.

Voir aussi rubrique sur la propriété -webkit-font-smoothing .

8
Marat Tanalin

Utilisez -webkit-font-smoothing: antialiased;

L'astuce texte-ombre ne fonctionne plus.

42
Paul Armstrong

Les solutions -webkit ne fonctionneront pas pour le problème sérieux de nombreuses polices google, polices personnalisées et polices n'ayant pas de valeurs prédéfinies. 

Le problème est que vous devez spécifier la valeur de bold dans les balises fortes.

Cela peut être fait de deux manières:

Vous pouvez inclure Google Fonts ou l’endroit où se trouve votre police dans votre en-tête. par exemple, la police de caractères normale et la police de caractères gras doivent avoir un numéro de police de caractères différent, par exemple 400 et 600 caractères gras:

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

Ou utilisez le code source ci-dessus et collez-le dans votre propre css comme ci-dessous:

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

Utilisez quelle que soit votre police au lieu de XXX.

Puis aussi dans {font-weight:600;} fort

1
user7837718

Aucune des réponses ici n'a fonctionné pour moi. Peut-être parce que j'utilise la version Windows de Safari pour les tests. Je devais inclure la police en gras dans mon CSS pour résoudre le problème. Dans le cas de la question initiale, il faudrait ajouter ce qui suit (notez qu'il utilise le même nom de famille de police)

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

Cela a fonctionné dans tous les navigateurs pour moi.

0
nuander

J'ai trouvé une solution à ce problème particulier. En fait, aucune des solutions ci-dessus ne fonctionne pour moi. Nous avons donc commencé à vérifier les styles de kit Web ajoutés par safari par défaut et constaté que -webkit-text-stroke-width était appliqué au corps ayant la valeur 0.5px . Je l'ai réglé sur 0! Important et j'ai résolu le problème. 

0
tarun singh