CSS offre de nombreuses propriétés pour personnaliser l'aspect du texte, allant de la police au style en passant par les ombres portées.
Les propriétés de police CSS comprennent des informations sur la police, le style de police et le poids de la police. Ces propriétés sont bien sûr principalement utiles pour les éléments HTML contenant du texte (p, i, etc.). Elles peuvent également être utilisées pour les tableaux.
Avec font-family, vous pouvez définir la police à utiliser.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Le résultat dans le navigateur est le suivant :
Les polices les plus courantes sont par exemple Arial, Helvetica et Times Roman. La propriété CSS font-family permet de spécifier les polices souhaitées. Si plusieurs polices sont indiquées, l'ordre est important. Si la première police spécifiée est disponible, elle sera utilisée. Les polices souhaitées sont séparées par des virgules. En dernière instruction, on indique généralement une famille de polices générique. En utilisant une telle famille, les navigateurs ont la possibilité de choisir une police similaire à celle indiquée.
• serif = une police à empattements
• sans-serif = une police sans empattements
• cursive = une police cursives
• fantasy = une police fantaisie
• monospace = une police à chasse fixe.
Le style de police
Avec la propriété font-style, vous pouvez définir le style de police. Si la police choisie le permet, la valeur italic permet d'obtenir une écriture en italique.
D'autres polices peuvent être inclinées en utilisant oblique.
La propriété CSS suivante qui influence la présentation du texte est appelée font-variant. Elle permet de définir des petites capitales.
Pour cela, on assigne à font-variant la valeur small-caps.
La taille de la police
Il est bien sûr également important de spécifier la taille de la police. CSS met à disposition la propriété font-size. Les tailles de police peuvent être spécifiées dans différentes unités.
• EM
• REM
• Pixel
• Pourcentage
• Mots-clés
Les mots-clés disponibles sont les suivants :
• xx-small – très, très petit
• x-small – très petit
• small – petit
• smaller – plus petit que l'élément parent
• medium – moyen
• large – grand
• x-large – très grand
• xx-large – très, très grand
• larger – plus grand que l'élément parent
Voici un exemple de définition de la taille de police :
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Voici ce que cela donne dans le navigateur :
Veillez à bien noter que la définition de la taille de police est très complexe car les différentes unités de mesure ont chacune leurs avantages et leurs inconvénients.
Un bon aperçu de la meilleure unité à utiliser dans quelle situation se trouve sur le site http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. En résumé, pour ceux qui ne veulent pas tout lire : utilisez des valeurs relatives telles que em pour l'affichage à l'écran. Pour les mises en page imprimées, utilisez des unités absolues telles que pt.
Le poids de la police
Poursuivons avec ce qu'on appelle le poids de la police. Cela permet de déterminer l'épaisseur et la force d'une police. Pour cela, on utilise la propriété font-weight.
.fett {
font-weight:bold;
}
En utilisant cette syntaxe, le texte ainsi désigné s'affiche en gras.
Les valeurs possibles sont bold (gras), bolder (très gras), lighter (plus léger) et normal. De plus, les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900 sont autorisées. Elles vont d'extra-fin (100) à très gras (900).
Résumé des définitions
En relation avec les définitions de police, la propriété line-height joue également un rôle important, permettant de définir la hauteur de ligne. Je reviendrai plus en détail sur cette propriété plus tard. Elle doit simplement être mentionnée à ce stade car elle joue un certain rôle en relation avec la propriété font qui sera présentée par la suite.
Vous pouvez combiner les informations présentées jusqu'à présent sur l'affichage des polices. Cela se fait via la propriété générale font. Cela comprend les éléments individuels suivants ou les inclut.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
À l'aide de font, vous pouvez combiner différentes mises en forme de police. Vous pouvez spécifier les propriétés mentionnées précédemment, mais vous n'êtes pas obligé de toutes les utiliser. Les propriétés obligatoires sont cependant la taille de la police et la famille de la police.
Grâce à la syntaxe abrégée, il est possible de garder les fichiers CSS plus courts et plus clairs.
L'ordre, tel qu'indiqué ci-dessous, doit cependant être respecté. Lorsque les deux propriétés font-size et line-height sont enregistrées, elles doivent être séparées par une barre oblique. Si seule une valeur est donnée à ce stade, elle correspond à font-size.
Un exemple:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust a été développé pour permettre de rendre les polices approximativement de la même taille. Les polices différentes présentent différentes hauteurs x pour une même hauteur de police. Cependant, les polices avec une hauteur x plus grande sont plus lisibles. Ainsi, il peut arriver qu'un document soit difficile à lire si la police d'origine n'est pas disponible et est remplacée par une autre avec une hauteur x plus petite. Avec font-size-adjust, cette différence devrait pouvoir être compensée.
Un exemple:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
Dans le prochain tutoriel, vous découvrirez d'autres façons d'ajuster l'apparence du texte de votre site web.
