Les Polices D'ecriture

Voir au format PDF

Vous êtes ici : >> HTML-CSS / Les Polices D'ecriture

Temps d'étude : 30 min.

Niveau : Facile.

Tags : Les Polices D'ecriture

Fichier(s) utile(s) pour ce cours : /

Comment utiliser une police d'écriture classique ?

Nous allons créer deux nouveaux fichiers : texte.html et texte.css

Ces deux nouveaux fichiers seront placés dans notre dossier /HtmlCss/02-Structure/.

Ce qui donnera : /HtmlCss/02-Structure/texte.html et /HtmlCss/02-Structure/texte.css

Voici le contenu de texte.html :

texte.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Police css3</title>
				<link rel="stylesheet" href="texte.css">
			<head>
			<body>
				<h1>Mon Titre</h1><!-- Titre principal -->
				<h2>Autre Titre</h2> <!-- SousTitre -->
				<p>Le Lorem Ipsum <strong>est simplement du faux texte</strong> employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, <cite>quand un peintre anonyme assembla ensemble des morceaux de texte</cite> pour réaliser un livre spécimen de polices de texte.<br>Il n'a pas fait que survivre cinq siècles, mais s'est aussi <strike>adapté à la bureautique</strike> informatique, sans que son contenu n'en soit modifié.<br>Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br><br>

				On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes). </p>
			</body>
		</html>

Décryptons ensemble les données saisies :

h1 Titre Principal.

h2 Sous Titre.

p la balise P permet de déclarer un paragraphe pour y introduire du texte.

br passage à la ligne

strong permet de mettre en gras une partie d'un texte.

strike permet de barrer une partie d'un texte (utile pour les soldes sur les sites ecommerce lorsque les prix sont en promotion).

cite permet d'introduire une citation (italique).

Pour les titres, nous pouvons nous servir des balises suivantes : h1, h2, h2, h4, h5, h6 (du plus grand au plus petit).

Pour observer votre page, vous pouvez cliquer sur le fichier Html puis vous rendre dans Exécution > Lancer dans FireFox ou effectuer un clic droit sur votre fichier, ouvrir avec > firefox.

Dans le navigateur, cela devrait vous donner le résultat suivant :

Le Résultat
explications Html / Css

Pour le moment cette police d'écriture est classique, créons un nouveau fichier : texte.css.

Ecrivons le fichier texte.css ensemble :

texte.css

	
		body{
		font-family: verdana;
			}

Dévryptons ensemble le code css ci-dessus :

font-family est une propriété permettant de préciser la police d'écriture à utiliser.

Vous devriez voir le changement de police d'écriture à l'écran.

Comment importer une police d'écriture ?

Pour importer une nouvelle police d'écriture, il vous faut d'abord le fichier contenant la bonne police.

Pour cela, trois solutions :

fléche

1 - Créer vous même votre police sous Illustrator/Photoshop.

fléche

2 - Récupérer en locale une police déjà existante sur des sites comme : Google Font - DaFont - Fonts For Web

fléche

3 - Utiliser une police déjà existante en ligne comme : Google Font

Importer une police d'écriture distante

Nous allons créer deux nouveaux fichiers : texte2.html et texte2.css

Ces deux nouveaux fichiers seront placés dans notre dossier /HtmlCss/02-Structure/.

Ce qui donnera : /HtmlCss/02-Structure/texte2.html et /HtmlCss/02-Structure/texte2.css

Voici le contenu de texte2.html :

texte2.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Police css3</title>
				<link rel="stylesheet" href="texte2.css">
			<head>
			<body>
				<h1>Mon Titre</h1><!-- Titre principal -->
				<h2>Autre Titre</h2> <!-- SousTitre -->
				<p>Le Lorem Ipsum <strong>est simplement du faux texte</strong> employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, <cite>quand un peintre anonyme assembla ensemble des morceaux de texte</cite> pour réaliser un livre spécimen de polices de texte.<br>Il n'a pas fait que survivre cinq siècles, mais s'est aussi <strike>adapté à la bureautique</strike> informatique, sans que son contenu n'en soit modifié.<br>Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br><br>

				On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes). </p>
			</body>
		</html>

Pour intégrer une nouvelle police d'écriture distante (hébergée sur le web), il vous faut d'abord l'adresse url contenant la bonne police.

Editons notre nouveau fichier :

texte2.css :

