File "test.html"
Full Path: /home/analogde/www/Ebook/Informatique/WEB/Code Sources/test.html
File size: 20.58 KB
MIME-type: text/html
Charset: 8 bit
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><!-- DATE DE CREATION: 13/01/09 --><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Proprits CSS font text pour mettre en forme un texte - CSS Debutant</title>
<meta name="description" content="Comment styliser un texte en CSS, bien choisir la police de caractre, les tailles et couleurs de fontes, etc.">
<meta name="keywords" content="polices de caractre, font, font-family, font-style, font-weight, cours css, tutoriels css, apprendre css, html, xhtml, css, php, feuilles de style, css debutant, css debutants, cascading style sheets, mammouthland">
<meta name="author" content="lambert-charreteur">
<meta name="generator" content="webexpert">
<link rel="author" href="http://www.mammouthland.net/jardin/curriculum.php" title="Auteur">
<link rel="prev" href="http://css.mammouthland.net/feuille-de-style-css-debutant.php" title="Prcdent">
<link rel="next" href="http://css.mammouthland.net/margin-padding-css.php" title="Suivant">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" media="screen" href="font-css-polices-caracteres_fichiers/style.css">
<link rel="stylesheet" type="text/css" media="print" href="font-css-polices-caracteres_fichiers/print.css">
<!--[if lte IE 8]>
<script src="/html5-ie.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/style-ie.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/style-ie6.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="/style-ie7.css" />
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="RSS de CSS Dbutant" href="http://www.mammouthland.net/rss_open.xml">
<link rel="shortcut icon" href="http://css.mammouthland.net/images/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://css.mammouthland.net/images/favicon.ico">
<link rel="icon" href="http://css.mammouthland.net/images/icone.png" type="image/png">
<link rel="canonical" href="http://css.mammouthland.net/font-css-polices-caracteres.php">
<script async src="font-css-polices-caracteres_fichiers/cbgapi.loaded_0"></script><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="font-css-polices-caracteres_fichiers/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4587708-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
<style type="text/css">
.captures {
padding:1px;
}
.captures p {
width:300px;
text-align:center;
float:left;
}
.captures p + p {
float:none;
margin-left:310px;
}
</style>
</head>
<body data-twttr-rendered="true" id="premiers">
<!-- header -->
<div id="page">
<div id="header">
<div id="brouette">
<p><a href="#menu">Aller aux menus</a></p>
<h1><a href="http://css.mammouthland.net/" title="Page d'accueil de CSS Dbutant"><span class="diese">#<abbr title="Cascading Style Sheets">CSS</abbr></span> <span class="debutant">{dbutant;}</span></a></h1>
<ul>
<li class="premiers"><a href="http://css.mammouthland.net/premiers-pas-en-css.php">Premiers pas</a></li>
<li class="css3"><a href="http://css.mammouthland.net/css3/">CSS3</a></li>
<li class="tutoriels"><a href="http://css.mammouthland.net/tutoriels-css.php">Tutoriels</a></li>
<li class="livre"><a href="http://css.mammouthland.net/livre/">Livre</a></li>
<li class="outils"><a href="http://css.mammouthland.net/outils-css.php">Boite Outils</a></li>
</ul>
</div> <!-- /brouette -->
</div> <!-- /header -->
<!--[if lte IE 7]>
<div id="ie6msg">
<h2>Savez-vous que votre navigateur est obsolte ?</h2>
<p>Pour naviguer de faon plus satisfaisante sur ce site (et sur le reste du Web), nous vous recommandons de procder une mise jour de votre navigateur. Actualisez gratuitement votre <a href="http://www.microsoft.com/france/windows/products/winfamily/ie/">Internet Explorer</a>. Vous pouvez aussi essayer d'autres navigateurs populaires comme par exemple <a href="http://www.mozilla-europe.org/fr/firefox/">Firefox</a>, <a href="http://www.opera.com/">Opera</a> ou <a href="http://www.apple.com/fr/safari/">Safari</a>.
<br />Si vous utilisez un PC au travail, veuillez contacter votre service informatique.</p>
</div>
<![endif]-->
<div id="main">
<p class="chemin">Vous tes ici > <a href="http://css.mammouthland.net/">CSS Dbutant</a> | <a href="http://css.mammouthland.net/premiers-pas-en-css.php">Premiers pas en CSS</a> | Mettre en forme un texte en CSS</p>
<!-- dbut corps du document -->
<div id="edito">
<div id="chapo">
<p><strong>Il est trs important de bien choisir le formatage des polices de caractres</strong>
utilises sur une page web. En effet, pour une majorit de sites, le
principal contenu est sous forme textuelle. Si ce texte est mal adapt,
peu lisible, le message ne peut videmment pas passer, quelque soit sa
qualit.
</p>
<p><strong>Comment mettre en forme un texte grce au CSS, quels sont les piges viter ?</strong></p>
</div>
<h2>Mettre en forme un texte en CSS</h2>
<h3>Sommaire</h3>
<ul>
<li><a href="#notions">Notions importantes</a></li>
<li><a href="#familles">Choix des polices de caractres</a> (<code>font-family</code>)</li>
<li><a href="#tailles">Units de taille de caractres</a> (<code>font-size</code>)</li>
<li><a href="#couleurs">Choix des couleurs</a> (<code>color</code>)</li>
<li><a href="#etc">Autres attributs</a></li>
<li><a href="#fontface">Proprit <code>@font-face</code></a> (CSS3)</li>
</ul>
<div class="objet">
<p>Fonctionne avec :</p>
<ul>
<li>Tous les navigateurs graphiques</li>
</ul>
<p>Attributs utiliss :</p>
<ul>
<li>font ; font-family ; font-weight ; font-variant ; font-style</li>
<li>color</li>
<li>text-align ; text-decoration ; text-transform</li>
<li>line-height</li>
</ul>
</div>
<h3 id="notions">Notions importantes</h3>
<p>Avant de choisir sa, ou plutt ses, polices de caractres pour sa page web, il faut bien connatre certaines contraintes :</p>
<ul>
<li>Toutes les polices de caractres n'existent pas sur tous les ordinateurs.<br><strong>Consquence</strong> :
si l'ordinateur de votre visiteur ne possde pas la police que vous
avez choisie, une autre s'affichera ruinant probablement le design que
vous espriez.</li>
<li>Mac et PC ne possdent pas toujours les mmes noms de polices, ni mme la mme rsolution.<br><strong>Consquence</strong> : bien vrifier les quivalences entre Mac et PC</li>
<li>Tous les navigateurs ne grent pas le rendu des polices de la mme faon.<br><strong>Consquence</strong> : l encore, n'esprez pas avoir le mme rendu partout.</li>
</ul>
<p>Maintenant que je vous ai bien cass le moral... Voyons comment grer au mieux toutes ces contraintes !</p>
<h3 id="familles">Choix des polices de caractres</h3>
<h4>Polices gnriques</h4>
<p>Il existe 5 familles de polices de caractres dites "gnriques" :</p>
<ul>
<li>Serif</li>
<li>Sans-serif</li>
<li>Monospace</li>
<li>Cursive</li>
<li>Fantasy</li>
</ul>
<div class="visu">
<h5>Zone de test</h5>
<ul>
<li><span style="font-family:serif">Serif</span></li>
<li><span style="font-family:sans-serif">Sans-serif</span></li>
<li><span style="font-family:monospace">Monospace</span></li>
<li><span style="font-family:cursive">Cursive</span></li>
<li><span style="font-family:fantasy">Fantasy</span></li>
</ul>
</div>
<p>Je ne sais pas ce que vous obtenez sur votre cran, mais voici 4
captures d'cran ralises sur mon propre ordinateur avec 4 navigateurs
diffrents :</p>
<div class="captures">
<p><strong>Avec Firefox</strong><br><img src="font-css-polices-caracteres_fichiers/generique-firefox.gif" alt="capture avec firefox" height="120" width="170"></p>
<p><strong>Avec Microsoft Internet Explorer 7</strong><br><img src="font-css-polices-caracteres_fichiers/generique-ie7.gif" alt="capture avec MSIE7" height="120" width="170"></p>
</div>
<div class="captures">
<p><strong>Avec Opera</strong><br><img src="font-css-polices-caracteres_fichiers/generique-opera.gif" alt="capture avec opera" height="120" width="170"></p>
<p><strong>Avec SeaMonkey</strong><br><img src="font-css-polices-caracteres_fichiers/generique-seamonkey.gif" alt="capture avec seamonkey" height="120" width="170"></p>
</div>
<div class="captures">
<p>Et puis une cinquime sur <strong>Safari</strong> (Mac) :<br>
<img src="font-css-polices-caracteres_fichiers/generique-safari.gif" alt="capture d'cran avec Safari" height="120" width="170"></p>
</div>
<p style="clear:both">Vous constatez que s'il n'y a pas de grosses
diffrences avec les familles serif, sans-serif et monospace, cursive
n'a pas le mme aspect sous PC et sous Mac. Quant fantasy, c'est
plutt... fantaisiste ! (oui, oui, je sais, elle est plutt facile
celle-l :p).</p>
<p>Il vaut mieux donc se contenter des familles serif et sans-serif, les sans-serif tant les plus lisibles l'cran.</p>
<p>Les familles de polices se dclarent l'aide de l'attribut <code>font-family</code>, dclarer dans le <code>body</code>
pour que toute la page en bnficie (c'est la notion d'hritage). On
finit toujours la liste de fontes dclares par sa famille gnrique
laquelle elle appartient. Ainsi, si la police dclare n'existe pas sur
l'ordinateur de votre visiteur, le navigateur affichera la police
appartenant la mme famille.</p>
<h4>Famille Serif</h4>
<p>Les fontes de caractres de la famille serif assez courantes sont :</p>
<ul>
<li>Times new roman (PC)</li>
<li>Times (Mac)</li>
<li>Georgia (Mac/PC)</li>
<li>Palatino Linotype (PC)</li>
<li>Palatino (Mac)</li>
</ul>
<p>Elles n'ont pas toutes le mme aspect, les associations respecter pour une homognit de rendu pourraient donc tre :</p>
<pre>body {
font-family:"times new roman", times, serif;
}
</pre>
<pre>body {
font-family:georgia, serif;
}
</pre>
<pre>body {
font-family:"palatino linotype", palatino, serif;
}
</pre>
<h4>Famille sans-serif</h4>
<ul>
<li>Verdana (Mac/PC)</li>
<li>Arial (Mac/PC)</li>
<li>Trebuchet (PC)</li>
<li>Helvetica (Mac)</li>
<li>Tahoma (PC)</li>
<li>Geneva (Mac)</li>
</ul>
<p>Pour ces fontes sans-serif, les associations pourraient tre :</p>
<pre>body {
font-family:arial, sans-serif;
}
</pre>
<pre>body {
font-family:verdana, sans-serif;
}
</pre>
<pre>body {
font-family:trebuchet, helvetica, sans-serif;
}
</pre>
<pre>body {
font-family:tahoma, geneva, sans-serif;
}
</pre>
<p>Ce ne sont que des suggestions bien sr !</p>
<p class="voir"><a href="http://css.mammouthland.net/polices.html">Page de visualisation des diffrentes polices de caractres</a></p>
<h4>Outils</h4>
<ul>
<li><a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html">Equivalences polices de caractres MAC/PC</a></li>
<li><a href="http://www.typetester.org/">Type Tester</a>, pour tester en ligne le rendu des polices.</li>
</ul>
<p class="haut"><a href="#haut">Haut</a></p>
<h3 id="tailles">Units de taille de caractres</h3>
<p>Commenons par vacuer ce qu'il ne faut pas utiliser :</p>
<ol>
<li>On n'utilise pas de tailles de caractres fixes comme les points (<code>pt</code>), les picas (<code>pc</code>) ou les centimtres (<code>cm</code>). Celles-ci ne sont pas redimensionnables l'cran, or on doit toujours laisser la possibilit au visiteur de zoomer la page.<br>Pensez
que mme si vous avez de bons yeux actuellement, a ne durera pas. Un
jour, vous aussi, deviendrez presbyte, et vous serez content de pouvoir
zoomer un texte. Et je ne parle pas de toutes les autres dficiences
oculaires...</li>
<li>On vite aussi d'utiliser les pixels (<code>px</code>) car Internet
Explorer les considrent comme une unit de taille de caractre fixe, on
se retrouve donc avec le mme problme que prcdemment.</li>
</ol>
<p>Il faut donc utiliser des units relatives, telles que les <code>em</code> ou les <code>%</code>.
Ces units sont proportionnelles la taille en pixels dclare dans le
navigateur. Par dfaut, ceux-ci sont en gnral rgls 16px. C'est
donc une taille qui peut tre modifie par l'utilisateur... On n'a aucun
pouvoir l-dessus.</p>
<p>La taille des caractres se dclare par l'attribut <code>font-size</code>.</p>
<h4>L'hritage</h4>
<p>Considrons l'exemple suivant :</p>
<pre>body {
font-family:arial, sans-serif;
font-size:90%;
}
p {
font-size:90%;
}
</pre>
<p>Les textes inclus dans les paragraphes n'auront pas une taille de 90%
des 16 pixels dclars par dfaut (soit 14,4 pixels), mais <strong>90% des 90% des 16 pixels</strong> (soit peu prs 13 pixels... oui, je sais, ce sont des maths, a fait mal la tte).<br>En effet, le paragraphe hrite des proprits de son/ses parent(s), donc ici des valeurs dclares dans le <code>body</code>.</p>
<p>Il faut donc bien faire attention aux valeurs dclares. Il est donc
en gnral plus sage, et surtout plus simple, de dclarer la taille
100%, et de ne la rduire (ou l'augmenter) que ponctuellement.</p>
<h5>Exemple</h5>
<pre>body {
font-family:arial, sans-serif;
font-size:100%;
}
h1 {
font-size:200%;
}
#footer p {
font-size:90%;
}
</pre>
<p>Ici, seuls les paragraphes du <code><div id="footer"></code> auront une taille plus petite que les autres paragraphes de la page. (Pour plus de dtails sur la fonction de <code>id</code>, voir le tutoriel sur les <a href="http://css.mammouthland.net/selecteurs-css-class-id.php">slecteurs class et id</a>).</p>
<h4>Lien utile</h4>
<ul>
<li><a href="http://openweb.eu.org/articles/compatibilite_taille_polices">Compatibilit multi-navigateurs des polices de caractres</a> (OpenWeb)</li>
</ul>
<p class="haut"><a href="#haut">Haut</a></p>
<h3 id="couleurs">Le choix des couleurs</h3>
<p>On peut viter des choses comme a :</p>
<p><img src="font-css-polices-caracteres_fichiers/texte-gris-fond-noir.gif" alt="texte gris sur fond noir" height="97" width="217"> <img src="font-css-polices-caracteres_fichiers/texte-gris-fond-blanc.gif" alt="texte gris sur fond blanc" height="97" width="217"></p>
<p>Que ce soit l'un ou l'autre choix, surtout avec des tailles de
polices aussi petites, c'est vraiment trs trs pnible lire, car pas
assez contrast.</p>
<p>L encore, ayez l'esprit que tout le monde n'a pas les yeux de
superman et un super cran super lumineux et super contrast. La lecture
l'cran, c'est dj moins facile que sur papier, alors avec des choix
comme a... C'est peut-tre trs "design", mais a ne met pas les
internautes dans les meilleures dispositions de lecture.</p>
<p>Ce genre d'association n'est peut-tre pas non plus des plus heureuses :</p>
<p><img src="font-css-polices-caracteres_fichiers/texte-rouge-fond-lime.gif" alt="texte rouge sur fond vert clair (lime)" height="97" width="217"></p>
<p>Bref ! les couleurs se dclarent grce l'attribut <code>color</code>, et l'aide de codes hexadcimaux ou rvb (on vite les noms).</p>
<pre>body {
font-family:arial, sans-serif;
font-size:100%;
color:#000000; /*code hexadcimal du noir*/
}
</pre>
<h4><code>eight: normal | nombre | %</code></h4>
<p>De faon gnrale, pensez arer les textes, et respectez la smantique.</p>
<ul>
<li>Titrez bien vos diffrentes sections avec des <code>h1</code>, <code>h2</code>, <code>h3</code>, etc. en veillant respecter la hirarchie (pas de <code>h3</code> si pas de <code>h2</code> ; pas de <code>h2</code> si pas de <code>h1</code>, etc.)</li>
<li>Utilisez les balises <code><p></p></code> pour faire des paragraphes. Pas des <code>div</code> !</li>
<li><a href="http://css.mammouthland.net/blockquote-retraits-css.php">N'utilisez pas la balise <code>blockquote</code> pour faire des retraits</a>, elle est faite pour des blocs de citations</li>
<li>etc.</li>
</ul>
<h3 id="fontface">Proprit <code>@font-face</code></h3>
<p>Apparue dans les CSS 2.0, abandonne dans les CSS 2.1, elle renat pour de bon dans les CSS 3. Avec <code>@font-face</code>,
les limitations voques au dbut de ce tutoriel n'existent plus :
on va pouvoir faire "tlcharger" de faon transparente la police de
caractre n'existant pas sur le poste du visiteur.</p>
<p>Pour en savoir plus, poursuivez la lecture de <a href="http://css.mammouthland.net/css3/font-face.php">ce tutoriel sur @font-face</a>.</p>
<h3>Lectures complmentaires</h3>
<ul>
<li><a href="http://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html">Quelles polices de caractre utiliser sur le web ?</a> (Alsacreations)</li>
<li><a href="http://www.mammouthland.net/weblog/2009/24_08_09.php">Sites calques ! ( la bonne soupe de <code>div</code>)</a></li><a href="http://www.mammouthland.net/weblog/2009/24_08_09.php">
</a></ul><a href="http://www.mammouthland.net/weblog/2009/24_08_09.php">
</a><!-- /suite -->
<p class="haut"><a href="#" title="remonte">Haut</a></p><!-- /copy -->
</div><!-- /edito -->
<!-- Fin corps du document -->
<div id="menu">
<div id="navig">
<!-- Search Google -->
<h2><a href="http://css.mammouthland.net/premiers-pas-en-css.php" title="liste des tutoriels pour dbuter en CSS">Premiers pas en <abbr title="Cascading Style Sheets">CSS</abbr></a></h2>
<ul>
<li><a href="http://css.mammouthland.net/principe-des-css.php">Principe des CSS</a></li>
<li><a href="http://css.mammouthland.net/balises-html.php" title="Elments HTML connatre">Balises HTML de base</a></li>
<li><a href="http://css.mammouthland.net/feuille-de-style-css-debutant.php" title="Faire sa premire feuille de style">Feuille de style CSS de base</a></li>
<li><a href="http://css.mammouthland.net/font-css-polices-caracteres.php" title="Proprits CSS font et text">Mettre en forme un texte</a></li>
<li><a href="http://css.mammouthland.net/margin-padding-css.php" title="Proprits CSS margin et padding">Grer les marges en CSS</a></li>
<li><a href="http://css.mammouthland.net/selecteurs-css-class-id.php" title="Les classes et les identifiants">Slecteurs CSS class et id</a></li>
<li><a href="http://css.mammouthland.net/mise-en-page-sans-tableau.php" title="Mise en page 2 colonnes entirement en CSS">Mise en page sans tableau</a></li>
<li><a href="http://css.mammouthland.net/border-css.php" title="Proprit CSS border">Bordures en CSS</a></li>
<li><a href="http://css.mammouthland.net/image-de-fond-background-css.php" title="Proprit CSS background">Image de fond en CSS</a></li>
<li><a href="http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php" title="Rollover ou comment faire apparatre caractres et images sous la souris">Effets rollover en CSS</a></li>
<li><a href="http://css.mammouthland.net/positionner-image-float-html-css.php" title="Utilisation de float pour positionner une image et du texte">Aligner image et texte</a></li>
<li><a href="http://css.mammouthland.net/liste-a-puces-en-image-ul-li-css.php" title="Listes puces en CSS">Puces en images</a></li>
<li><a href="http://css.mammouthland.net/blockquote-retraits-css.php" title="Elment blockquote et proprit text-indent">Citations et retraits</a></li>
</ul>
<h2><a href="http://css.mammouthland.net/css3/">CSS3</a></h2>
<h2><a href="http://css.mammouthland.net/tutoriels-css.php" title="Liste des tutoriels de niveau avanc">Tutoriels CSS</a></h2>
<h2><a href="http://css.mammouthland.net/outils-css.php">Boite Outils</a></h2>
<h2><a href="http://css.mammouthland.net/articles-divers-css-html.php" title="Articles divers sur le CSS et le (x)html">Articles connexes</a></h2>
<div id="w3c">
<p><iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 144px; height: 20px;" class="twitter-follow-button" src="font-css-polices-caracteres_fichiers/follow_button.htm" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<script src="font-css-polices-caracteres_fichiers/widgets.js" type="text/javascript"></script></p>
<p><a href="http://www.alsacreations.fr/" title="Hberg par Alsacreations.fr"><img src="font-css-polices-caracteres_fichiers/logo-alsacreations.png" alt="Logo Alsacrations.fr"></a></p>
<p><a href="http://www.opquast.com/" title="Adoptez la qualit web"><img src="font-css-polices-caracteres_fichiers/soutien-opquast.png" alt="Logo de soutien au projet Opquast"></a></p>
<p><a href="http://soutenir.framasoft.org/?pseudo=PascaleLC&web=http%3A%2F%2Fcss.mammouthland.net%2F" title="Je soutiens Framasoft, pourquoi pas vous ?"><img src="font-css-polices-caracteres_fichiers/Laroute_125.png" alt="Soutenir Framasoft" height="125" width="125"></a></p>
</div> <!-- /w3c -->
</div><!-- /navig -->
</div><!-- /menu -->
<!-- dbut Barre de navigation -->
</div><!-- /main --><!-- /pelouse -->
</div> <!-- /page -->
<!-- Fin barre de navigation -->
</body></html>