Discussion :

[Luzinthesky]

Bonsoir à tous,

j’ai créé mon site en html5 et css3 que voici :

www.lucie-bodin.fr

Sur écran de bureau, il s’affiche comme je veux, mais sur tablettes et mobiles, c’est la catastrophe, et ce pour plusieurs raisons !

Dans ce post, je souhaite aborder le problème d’affichage de police de texte.

Mon texte courant est en “Arial” et mes titres et boutons en “Arial Black”. L’Arial Black ne s’affiche pas sur les tablettes et mobiles, et laisse place à une police qui ressemble parfois à de la “Times”, parfois à de la “Verdana”. Ce qui rend un résultat bien moche !

Ce problème arrive sur tous les navigateurs.

Je ne comprends pas d’où vient le problème, alors que pour le texte en Arial, tout va bien !

Mon code, mis à chaque class et div correspondante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

font-family: arial black;

Merci de votre aide !

[NoSmoking]

Bonjour,
encore faut-il que la police soit disponible sur le « poste » client ce qui n'est pas toujours gagné.
En cas de manque, c'est la police par défaut définie dans le navigateur qui prend le dessus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
html {
  font-family: "un nom qui n'existe pas";
}

le document sera affiché avec la police par défaut du navigateur, autant dire que tu n'en sais rien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
html {
  font-family: "un nom qui n'existe pas", Verdana, sans-serif;
}

affichera en Verdana et si non trouvée alors en sans-serif ... etc ...

[Invité]

Bonjour,

si le nom de la font est à fortiori en plusieurs mots, il faut des "..." :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

font-family: "arial black","arial", sans-serif;

Il faut aussi respecter la casse : "Arial ..." ?

• Comment utiliser une police personnalisée sur un site Web ?

[NoSmoking]

Salut Jérôme,
c'est effectivement une bonne habitude à prendre sachant que la « recommendation » est un peu plus souple, et les navigateurs itou.

The name of a font family of choice. In the previous example, "Baskerville", "Heisi Mincho W3", and "Symbol" are font families. Font family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.

• 15.2.2 La famille de polices : la propriété 'font-family'