Informatique


Les caractères

Aller à

La couleur des caractères

La propriété color permet de mettre du texte en couleur :

  • au moyen du code hexadécimal
  • au moyen du code décimal (rgb)
  • au moyen du code décimal (rgba)
  • au moyen du nom de la couleur.
Les couleurs:
color : #FF9999/*le texte est de couleur rose*/
color : rgb(255,0,0)/*le texte est de couleur rouge*/
color : rgba(255,0,0,0.5)/*le texte est de couleur rouge à 50% de transparence*/
color : green/*le texte est de couleur verte*/
Démo
	<html>
	<head>
	<style>
		.rouge	{color:rgba(255,0,0,0.6);}
	</style>
	</head>
	<body>
		<div class=rouge>La simplicité est la sophistication suprême. (Léonard de Vinci)</div>
	</body>
	</html>

Ombrer les caractères

La propriété text-shadow permet de placer une ombre sur les caractères.

Ombrer des caractères
text-shadow : 10px 20px 0px rgba(255,0,0,0.5)/*texte ombré de rouge*/

Détails de la propriété text-shadow, dans l'ordre :

  • décalage horizontal, à droite si positif et à gauche si négatif
  • décalage vertical, en bas si positif et en haut si négatif
  • le flou, uniquement une valeur positive (si 0 pas de flou).
  • la couleur du flou ainsi que son pourcentage de transparence
Démo
	<html>
	<head>
	<style>
		.ombre	{ text-shadow : 10px 5px 0px rgba(255,0,0,0.5); }
	</style>
	</head>
	<body>
		<div class=ombre>La simplicité est la sophistication suprême. (Léonard de Vinci)</div>
	</body>
	</html>

Les polices de caractères

La propriété font-family permet de spécifier la police de caractères. On peut la spécifier soit par un nom générique de fonte, soit par un nom spécifique (le nom de la police).
En CSS un nom générique de fonte renvoie à une famille de polices de type proche, il existe 5 noms génériques:

  • serif: polices avec empattement comme Times, appréciées car bonne lisibilité.
  • sans-serif: polices sans empattement comme Arial ou Lucida.
  • monospace: polices non proportionnelles, les caractères ont la même largeur, Courrier New par exemple.
  • cursive: polices proche de l'écriture cursive (naturelle), Zapf Chancery par exemple.
  • fantasy: polices décorative, Braggadocio par exemple.
Police:
font-family : sans-serif/*affichage du texte dans une police sans sérif (dépend du navigateur)*/
font-family : "Times New Roman"/*affichage du texte en Times New Roman*/
font-family : MV Boli, Arial, "Times New Roman", Serif/*police rare + polices de remplacement*/

Attention:

  • pour des polices rares, il est utile de spécifier une ou plusieurs polices de remplacement.
  • les noms des polices de caractères doivent être spécifiés dans leur orthographe exacte (et entourées de guillemets si le nom contient des espaces);
  • dans le cas où aucune police n'est spécifiée, c'est la police par défaut qui est affichée.

Démo
	<html>
	<head>
	<style>
		.afficpol	{ font-family : MV Boli, Arial, "Times New Roman", Serif; }
	</style>
	</head>
	<body>
		<div class=afficpol>La simplicité est la sophistication suprême. (Léonard de Vinci)</div>
	</body>
	</html>

Déclarer une police de caractères

Lorsqu'on désire utiliser une police particulière, il suffit de la télécharger et de dézipper le fichier la contenant dans un dossier dédié aux polices.

La commande @font-face permet avec les propriétés:

  • font-family de donner un nom de votre choix à la police
  • src de préciser au browser le chemin qui mène à la définition de la police

Liste des formats de police admis :
  • Web Open Font Format (.woff)
  • TrueType (.ttf)
  • OpentType (.ttf et .otf)
  • TrueType with Apple Advanced Technology extensions (.ttf)
  • Embedded OpenType (.eot)
  • SVG Font (.svg ou .svgz)
Démo
	<html>
	<head>
	<style>
	@font-face {
		font-family: "Ma Super Fonte";
		src: url('../../work/police/fondy_script/FondyScript_PERSONAL_USE_ONLY.ttf');
	}
	.afficpol	{
		font-family: "Ma Super Fonte", Verdana, Arial, sans-serif;
	}
	</style>
	</head>
	<body>
		<div class=afficpol>La simplicité est la sophistication suprême. (Léonard de Vinci)</div>
	</body>
	</html>

Ajouter une police de caractères avec Google Fonts

Google propose un moyen assez simple pour implémenter une police particulière:

  • Aller sur Google Fonts
  • Sélectionner la police en cliquant sur le +.
  • Copier/Coller la balise <link> proposée dansz le <head>
  • Copier/Coller le font-family proposé dans la FS