texte2.css

		/* utilisation d'une police css3 à l'aide d'une url */
		@font-face {
		  font-family: 'Cabin';
		  font-style: normal;
		  font-weight: 400;
		  src: local('Cabin Regular'), local('Cabin-Regular'), url(https://fonts.gstatic.com/s/cabin/v8/yQOMOX5hR0-6LTD879t-PQ.woff2) format('woff2');
		  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
		}

		body{
			font-family: "Cabin";
		}
		h1{
		text-align: center; /* alignement du texte */
		color: #336699; /* couleur */
		letter-spacing: 3px; /* espacement entre les lettres */
		font-size: 50px; /* taille */
		}

Dévryptons ensemble le code css ci-dessus :

@font-face est une régle utilisée dans la dernière version du langage CSS (la version 3), c'est la raison pour laquelle vous entendrez souvent parler de police css3

La police Cabin utilisée dans l'exemple ci-dessus est hébergée par Google, l'avantage c'est que c'est plus simple à écrire, l'inconvénient c'est que cela peut être plus long à charger (dans la mesure de quelques centièmes de seconde) puisqu'on se connecte à un autre site.

Le Résultat
explications Html / Css

Pour observer votre page Html, vous pouvez cliquer sur Exécution > Lancer dans FireFox ou effectuer un clic droit sur votre fichier, ouvrir avec > firefox.

Nous apercevons l'utilisation de la police Cabin de Google

Autre exemple avec l'import d'une police distante (hébergée sur le web)

texte2.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Police css3</title>
				<link rel="stylesheet" href="texte2.css">
				<link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css">
			<head>
			<body>
				<h1>Mon Titre</h1><!-- Titre principal -->
				<h2>Autre Titre</h2> <!-- SousTitre -->
				<p>Le Lorem Ipsum <strong>est simplement du faux texte</strong> employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, <cite>quand un peintre anonyme assembla ensemble des morceaux de texte</cite> pour réaliser un livre spécimen de polices de texte.<br>Il n'a pas fait que survivre cinq siècles, mais s'est aussi <strike>adapté à la bureautique</strike> informatique, sans que son contenu n'en soit modifié.<br>Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br><br>

				On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes). </p>
				
			</body>
		</html>

Dans ce contexte, nous n'avons pas besoin d'utiliser la régle @font-face car elle est déjà présente dans le fichier CSS que nous chargeons.

texte2.css

	html, body {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 0.9em;
	}

Le Résultat
explications Html / Css

Nous apercevons l'utilisation de la police Roboto de Google

Importer une police d'écriture localement

Nous allons créer deux nouveaux fichiers : texte3.html et texte3.css

Ces deux nouveaux fichiers seront placés dans notre dossier /HtmlCss/02-Structure/.

Ce qui donnera : /HtmlCss/02-Structure/texte3.html et /HtmlCss/02-Structure/texte3.css

Voici le contenu de texte3.html :

texte3.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Police css3</title>
				<link rel="stylesheet" href="texte3.css">
			<head>
			<body>
				<h1>Mon Titre</h1><!-- Titre principal -->
				<h2>Autre Titre</h2> <!-- SousTitre -->
				<p>Le Lorem Ipsum <strong>est simplement du faux texte</strong> employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, <cite>quand un peintre anonyme assembla ensemble des morceaux de texte</cite> pour réaliser un livre spécimen de polices de texte.<br>Il n'a pas fait que survivre cinq siècles, mais s'est aussi <strike>adapté à la bureautique</strike> informatique, sans que son contenu n'en soit modifié.<br>Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br><br>

				On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes). </p>
			</body>
		</html>

Décryptons ensemble les données saisies :

h1 Titre Principal.

h2 Sous Titre.

p la balise P permet de déclarer un paragraphe pour y introduire du texte.

br passage à la ligne

strong permet de mettre en gras une partie d'un texte.

strike permet de barrer une partie d'un texte (utile pour les soldes sur les sites ecommerce lorsque les prix sont en promotion).

cite permet d'introduire une citation (italique).

Le Résultat
explications Html / Css

Pour le moment cette police d'écriture est classique, créons un nouveau fichier : texte3.css.

Ecrivons le fichier texte3.css ensemble :

texte3.css

	
		@font-face { 
			font-family: 'folksbold';
			src: url('police/Folks-Bold-webfont.eot');
			src: url('police/Folks-Bold-webfont.eot?#iefix') format('embedded-opentype'),
				 url('police/Folks-Bold-webfont.woff') format('woff'),
				 url('police/Folks-Bold-webfont.ttf') format('truetype'),
				 url('police/Folks-Bold-webfont.svg#folksbold') format('svg');
			font-weight: normal;
			font-style: normal;
		}
		body{
		font-family: 'folksbold';
			}

Dévryptons ensemble le code css ci-dessus :

@font-face est une régle utilisée dans la dernière version du langage CSS (la version 3), c'est la raison pour laquelle vous entendrez souvent parlé de police css3

font-family est une propriété permettant de préciser la police d'écriture à utiliser.

text-align est une propriété permettant d'aligner du texte.

color est une propriété permettant de colorer du texte.

letter-spacing est une propriété permettant d'espacer les lettres dans un mot ou une phrase.

font-size est une propriété permettant de modifier la taille du texte.

La police folksbold fonctionne avec des fichiers locaux (dans votre ordinateur), vous pourrez les télécharger à l'adresse suivante : Télécharger la police folds bold

Informations
Pour l'exemple, il est nécessaire de télécharger les polices et les placer dans un dossier nommé "police".

Avec le fichier CSS, voici le résultat dans le navigateur :

Le Résultat
explications Html / Css

Allez au chapitre suivant : 5. Les Selecteurs