Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1798 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Problème d’affichage de la bonne police

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème d’affichage de la bonne police

n°1180390
luzinthesk​y
Posté le 12-04-2017 à 21:13:04  profilanswer
 

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 !

mood
Publicité
Posté le 12-04-2017 à 21:13:04  profilanswer
 

n°1180392
athenaa
Posté le 13-04-2017 à 12:05:33  profilanswer
 

Hello,
 
Le problème vient du fait que tes devices tablettes/mobiles ne connaissent pas l'arial. Par exemple, sur iOs c'est l'Helvetica.
Il faudrait que pour ces devices là, que tu indiques que tu veuilles de l'helvetica.
Pour ce faire tu mets l'hevetica en deuxième position dans ton css, comme ça, ceux qui n'ont pas l'arial afficheront l'helvetica.
 
font-family: arial black, Helvetica Black, Helvetica, sans-serif;
 
Je ne sais pas si l'Helvetica Black est une font standard, alors j'ai mis Helvetica en 3ème.


Message édité par athenaa le 13-04-2017 à 12:06:12

---------------
Quand tu es né, tes parents ont oublié d'attacher ta CSS à ta page HTML !
n°1180408
Contrarine​ss
Eh, what's up, doc?
Posté le 15-04-2017 à 14:52:50  profilanswer
 

L'idee ne serait-il pas de telecharger la police au moment de l'affichage de la page web ?
Il me semble que Google propose des fontes gratuites pour l'utilisation dans les sites web...
https://developers.google.com/fonts/

n°1180409
Harrybeau1
Verba volant, scripta manent
Posté le 15-04-2017 à 15:23:07  profilanswer
 

Hé hé Contraryweb aussi ?
Le post d'athenaa est pertinent, elle a raison.
 
En web y'a deux moyens pour les polices :  
1- soit — à l'ancienne, elle sont liées via le css : un dossier police au même niveau avec les variantes woff, svg, ttf et eot pour les différents navigateurs,
cette solution aurait pu solutionner le souci de Lucie je pense. Fontsquirrel est bien pratique pour ça.
2- soit — et c'est moins chiant niveau code, de l'import avec Googlefont avec le lien prêt à être copié-collé dans le css, genre :
@import url('https://fonts.googleapis.com/css?family=xxxxxx:400,700');
xxxxxx correspondant à la police choisi et les chiffrages "400,700" aux graisses dispos/choisies.
 
Par contre là ou le code de Lucie n'est pas clair (je ne l'ai pas retrouvé, elle a 10 feuilles css, pas fouillé),
c'est que si elle termine par sans-serif (exemple d'athenaa) :
font-family: arial black, Helvetica Black, Helvetica, sans-serif;  
 
Je me demande comment elle peut récupérer des serif comme du "Times" !  :heink:  
 
Enfin au niveau de son code, il faut déclarer les polices au niveau body par les balises sémantiques (h1, h2, p, etc.), pas chaque fois au niveau objet (ses div) via des classes,
ça fait du code à rallonge...  
 
Son code est ancien, ses définitions de résolutions (smartphones, tablettes, écrans), via les requêtes media (media queries) sont dépassées.
Elle utilise trop de feuilles de style, là ou 3 suffisent. On construit en mobile first :
< à 481 px (smartphones)
de 481 à 769 px (tabs)
> à 769 px (le reste, écran, etc.).
 
Voilou :)


---------------
Si vis pacem, para bellum
n°1180411
Contrarine​ss
Eh, what's up, doc?
Posté le 16-04-2017 à 13:32:46  profilanswer
 

Bjr Harry
 
Oh! non le web n'est pas mon domaine.. je fais du print a 98%...
 
C'est quand j'ai refais mon site web et que j'ai utilise un template gratuit que j'ai remarque que les fontes etaient telechargees car celles qui etaient utilisees n'etaient pas dispo sur ma machine...
 
