Déc
31

Comment personnaliser vos polices en CSS

Voici comment modifier les polices et leur forme dans votre site web ou votre blog.

Modification de police en CSS

Rappel

En CSS toutes les commandes sont de la forme suivante :

commande : valeur;

Donc si vous souhaitez redéfinir vos polices pour votre blog ou site entier vous pouvez mettre vos modifications dans la section body de votre feuille de style.

Par exemple :

body {
font: 10px Verdana italic bold;
}

Pour ceux qui utilisent WordPress, les feuilles de style (pages qui définissent l’apparence d’un site) se trouvent dans Apparence puis Editeur et dans la colonne de droite en dessous du titre Styles.

Police

Avec le terme font-family vous pouvez spécifier une ou plusieurs polices à la suite séparées par des virgules.

Si le nom de la police comporte des espaces il faut l’entourer de guillemets.

Exemple :

font-family: « Times new roman »;

Chaque système d’exploitation possède ses propres polices, certaines sont communes d’autres non.

Les navigateurs ne les affichent pas non plus exactement de la même façon.

Si vous spécifiez plusieurs fonts, elles seront prises en compte dans l’ordre. Donc quand le navigateur lit la ligne commencant par font ou font-family, il va tenter de trouver la première police qui est indiquée. Si elle n’est pas installée sur l’ordinateur, le navigateur passe à la suivante jusqu’à ce qu’il en trouve une qui fonctionne.

Il est donc conseillé de spécifier soit une police commune à Windows, Linux, MacOS, etc., soit d’en donner une par OS.

Le CSS comporte des familles génériques qui permettent de s’affranchir de ces divergences car elles  englobent chacune plusieurs polices qui ont des caractéristiques communes.

  • serif -> police avec empattement
  • sans-serif -> police sans empattement
  • cursive -> police pour écriture manuscrite
  • fantasy -> police pour écriture originale
  • monospace -> police avec des signes courier

Voici comment s’affichent les familles précédentes :

Serif
Sans serif
Cursive
Fantasy
Monospace

Il est donc préférable de toujours ajouter en dernier dans la liste de vos polices l’une des génériques. Ainsi, si aucune de celles spécifiées au début n’est présente sur l’OS de l’utilisateur, votre site s’affichera avec une police correspondant à la famille spécifiée.

Par exemple si vous indiquez sans-serif votre page s’affichera peut-être avec la police Arial qui fait partie de cette famille.

Attributs

Une fois les polices définies vous pouvez y apporter des modifications avec les paramètres suivants.

Style

La commande font-style peut prendre les valeurs suivantes :

font-style: normal;

normal

font-style: italic;

italic

font-style: oblique;

oblique

Poids

font-weight: normal;

normal

font-weight: bold;

bold

Il est possible d’indiquer une valeur multiple de 100.

font-weight: 100;

texte avec un font-weight de 900

font-weight: 400 équivaut à normal
font-weight: 700 équivaut à bold

Variante

La commande font-variant permet de mettre du texte en majuscule.

font-variant: normal;

texte en minuscule

font-variant: small-caps;

texte en minuscule

Taille

Elle peut-être modifiée avec l’attribut font-size de plusieurs façons.

Taille fixe

Vous pouvez utiliser une valeur personnalisée avec les unités traditionnelles : px (pixels), cm (centimètres), em, etc.

Taille relative

Vous avez la possibilité d’utiliser une valeur relative à l’élément font-size parent:

  • un pourcentage. Par exemple : font-size: 10%;
  • une valeur prédéfinie. Par exemple : font-size: smaller ou font-size: larger.

Taille prédéfinie

Mais vous avez aussi des valeurs prédéfinies qui sont les suivantes :
xx-small
x-small
small
medium
large
x-large
xx-large

 

Casse

La casse se modifie avec le paramètre text-transform.  Elle peut prendre les valeurs suivantes :

text-transform: none;

none

text-transform: lowercase;

TEXTE EN MAJUSCULE

text-transform: uppercase;

texte en minuscule

text-transform: capitalize;

ceci est une phrase sans majuscule

Ecriture simplifiée

Tout les attributs précédents sauf text-transform peuvent être regoupés en une seule ligne.

Par exemple vous avez défini ce qui suit :

body {
font-family: Verdana, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 5px;
text-transform: uppercase;
}

 

Vous aurez le même résultat en écrivant :

body {
font:  italic bold 5px Verdana, sans-serif;
text-transform: uppercase;
}

Articles similaires :

4 Comments to “Comment personnaliser vos polices en CSS”

  • Damien from Tutoriaux Wordpress 1 janvier 2012 à 13 h 48 min

    Bonjour Arnaud,
    j’ai découvert ton blog grâce aux pépites d’Olivier et je trouve qu’il a quelque chose de « rafraîchissant » grâce au thème que tu as choisi.
    Ton explication ci-dessus est claire et sera utile à beaucoup de ceux qui ont peur de se plonger dans les CSS. Je ne sais pas quel temps tu as passé à la mise en forme, mais je dois dire que c’est nickel.
    Bon courage pour la suite et à très bientôt, j’espère.

    Damien.
    Damien@Tutoriaux WordPress Articles récents..Keyword Luv Like pour Mystique (et autres thèmes)My Profile

  • agrumeprod 1 janvier 2012 à 16 h 40 min

    Merci beaucoup ;)

    Ce n’est pas un thème choisi mais un thème modifié par mes soins.

    Je confirme, mettre en forme un article contenant du code est très très long, presque plus que d’écrire l’article.

    A bientôt ;)

  • elo 9 janvier 2012 à 13 h 11 min

    Bonjour,

    A propos de CSS, il y a un souci sur le site : vous présumez que tout le monde à un fond de fenêtre blanc. Or, ce n’est pas toujours le cas : sur mon PC, je n’ai pas mis un fond blanc mais gris, ce qui fait que le site n’apparait pas très bien (le logo se détache nettement par exemple).

    Ainsi, il faudrait forcer la balise body à background-color:white (car par défaut, il est transparent). Sur un navigateur comme Firefox, cela ne se voit pas car Firefox force la balise body à blanc. Essayez sur Opera ou sur IE, il y a le même problème.

    Cordialement.
    elo Articles récents..Muffins aux pommesMy Profile

  • agrumeprod 9 janvier 2012 à 19 h 37 min

    Ah oui tiens ? Je n’y avait pas pensé.

    J’ai fait la modification. Vu que je n’arrive pas à le reproduire avec Opera 11 est-ce que tu peux me dire si c’est mieux désormais ?

    Je te remercie pour cette remarque très pertinente.

    Ca pourrait même faire l’objet d’un article tiens :)