Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

5 juillet 2008 6 05 /07 /juillet /2008 16:09

Il est toujours intéressant de modifier l’apparence des ses textes pour les adapter au design de son blog. Le choix de la police est important, la couleur, la forme, l’espacement et bien d’autres…

Attention cependant à la règle essentielle : votre visiteur ne peut voir sur votre blog que les polices qui sont déjà installées sur son disque dur. Si vous comptez afficher la toute dernière police à la mode téléchargée sur un site dédié, c’est raté. Il y a peu de chance pour que l’internaute ait eu le même coup de foudre et qu’il en dispose. Du coup, le navigateur affichera une police par défaut (Times sur Mac et Times New Roman sur PC) qui peut nuire à votre mise en page. Le plus simple et le moins risqué est d’utiliser des polices de caractères communes.

A savoir : Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Symbol, Times New Roman, Trebuchet MS, Verdana, Webdings

 

Nous allons voir plusieurs points qui concernent la mise en forme de la police

- font-family        

C’est la propriété pour choisir la police

- font-size            

C’est la propriété pour le corps (taille de la police)

- font-weight      

C’est la propriété pour la graisse (épaisseur) de la police

- font-style         

C’est la propriété pour l'italique, le soulignement et autres

- font-variant       

C’est la propriété pour le texte en petites majuscules

- letter-spacing

C’est la propriété pour définir l'espacement entre les caractères

- word-spacing

C’est la propriété pour définir l'espacement entre les mots

 

 

Utiliser la propriété font-family permet d’indiquer la police de caractère dans le CSS

 

Exemple : Je veux que le texte des mes modules s’affichent en Verdana. Si vraiment le navigateur ne la possède pas, je préfèrerai en Arial, ou bien en Times et au pire en Helvetica… Alors on va lui indiquer les trois… ! Le navigateur affichera de préférence la première police indiquée.

 

box. {font-family:Verdana, Arial, "Times New Roman", Helvetica;}

 

Remarque : Times New Roman est entre guillemets car son nom se compose de plusieurs mots.

 

 

 

Utiliser la propriété font-size permet de modifier la taille de la police :

 

Par exemple : je veux que la police de mes modules fasse une taille de 7.5 pixels :

box. {font-size:7.5px;}


 

 

Utiliser la propriété font-weight permet de modifier la graisse, l’épaisseur, de la police : gras, très gras…

 

Le texte est en gras léger :

{font-weight:lighter;}

 

Le texte est en gras :

{font-weight:bold;}

 

Le texte s'affiche en très gras :

{font-weight:bolder;}

 

Pour afficher le texte avec une épaisseur de son choix, il suffit alors de donner une valeur numérique à la propriété font-weight

Le texte s'affiche avec une épaisseur de 500 :

{font-weight:500;}

 

 

 

Modifier la propriété text-decoration permet de donner du style au texte :

 

Le texte est simple, sans ajout de style :

{text-decoration:none;}

 

Le texte est souligné :

{text-decoration:underline;}

 

Le texte possède une ligne au dessus :

{text-decoration: overline;}

 

Le texte est barré :

{text-decoration:line-through;}

 

Le texte clignote : (Attention, Internet Explorer ne prend pas en compte cette propriété) 

{text-decoration:blink;}

 

Le texte est en italique :

{font-style:italic;}

 

Le texte est incliné vers la gauche :

{font-style:oblique;}

 

 

 

La propriété font-variant permet d’afficher une variation : des petites majuscules avec la valeur small-caps

 


{font-variant: small-caps;}



 

Pour modifier l’espacement entre les lettres du texte, il suffit d’utiliser la propriété letter-spacing :

 


Modifier cette propriété permet de modifier l'espacement  entre les lettres. On utilise une valeur numérique ou une valeur en pourcentage. Celle-ci peut être négative.

 

Espacement large entre les lettres

{letter-spacing : 30px;}

 

Espacement rétréci entre les lettres

{letter-spacing : -2px ;}

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

Catherine 24/10/2008 11:56

En fait je tape directement mes textes qui sont très courts dans l'administration d'OB.
Chaque fois je sélectionne le texte puis ajoute la police et la couleur à l'aide du menu.
J'ai donc changé mon CSS pour que ça soit fait automatiquement dés la saisie (js'uis une grande flemmarde ;-D). Mais ça ne s'est jamais appliqué à mes nouveaux articles.
Merci de ton aide et de ta disponibilité.

Christelle Vinsonneau 24/10/2008 12:59


Je t'invite à consulter mon dernier article publié tout fraîchement pour répondre ta question.
http://photo.graph.over-blog.com/article-24050992.html


Catherine 24/10/2008 09:36

Je veux adopter comme police par défaut pour mes articles Verdana je l'ai donc ajoutée dans le CSS (global, accueil, articles) selon tes instructions, j'ai vidé le cache à plusieurs reprises. Rien n'y fait.
Je voudrais également définir la couleur bleue comme couleur de caractères par défaut.
Bien sûr je peux continuer à le faire à chaque article mais c'est fastidieux et puis il faut bien essayer de progresser dans la connaissance du CSS.
Un petit coup de main m'aiderait bien.
Merci d'avance.

Christelle Vinsonneau 24/10/2008 11:22



Je comprends.
Alors plusieurs points vont t'aider à y voir plus clair :
- les anciens articles ne peuvent pas être modifiés si dans leur source html tu as indiqué une police et une couleur.
- si tu écris tes textes sur un logiciel de traitement de texte avant de le coller sur ton interface pour le publier, il faut t'assurer de le "nettoyer" avant...
              * en le collant en "texte brut" 
              * en le collant sur le "bloc note" (windows) en le copiant de nouveau et en le collant dans ton interface.

Ainsi ton texte aura tous les paramètres par défaut que tu as indiqués dans ton CSS (police, taille, couleur...).

Et si en procédant ainsi ton texte n'est toujours pas en verdana et en bleu, c'est qu'il reste encore des petites erreurs ou des petits oublis dans ton css...

N'hésite pas à me dire si ces informations ont résolu ton problème ou à me recontacter si tu as d'autres questions.



Chanel 23/07/2008 16:48

Bonjour chère "miss".....
C'est au détour de ems surfs répétés sur le net que je suis topmbée sur votre blog....
En fait ce qui m'interpelle c'est votre NOM.....
Mon grand père(donc à fortiori ma mère sa fille) se nomment:Vinsonneau..
Serions de la même famille? arfff....
Mon grand père originaire(était car hélas DCD) originaire des charentes maritimes...
Merci à vous de bien vouloir me répondre si vous le souhaitez....
Gros bibis...Chris*