La facon dont le code a ete ecrit, ca me depasse, je me suis contente d'adapter les pages a mon besoin...

n°1180414
Harrybeau1
Verba volant, scripta manent
Posté le 16-04-2017 à 14:36:41  profilanswer
 

[HS Coucou Contrariness :)
Oui je sais bien que tu es un "printeux". Print/web ce sont deux boulots carrément différents en plus. /HS]


---------------
Si vis pacem, para bellum
n°1180427
luzinthesk​y
Posté le 18-04-2017 à 15:22:26  profilanswer
 

Bonjour !
 
Merci pour vos réponses !
 
À la place de ce code-ci :
font-family: arial black;
 
j’ai mis celui-là, comme recommandé par athenaa :
font-family:"arial black", "helvetica black", "arial", "sans serif";
 
Pour le moment je n’ai pu tester que sur i-phone, là où il y avait de la Times : la Times a été remplacée par de l’Arial, ce qui a fait moins moche ! :)
 
J’ai aussi ajouté ce code :
font-weight: bold;
pour graisser l’Arial dans mes titres.
 
J’ai trouvé une police plus plaisante sur Fontsquirrel (merci pour le tuyeau, Harrybeau1). Mais je ne vois pas comment l’intégrer dans mon code ! Dois-je inclure le dossier de polices (téléchargé sur Fontsquirrel) dans mon dossier « www » au même niveau que mon dossier css ? Puis écrire un code dans le css permettant de l’activer ? Désolée si ma question est bizarre, moi aussi je suis “printeuse“ à la base !

n°1180428
Harrybeau1
Verba volant, scripta manent
Posté le 18-04-2017 à 15:48:02  profilanswer
 

Bjr Lucie.
Avec Fontsquirrel c'est la méthode "@font-face" !
Voir tuto ici : https://openclassrooms.com/courses/ [...] e-du-texte
 
Perso je préfère les Googlefonts c'est plus simple.
Choisissez une police, sélectionnez-là et ensuite choisissez entre les deux méthodes (standard et @import) recopiez les deux bouts de codes fournis :
 
Standard :
1- Code html à coller dans le head du fichier index.html : <link href="https://fonts.googleapis.com/css?family=mapolice" rel="stylesheet">  
2- Code css à coller dans le fichier style.css : font-family: 'mapolice', sans-serif;
 
 
@import :
1- Code html à coller dans le head du fichier index.html : <style>@import url('https://fonts.googleapis.com/css?family=mapolice');
</style>  
2- Code css à coller dans le fichier style.css : font-family: 'mapolice', sans-serif;
 
Astuce : pour la seconde méthode (@import), virez les balises dépréciées <style> et ne gardez que : @import url('https://fonts.googleapis.com/css?family=mapolice');
Et collez cela directement dans votre css au tout début.


Message édité par Harrybeau1 le 18-04-2017 à 15:51:32

---------------
Si vis pacem, para bellum
n°1180438
luzinthesk​y
Posté le 20-04-2017 à 19:04:29  profilanswer
 

Bonsoir,
 
merci Harrybeau1, ça a marché ! :D
 
J'ai choisi la méthode standard.
 
Bonne soirée et à une prochaine fois !

n°1180466
Harrybeau1
Verba volant, scripta manent
Posté le 24-04-2017 à 17:05:08  profilanswer
 

:jap:


---------------
Si vis pacem, para bellum

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Problème d’affichage de la bonne police

 

Sujets relatifs
grosse lenteur d'affichage 3DSmaxProblème couleur Photoshop
probleme FlexoProbleme de couleur avec une résolution au dessus
probleme import texture de sketchup vers 3ds maxDrivers Wacom Intuos pro - PROBLEME
[PHOTOSHOP/LIGHTROOM] problème de dimension d'un logiciel à l'autreProblème paiement chez Adobe
Plus de sujets relatifs à : Problème d’affichage de la bonne police



Copyright © 1997-2016 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR