Changer La Police D Un Texte

Nous arrivons maintenant à un chapitre qui devrait beaucoup vous intéresser.

Non, le « formatage du texte » n'a rien à voir avec la devastation de toutes les données présentes sur votre disque dur ! Cela signifie simplement que 50'on va modifier l'apparence du texte (on dit qu'on le « met en forme »).

Pas de surprise particulière : nous sommes toujours dans le CSS, et nous allons réutiliser ce que nous venons d'apprendre dans le chapitre précédent. Nous allons donc travailler directement au sein du fichier.css que nous avons créé.

Ce chapitre va être 50'occasion de découvrir de nombreuses propriétés CSS : nous allons voir comment modifier la taille du texte, changer la police force, aligner le texte…

La taille

Pour modifier la taille du texte, on utilise la propriété CSSfont-size . Mais comment indiquer la taille du texte ? C'est là que les choses se corsent, car plusieurs techniques vous sont proposées :

indiquer une taille absolue : en pixels, en centimètres ou millimètres. Cette méthode est très précise, mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, machine on risque d'indiquer une taille trop petite cascade certains lecteurs ;
indiquer une taille relative : en pourcentage, « em » ou « ex », cette technique a l'avantage d'être plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs.

Une taille absolue

Pour indiquer une taille absolue, on utilise généralement les pixels. Cascade avoir un texte de 16 pixels de hauteur, vous devez donc écrire :

          font-size: 16px;

Les lettres auront une taille de sixteen pixels, comme le montre la figure suivante.

Voici united nations exemple d'utilisation (placez ce lawmaking dans votre fichier.css ) :

          p {     font-size: 14px; /* Paragraphes de 14 pixels */ } h1 {     font-size: 40px; /* Titres de forty pixels */ }

Et le résultat est visible à la figure suivante.

Une valeur relative

C'est la méthode recommandée, car le texte due south'adapte alors plus facilement aux préférences de tous les visiteurs.

Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la taille avec des mots en anglais comme ceux-ci :

xx-small : minuscule ;
10-small : très petit ;
pocket-size : petit ;
medium : moyen ;
large : grand ;
x-big : très m ;
xx-large : euh… gigantesque.

Vous pouvez tester l'utilisation de ces valeurs dans votre code CSS :

          p {     font-size: small; } h1 {     font-size: big; }

Bon, cette technique a un défaut : il n'y a que sept tailles disponibles (auto il n'y a que sept noms). Heureusement, il existe d'autres moyens. Ma technique préférée consiste à indiquer la taille en « em ».

Si vous écrivez1em , le texte a une taille normale.
Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme1.3em .
Si vous voulez réduire le texte, inscrivez une valeur inférieure à ane, comme0.8em .

Exemple :

          p {     font-size: 0.8em; } h1 {     font-size: ane.3em; }

D'autres unités sont disponibles. Vous pouvez essayer le « ex » (qui fonctionne sur le même principe que le em, mais qui est plus petit de base) et le pourcentage (80 %, 130 %…).

La police

Ah… la constabulary… On touche united nations point sensible.

En effet, il se pose un problème : pour qu'une police s'poster correctement, il faut que tous les internautes l'aient. Si un internaute northward'a pas la même police que vous, son navigateur prendra une police par défaut (une police force standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendiez.

La bonne nouvelle, c'est que depuis CSS 3, il est possible de faire télécharger automatiquement une police au navigateur. Je vous expliquerai dans un 2nd temps comment faire cela.

Modifier la police utilisée

La propriété CSS qui permet d'indiquer la police à utiliser estfont-family . Vous devez écrire le nom de la police comme ceci :

          balise {     font-family unit: police; }

Seulement, pour éviter les problèmes si l'internaute n'a pas la même police que vous, on précise en général plusieurs noms de police, séparés par des virgules :

          balise {     font-family: police1, police2, police3, police4; }

Le navigateur essaiera d'abord d'utiliser lapolice1 . S'il ne l'a pas, il essaiera lapolice2 . Southward'il ne l'a pas, il passera à lapolice3 , et ainsi de suite.
En général, on indique en tout dernierserif , ce qui represent à une constabulary par défaut (qui ne s'applique que si aucune autre police n'a été trouvée).

Oui, mais quelles sont les polices les plus courantes qu'on a le « droit » d'utiliser, me direz-vous ?
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :

Arial ;
Arial Blackness ;
Comic Sans MS ;
Courier New ;
Georgia ;
Touch ;
Times New Roman ;
Trebuchet MS ;
Verdana.

La figure suivante vous montre à quoi ressemblent ces polices.

Ainsi, si j'écris :

          p {     font-family: Bear upon, "Arial Blackness", Arial, Verdana, sans-serif; }

… cela signifie : « Mets la police Impact ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon Verdana, ou si rien due north'a marché, mets une police force standard (Sans Serif) ».

En général, il est bien d'indiquer united nations choix de trois ou quatre polices (+ Serif ou Sans Serif), afin de southward'assurer qu'au moins l'une d'entre elles aura été trouvée sur l'ordinateur du visiteur.

Utiliser une police personnalisée avec`@font-confront`

Je trouve le choix des polices trop limité.
Comment puis-je utiliser ma police force préférée sur monday site web ?

Pendant longtemps, cela n'était pas possible. Aujourd'hui, avec CSS 3, il existe heureusement un moyen d'utiliser n'importe quelle police sur son site. Cela fonctionne bien avec la plupart des navigateurs.

Mais attention, il y a des défauts (ce serait trop beau, sinon) :

il faudra que le navigateur de vos visiteurs télécharge automatiquement le fichier de la constabulary, dont le poids peut atteindre, voire dépasser ane Mo… ;
la plupart des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser sur son site. Heureusement, il existe des sites comme fontsquirrel.com et dafont.com qui proposent en téléchargement un certain nombre de polices libres de droits. Je recommande en particulier fontsquirrel.com, car il permet de télécharger des packs prêts à l'emploi pour CSS 3 ;
il existe plusieurs formats de fichiers de polices, et ceux-ci ne fonctionnent pas sur tous les navigateurs.

Voici les différents formats de fichiers de polices qui real et qu'il faut connaître :

.ttf : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs ;
.eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire, produit par Microsoft ;
.otf : OpenType Font. Ne fonctionne pas sur Internet Explorer ;
.svg : SVG Font. Le seul format reconnu sur les iPhone et iPad pour le moment ;
.woff : Web Open Font Format. Nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous les autres navigateurs.

En CSS, pour définir une nouvelle police, vous devez la déclarer comme ceci :

          @font-face up {     font-family: 'MaSuperPolice';     src: url('MaSuperPolice.eot'); }

Le fichier de police (ici MaSuperPolice.eot) doit ici être situé dans le même dossier que le fichier CSS (ou dans un sous-dossier, si vous utilisez un chemin relatif).

Je croyais qu'il y avait plusieurs formats de police ?

Oui, d'ailleurs les.eot ne fonctionnent que sur Internet Explorer. L'idéal est de proposer plusieurs formats pour la police : le navigateur téléchargera celui qu'il sait lire. Voici comment indiquer plusieurs formats :

          @font-face {     font-family: 'MaSuperPolice';     src: url('MaSuperPolice.eot') format('eot'),          url('MaSuperPolice.woff') format('woff'),          url('MaSuperPolice.ttf') format('truetype'),          url('MaSuperPolice.svg') format('svg'); }

Pour tester le fonctionnement, je vous propose de télécharger une police force sur Font Squirrel, par exemple CAC Champagne. Cliquez sur « Webfont Kit », cela vous permettra de télécharger united nations kit prêt à l'emploi avec tous les formats pour cette law. N'oubliez pas de cocher toutes les cases (WOFF, TTF, EOT et SVG).

Votre fichier CSS ressemblera au last à ceci :

          @font-face up { /* Définition d'une nouvelle constabulary nommée CAC Champagne */     font-family: 'cac_champagneregular';     src: url('cac_champagne-webfont.eot');     src: url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),          url('cac_champagne-webfont.woff') format('woff'),          url('cac_champagne-webfont.ttf') format('truetype'),          url('cac_champagne-webfont.svg#cac_champagneregular') format('svg'); }  h1 /* Utilisation de la constabulary qu'on vient de définir sur les titres */ {     font-family unit: 'cac_champagneregular', Arial, serif; }

La première (grosse) department@font-face permet de définir un nouveau nom de police qui pourra être utilisé dans le fichier CSS. Ensuite, nous utilisons ce nom de constabulary avec la propriétéfont-family , que nous connaissons, pour modifier 50'apparence des titres<h1> . Vous pouvez voir le résultat à la figure suivante.

Affichage d'une police personnalisée — Affichage d'une constabulary personnalisée

Italique, gras, souligné…

Il existe en CSS une série de propriétés classiques de mise en forme du texte. Nous allons découvrir ici comment afficher le texte en gras, italique, souligné… et au passage nous verrons qu'il est même possible d'aller jusqu'à le faire clignoter !

Mettre en italique

Attends un peu là ! Je croyais que la balise<em> permettait de mettre un texte en italique ?!

Je n'ai jamais dit cela.
Retournez voir les chapitres précédents si vous avez des doutes, mais je northward'ai jamais dit que la balise<em> était faite pour mettre le texte en italique (de même que je n'ai jamais dit que<strong> était faite pour mettre en gras).

<em> , mettez-vous bien cela dans la tête, est faite pour insister sur des mots. Cela veut dire que les mots qu'elle entoure sont assez importants.
Pour représenter cette importance, la plupart des navigateurs choisissent d'afficher le texte en italique, mais ce north'est pas une obligation.

Le CSS lui, permet de dire réellement : « Je veux que ce texte soit en italique ». Rien ne vous empêche, par exemple, de décider que tous vos titres seront en italique.

Concrètement, en CSS, pour mettre en italique, on employfont-style qui peut prendre trois valeurs :

italic : le texte sera mis en italique ;
oblique : le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement différent de 50'italique proprement dit) ;
normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre<em> ne soient plus en italique, vous devrez écrire :

          em {     font-way: normal; }

Ainsi, dans l'exemple suivant, je me sers defont-style pour mettre en italique tous mes titres<h2> :

          h2 {     font-style: italic; }

Mettre en gras

Et si nous passions à la mise en gras ?
Alors, là encore, n'oubliez pas que ce n'est pas<strong> qui permet de mettre en gras (son rôle est d'indiquer que le texte est important, donc le navigateur l'poster généralement en gras). La mise en gras en CSS peut par exemple due south'appliquer aux titres, à certains paragraphes entiers, etc. C'est à vous de voir.

La propriété CSS pour mettre en gras estfont-weight et prend les valeurs suivantes :

bold : le texte sera en gras ;
normal : le texte sera écrit normalement (par défaut).

Voici par exemple annotate écrire les titres en gras :

          h1 {     font-weight: bold; }

Soulignement et autres décorations

La propriété CSS associée porte bien son nom :text-decoration . Elle permet, entre autres, de souligner le texte, mais pas seulement. Voici les différentes valeurs qu'elle peut prendre :

underline : souligné ;
line-through : barré ;
overline : ligne au-dessus ;
none : normal (par défaut).

Ce CSS va vous permettre de tester les effets detext-ornament :

          h1 {     text-decoration: blink; } .souligne {     text-decoration: underline; } .barre {     text-decoration: line-through; } .ligne_dessus {     text-decoration: overline; }

Et le résultat est visible à la figure suivante.

L'alignement

Le langage CSS nous permet de faire tous les alignements connus : à gauche, centré, à droite et justifié.

C'est tout simple. On utilise la propriététext-align et on indique fifty'alignement désiré :