Démo
	<html>
	<head>
	<link href="https://fonts.googleapis.com/css?family=Black+And+White+Picture" rel="stylesheet">
	<style>
	.afficpol	{
		font-family: 'Black And White Picture', sans-serif;
	}
	}
	</style>
	</head>
	<body>
		<div class=afficpol>La simplicité est la sophistication suprême. (Léonard de Vinci)</div>
	</body>
	</html>

Taille des caractères

La propriété font-size permet de spécifier le corps (la taille) de la police spécifiée.

Taille des caractères:
font-size : 14pt/*le corps de la police courante est de 14 pt*/
font-size : xx-small/*le corps de la police courante est fortement réduit*/
font-size : 3em/*le corps de la police courante est multipliée par 3 par rapport à la taille de la police de son ancêtre direct*/
font-size : 3rem/*le corps de la police courante est multipliée par 3 toujours par rapport à la taille de la police définie
dans l'élément racine (<html>)
*/
font-size : 150%/*le corps de la police courante est multipliée par 1,5*/

L'unité rem doit être privilégiée car elle permet d'adapter la taille de la police à l'écran grâce aux media-queries.

On peut éventuellement utiliser :

  • un des 4 mots clés suivants : xx-small (très très petite), x-small (très petite), small (petite), medium (normal, c'est la taille par défaut qui vaut 10 ou 12 pt selon le navigateur), large (grande), x-large (très grande) et xx-large (très très grande);
  • les unités relatives em et ex précédés d'un coefficient multiplicateur (un réel positif);
  • un pourcentage inférieur ou supérieur à 100.

Démo
	<html>
	<head>
	<style>
	.afficpol	{
		font-size: 2rem;
	}
	</style>
	</head>
	<body>
		<div class=afficpol>La simplicité est la sophistication suprême. (Léonard de Vinci)</div>
	</body>
	</html>

Styles de la police

La propriété font-style permet de spécifier l'inclinaison d'une police, il existe trois valeurs possibles : normal, italic, oblique.

Les styles:
font-style : normal/*valeur par défaut*/
font-style : italic/*texte en italique*/
font-style : oblique/*texte en oblique*/
Démo
	<html>
	<head>
	<style>
	.afficpol	{
		font-style: italic;
	}
	</style>
	</head>
	<body>
		<div class=afficpol>La simplicité est la sophistication suprême. (Léonard de Vinci)</div>
	</body>
	</html>

Graisses de la police

La propriété font-weight permet d'appliquer une graisse à la police choisie.

Graisse:
font-weight : 200graisse de 200 appliquée aux caractères
font-weight : boldercaractères très gras.
On utilise :
  • soit une valeur de 100 (très léger) à 900 (très gras) par pas de 100. 400 correspond à la valeur normale et 700 à bold;
  • soit un des 4 mots clés suivants : normal (valeur par défaut), bold (gras), bolder (très gras), lighter (léger).
Démo
	<html>
	<head>
	<style>
	.afficpol	{
		  font-weight: 800;
	}
	</style>
	</head>
	<body>
		<div class=afficpol>La simplicité est la sophistication suprême. (Léonard de Vinci)</div>
	</body>
	</html>

Les petites capitales

La propriété font-variant permet l'écriture en petites capitales, cela permet de respecter les accents de la langue française.

Petites capitales:
font-variant : normal/*petites capitales de taille normales (valeur par défaut)*/
font-variant : small-caps/*petites capitales de petite taille*/
Démo
	<html>
	<head>
	<style>
	.maj	{
		  font-variant: small-caps;
	}
	</style>
	</head>
	<body>
	<div><span class=maj>é</span>cole</div>
	</body>
	</html>

Regroupement des propriétés

La propriété font permet de regrouper les 5 propriétés suivants, dans l'ordre :

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

Les valeurs associées à ces différentes propriétés doivent être entrées dans l'ordre décrit ci-dessus et séparées par des espaces.
Une propriété dont on désire garder la valeur par défaut ne doit pas être indiquée.

Regroupement:
font : italic small-caps bold 2rem arial/*toutes les propriétés ont une valeur*/
font : oblique 1.5rem arial/*3 propriétés sur 5 ont une valeur*/

On privilégie l'écriture condensée, en voici le détail:

Démo
	<html>
	<head>
	<style>
		.aff	{
			font: italic bold 1.5rem "Comic Sans MS",Arial, sans-serif;
		}
	</style>
	</head>
	<body>
		<div class=aff>Comme une journée bien remplie nous donne un bon sommeil,
une vie bien vécue nous mène à une mort paisible.</div> </body> </html>