Problème d’affichage de la bonne police

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 :

font-family: arial black;

Merci de votre aide !

Bonsoir.

Quand on vient du print, c'est un peu un crève-coeur de constater
que l'utilisation des polices est si compliquée sur le web...

Ne peuvent s'afficher sur une machine que les polices qu'y sont
présentes, ce qui fait que certaines machines, il n'y a pas de
problèmes mais sur d'autres...

Heureusement depuis l'avènement de @font-face qui permet le
téléchargement des polices, les choses se sont un peu améliorées...

Déjà, n'indiquer dans font-family qu'une seule police est un peu
risqué (et je ne savais pas qu'on pouvait indiquer une police dont le
nom est constitué de deux mots sans guillemets...).

Pour finir, c'est assez agréable un code un peu svelte pour changer...

Edit : la feuille de styles ecran720px.css a l'air de s'être chargée 5 fois...


Modifié par Zelena (12 Apr 2017 - 21:42)

Salut,
Pour ce qui est des polices, ma «méthode» est d’aller en chercher une qui me plaît sur Google Fonts, mais au lieu de laisser Google amener des ressources externes sur ma page, télécharger plutôt le fichier localement et créer une font-face dans mon CSS (pour remplacer un Arial Black, un Roboto me semble approprié).
Du moins il faudrait offrir une liste de polices plus variée, par exemple :

font-family: "Arial Black", arial, verdana, sans-serif;

En espérant t’aider, car je ne suis pas très clair dans mes explications

LuzintheSky92 a écrit :
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 :

font-family: arial black;

Merci de votre aide !

Tout d'abord, il est préférable, lorsque le nom de la police contient un caractère espace, de l'encadrer par des guillemets.

font-family:"arial black";

Duchampignon a écrit :
Salut,
Pour ce qui est des polices, ma «méthode» est d’aller en chercher une qui me plaît sur Google Fonts, mais au lieu de laisser Google amener des ressources externes sur ma page, télécharger plutôt le fichier localement et créer une font-face dans mon CSS (pour remplacer un Arial Black, un Roboto me semble approprié).

Une possiblité supplémentaire consiste à utiliser une Data-URI et embarquer le flux police dans le contenu de la page. Evite un appel HTTP serveur, permet de fonctionner en mode hors ligne, mais grossit un peu la taille du source si encodé en base 64.