Utilisation des Webfonts, exemple concret

10/09/2012 19:17

Suite à une question posée par Alice sur mon précédent post sur les webfonts un petit exemple pratique où nous allons utiliser 3 types de webfonts différents :une pour un titre, une pour un résumé, une pour l'article. Nous allons pour cela créer trois styles css et lier trois webfonts à notre HTML.

Commençons :

<!DOCTYPE html>
<HTML>
    <HEAD>
	<!-- on associe à notre document le 3 webfonts qui seront utilisées -->
	<link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Dosis:600' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Alegreya+SC' rel='stylesheet' type='text/css'>
	<!-- on crée nos styles pour l'affichage du titre, résumé, articles -->
	 <STYLE>
	  .titre{font-family:Chango;font-size:48px;color:#000;text-align:center;}
	  .resume{font-family:"Dosis:600";font-size:30px;color:#ccc;font-style:italic;text-align:left;}
	  .article{font-family:Alegreya SC;font-size:14px;color:#696969;text-align:justify;}
	 </STYLE>
	</HEAD>

Ensuite il nous faut afficher notre contenu en utilisant les styles CSS créé dans la section <HEAD> de notre HTML :

    <BODY>
	<H1 class="titre">Ceci est mon titre avec la Webfont CHANGO ! L'action en Bourse de Facebook a perdu près de la moitié de sa valeur</H1>
	
	<P class="resume">Résumé de mon article ou chapeau en terminologie rédactionnelle. Ce résumé a été écrit avec la webfonts Dosis. Ci-dessous l'article...</P>
	
	<P class="article">
	<!-- un lien dans le texte -->
	<a href="http://www.lemonde.fr/technologies/article/2012/08/16/l-action-en-bourse-de-facebook-flirte-avec-son-plus-bas-niveau_1746953_651865.html" target="_blank">L'action de Facebook n'en finit pas de chuter</a>,
	 la fin de la première période de "lock-up" (blocage) de titres, jeudi 16 août, n'a pas arrangé les affaires du groupe. Après avoir plongé de 5,65 % en clôture à New York, mercredi, le titre est passé sous la barre fatidique des 20 dollars dans la matinée de jeudi, avant de terminer à 19,87 dollars.</P>

<P class="article">L'action flirte actuellement avec les 19 dollars. Si elle atteint ce seuil, elle aura perdu la moitié de sa valeur depuis son introduction en Bourse, le 18 mai, à une valeur de 38 dollars. Soit une perte de 40 milliards de dollars (32,4 milliards d'euros) de capitalisation.</P>

<P class="titre" style="font-size:14px;">752 MILLIONS D'ACTIONS EN CIRCULATION</P>

<P class="article">La fin de la première période de blocage des titres signifie qu'un certain nombre d'actionnaires historiques de Facebook pourront vendre leurs actions. Ils s'étaient jusqu'ici engagés à les conserver pour éviter un afflux massif sur le marché, susceptible de faire chuter le cours.</P>

<P class="article">Parmi eux, la banque d'affaires Goldman Sachs, le fonds de capital-risque Accel Partners, des membres du conseil de surveillance, comme James Breyer, Peter Thiel et Reid Hoffman, ou encore Microsoft.</P>

<P class="article">Jusqu'ici, 484 millions de titres étaient en circulation. Il y en aura désormais 752 millions. Il est encore impossible de savoir si ces actionnaires ont décidé de vendre leurs actions, mais la chute du prix de l'action lors de la séance de jeudi pourrait être une façon de l'anticiper. Article écrit en Alegreya. </P>

  </BODY>

On termine par fermer notre document HTML.

    </HTML>

Et maintenant le rendu final...

Ceci est mon titre avec la Webfont CHANGO ! L'action en Bourse de Facebook a perdu près de la moitié de sa valeur

Résumé de mon article ou chapeau en terminologie rédactionnelle. Ce résumé a été écrit avec la webfonts Dosis. Ci-dessous l'article...

L'action de Facebook n'en finit pas de chuter, la fin de la première période de "lock-up" (blocage) de titres, jeudi 16 août, n'a pas arrangé les affaires du groupe. Après avoir plongé de 5,65 % en clôture à New York, mercredi, le titre est passé sous la barre fatidique des 20 dollars dans la matinée de jeudi, avant de terminer à 19,87 dollars.

L'action flirte actuellement avec les 19 dollars. Si elle atteint ce seuil, elle aura perdu la moitié de sa valeur depuis son introduction en Bourse, le 18 mai, à une valeur de 38 dollars. Soit une perte de 40 milliards de dollars (32,4 milliards d'euros) de capitalisation.

752 MILLIONS D'ACTIONS EN CIRCULATION

La fin de la première période de blocage des titres signifie qu'un certain nombre d'actionnaires historiques de Facebook pourront vendre leurs actions. Ils s'étaient jusqu'ici engagés à les conserver pour éviter un afflux massif sur le marché, susceptible de faire chuter le cours.

Parmi eux, la banque d'affaires Goldman Sachs, le fonds de capital-risque Accel Partners, des membres du conseil de surveillance, comme James Breyer, Peter Thiel et Reid Hoffman, ou encore Microsoft.

Jusqu'ici, 484 millions de titres étaient en circulation. Il y en aura désormais 752 millions. Il est encore impossible de savoir si ces actionnaires ont décidé de vendre leurs actions, mais la chute du prix de l'action lors de la séance de jeudi pourrait être une façon de l'anticiper. Article écrit en Alegreya.