Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Utilisation des Webfonts, exemple concret

- Auteur : Brunofaisart

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.

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Tata Tounette62 10/09/2012 19:17

Bonjour Bruno,
site très bien fait pour qui s'y connait en informatique. Je dois être nulle mais malgré vos explications, je n'y comprends rien ! J'avais un blog monapn62.over-blog.fr, j'ai crée un blog test pour essayer de me familiariser avec la nouvelle version mais je n'arrive pas à trouver les lignes qu'il faut modifier pour créer un texte correct avec les couleurs et polices que je souhaiterais ! Toutes tentatives de modifications est un vrai casse-tête, je suis totalement découragée quand à l'éventualité de continuer ou non sur overblog ! Mais si je vous ai bien lu, le langage html5 arrivera tôt ou tard sur les autres hébergeurs, alors reculer pour mieux sauter n'est pas la meilleure solution !
Bravo encore pour votre site mais je crois être "condamnée" à utiliser la nouvelle version d'ob dans sa version basique qui ne me plait pas du tout !
Bonne soirée, à bientôt

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...