web-dev-qa-db-fra.com

le poids de la police ne fonctionne pas correctement?

http://www.i3physics.com/blog/2010/07/dsfsdf/

Voici un exemple.

La partie où il est dit "PHP" (le coin supérieur droit) est restée aussi mince qu'elle l'était. voici une partie du code css

.wp_syntax_lang {
  background-color:#3c3c3c;
  position:absolute;
  right:0;
  padding:1px 10px 3px;
  color:#ddd; font-size:9px; font-weight:800;
  text-transform:uppercase;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-left-radius:5px;
  border-radius-bottomleft:5px;
}

J'ai essayé gras, audacieux, 700, 800, 900 et ne fonctionne pas sous FF.

cssfonts
13
CppLearner

C'est parce que la taille de la police (9px) est trop petite pour être affichée en gras. Essayez 11 pixels ou plus et cela fonctionne bien.

21
Rito

La plupart des navigateurs ne prennent pas entièrement en charge les valeurs numériques de font-weight. Voici un bon article sur le problème , et même difficile c'est un peu vieux, il semble être correct.

Si vous avez besoin de quelque chose de plus audacieux, vous voudrez peut-être essayer d'utiliser une police différente qui est plus audacieuse que votre police existante. Naturellement, vous pouvez probablement ajuster la taille de la police pour un effet similaire.

17
derekerdmann

font-weight peut également ne pas fonctionner si la police que vous utilisez n'a pas ces poids - vous le rencontrerez souvent lors de l'incorporation de polices personnalisées. Dans ces cas, le navigateur arrondira probablement le nombre au poids le plus proche dont il dispose.

Par exemple, si j'incorpore la police suivante ...

@font-face {
    font-family: 'Nexa';
    src: url(...);
    font-weight: 300;
    font-style: normal;
}

Ensuite, je ne pourrai pas utiliser autre chose qu'un poids de 300. Tous les autres poids reviendront à 300, sauf si je spécifie @font-face déclarations avec ces poids supplémentaires.

12
Simon East

Dans mon cas, j'utilisais la police Roboto de Google. J'ai donc dû l'importer au début de ma page avec ses poids corrects.

<link href = "https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel = "stylesheet" />
3
Vilmar Rodrigues Martins

J'ai supprimé le text-transform: uppercase;, puis définissez-le sur bold/bolder, et cela semble fonctionner.

1
Liam Spencer

Pour moi, le travail audacieux lorsque je change le style de police de font-family: 'Open Sans', sans-serif; à Arial

1
nourza

j'étais également confronté au même problème, je l'ai résolu en sélectionnant la police de Google que j'utilisais, puis j'ai cliqué sur l'onglet réduit (Sélectionné par la famille), puis cliqué sur le bouton "PERSONNALISER". Ensuite, j'ai sélectionné les poids de police que je veux, puis j'ai intégré le lien mis à jour dans mon html.

0
Qasim Hafeez Mughal