left : le texte sera aligné à gauche (c'est le réglage par défaut) ;
center : le texte sera centré ;
right : le texte sera aligné à droite ;
justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.

Regardez les différents alignements sur cet exemple :

          h1 {     text-align: eye; }  p {     text-marshal: justify; }  .signature {     text-align: correct; }

Le résultat est visible sur la figure suivante.

Les flottants

Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait united nations « habillage ».

Pour que vous voyiez bien de quoi on parle, la figure suivante vous montre ce que nous allons apprendre à faire.

Une image flottante entourée par du texte

J'imagine que, maintenant, la question qui vous brûle les lèvres est : « Mais quelle est donc la propriété magique qui fait flotter ? ».
La réponse est…bladder (« flottant » en anglais). Cette propriété peut prendre deux valeurs très simples :

left : l'élément flottera à gauche ;
right : l'élément flottera… à droite ! Oui, bravo.

50'utilisation des flottants est très simple :

Vous appliquez unbladder à une balise.
Puis vous continuez à écrire du texte à la suite normalement.

Faire flotter une image

Nous allons apprendre ici à faire flotter une image. Voici le code HTML que nous devons taper dans un premier temps :

          <p><img src="flash.gif" grade="imageflottante" alt="Paradigm flottante" /> Ceci est un texte normal de paragraphe, écrit à la suite de 50'image et qui l'habillera car 50'prototype est flottante.</p>

Voici le seul bout de lawmaking CSS qu'on ait besoin de taper, qui permet de faire flotter fifty'prototype à gauche :

          .imageflottante {     bladder: left; }

Amusez-vous aussi à faire flotter 50'prototype à droite, c'est tout bête : il suffit d'indiquer la valeurright , et le tour est joué !

Stopper un flottant

Quand vous mettez en place un flottant, le texte autour fifty'habille. Mais comment faire si vous voulez qu'au tour d'united nations moment le texte continue en dessous du flottant ? On pourrait enchaîner plusieurs<br /> à la suite, mais cela ne serait ni élégant ni très propre…

En gros, on aimerait pouvoir obtenir le même résultat qu'à la figure suivante.

Le texte sous l'image ignore la propriété float — Le texte sous fifty'image ignore la propriété bladder

Il existe en fait une propriété CSS qui permet de dire : « Stop, ce texte doit être en-dessous du flottant et non plus à côté ». C'est la propriétéarticulate , qui peut prendre ces trois valeurs :

left : le texte se poursuit en dessous après united nationsfloat: left;
correct : le texte se poursuit en dessous après unfloat: right;
both : le texte se poursuit en dessous, que ce soit après unfloat: left; ou après unfloat: correct; .

Pour simplifier, on va utiliser tout le temps leclear: both , qui marche après un flottant à gauche et après un flottant à droite (cela fonctionne donc à tous les coups). Pour illustrer son fonctionnement, on va prendre ce lawmaking HTML :

          <p><img src="wink.gif" class="imageflottante" alt="Image flottante" /></p> <p>Ce texte est écrit à côté de fifty'image flottante.</p> <p class="dessous">Ce texte est écrit sous l'epitome flottante.</p>

Et ce code CSS :

          .imageflottante {     bladder: left; } .dessous {     articulate: both; }

Et voilà le travail.

On applique united nationsclear: both; au paragraphe que l'on veut voir continuer sous fifty'image flottante, et le bout est joué !

En résumé

On modifie la taille du texte avec la propriété CSSfont-size . On peut indiquer la taille en pixels (16px), en « em » (1.3em), en pourcentage (110 %), etc.
On change la police force du texte avecfont-family unit . Attention, seules quelques polices sont connues par tous les ordinateurs. Vous pouvez cependant utiliser une police personnalisée avec la directive@font-confront : cela forcera les navigateurs à télécharger la police de votre choix.
De nombreuses propriétés de mise en forme du texte existent :font-style cascade fifty'italique,font-weight pour la mise en gras,text-decoration pour le soulignement, etc.
Le texte peut être aligné avectext-align .
On peut faire en sorte qu'une image soit habillée (« entourée ») de texte avecfloat .