Taille des fontes.

**defacta** · 04/11/2009, 18h33

Salut,

Je fais des tests de fontes et apparemment sa taille dépend vraiment de la résolution de l'écran.

Par exemple, chez moi je suis avec un mac book pro et avec sa résolution (1 440 x 900) je dois mettre les fontes comme ceci:

Code :

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

<font style="font-family:'Myriad pro'; font-size : 0.9em; ">

Par contre, lorsque je regarde le résultat avec un écran 15 pouces et une résolution 1024x768 cela fait énorme et vraiment pas joli, et dans ce cas la fonte à la bonne est comme ceci:

Code :

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

<font style="font-family:'Myriad pro'; font-size : 0.7em; ">

Par contre 0.7em pour ceux qui ont une bonne résolution, c'est illisible !

Comment je peux faire, fixer les fontes en fonction de la résolution écran ?

Merci,
Vincent.

**laurentSc** · 04/11/2009, 19h28

Bonjour,

si ça t'intéresse, j'ai un code javascript qui permet de lire la résolution de l'écran de l'utilisateur, et ensuite, tu peux fixer la fonte via un switch en PHP.

**defacta** · 04/11/2009, 20h09

oui ca m'interesse ;-) et je fixerai la taille des fontes dynamiquement en javascript.

Sinon, y a qqn qui a déjà eu ce pb pour savoir comment il s'en ait débrouillé ?

Merci,
Vincent.

**kaiser59** · 04/11/2009, 21h48

Salut,

Il est normal que la taille de tes fonts dépendent de la résolution car dans ton exemple tu utilises "em" en unité de mesure, sache que 1em = 100% (je ne sais plus par rapport à quoi) donc variable selon la résolution. Pour les unités fixes, il te faut utiliser le "px" par exemple.

A toi de voir ce que tu souhaites utilisé, pour ma part j'utilise le em qui est plus pratique que le px car 12px semblera raisonnable sous du 1024 mais très petit sur du 1920 contraire à l'em qui est proportionnel

**laurentSc** · 04/11/2009, 22h27

Voilà en fait ce que je fait : j'appelle d'abord la fonction html suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <script type="text/javascript">
window.location='index.php?w='+screen.width+'&h='+screen.height;
  </script>
</head>
<body>
<br>
</body>
</html>

puis dans index.php (qui contient ma page (même si à part ça, il n'y a que du code html)), je mets le code suivant :

Code :

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

1
2
3
4
<?php $client_screen_width=$_GET['w']; $client_screen_height=$_GET['h']; 
switch ($client_screen_width) { case 1280 : $image="banniere1280"; break; case 1024 : $image="banniere1024"; break; case 800 : $image="banniere800"; break;default : 
                $image="banniere1024"; 
                break;  } $bandeau="../_frame/".$image.".jpeg"; ?>

Et un peu plus loin :

Code :

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

1
2
 <img alt="bannière"
 src="<?php echo $bandeau; ?>" border="0">

Ca me sert à afficher un bandeau dont la largeur dépend de la résolution de l'écran : pas trop grande pour ne pas faire apparaître d'ascenseur horizontal, et pas trop petite pour les fortes résolutions (le case default est important pour les cas batards). A toi de l'adapter selon ton propre besoin.

**slack457** · 04/11/2009, 23h44

Merci Laurent, c'est sympa de ta part de partager ce bout de code très utile !

Mais Kaiser, je ne comprend pas comment tu fais. Comme tu le dis, utiliser "em" semble être une très bonne idée, on a qu'à mettre quelque chose comme :

Code :

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

1
2
3
4
5
6
 <!-- code CSS -->
 
body
{
   font-size: 0.9em;
}

et on pourrait penser que la taille de la police s'adapterait en fonction de la résolution, pour au final, avoir une taille fixe chez tout le monde.
Mais pour Defacta, ça ne semble pas fonctionner...

Taille des fontes.

HTML

Vue hybride

Discussions similaires

Partager

Partager