Éducation, société et technologie
Squelette Ahuntsic

Configuration des polices... et des styles

@font-face et services « Web Fonts » optimisés pour Ahuntsic
dimanche 2 octobre 2011 par André Vincent

Depuis la version 2.0, le squelette Ahuntsic pour SPIP permet de choisir et configurer les polices de caractères de votre site parmi plus d’un millier de polices disponibles auprès des divers services de « Web Fonts » tant commerciaux, gratuits que libre de droit.

De plus, le mécanisme est compatible avec la vaste majorité des navigateurs et OS des PC de bureau, portables ou mobiles.

En BONUS, ce nouveau mécanisme permet de personnaliser TOUTE règle de style CSS applicable au site.

  Sommaire  

 Rapido

  1. Créer un mot-clé très exactement libellé : polices
  2. Dans le Descriptif rapide du mot-clé, copier et coller le lien de téléchargement fourni par le service de polices Web de votre choix.
  3. Dans le Texte explicatif du mot-clé, inscrivez les règles de styles permettant d’appliquer les polices choisies.

Exemple en image

Dans cet exemple, après avoir choisi nos polices sur le site de Google Web Fonts, nous obtenons un choix pour notre site.

Nous allons maintenant :

  1. copier le code fourni par Google et coller ce code dans le DESCRIPTIF de notre mot-clé,
  2. inscrire dans le TEXTE EXPLICATIF du mot-clé, les règles CSS appropriés pour appliquer au squelette Ahuntsic les polices désirées.

Le code

Descriptif rapide

  1. <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Yanone+Kaffeesatz:400,300,200,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />

Texte explicatif

  1. body {
  2.     font-family: 'PT Sans', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
  3.     font-weight: 400;
  4. }
  5. #entete a.nom-site,
  6. #entete a.nom-site:link,
  7. #entete a.nom-site:visited,
  8. .menu, h1, body.sommaire h3 {
  9.     font-family: 'Yanone Kaffeesatz', 'Tahoma', sans-serif;
  10.     font-weight: normal;
  11.     font-size : 3.5em;
  12. }
  13. .menu {font-size : 1.2em;}
  14. .menu ul li li a, .menu ul li a, .menu ul li b, .menu ul li li b {font-weight: 300;}
  15. h1, h2, h3, h4, h5 {line-height: 1}
  16. h1 {font-size : 2.4em; margin-bottom: .2em;}
  17. body.sommaire h3 {font-size : 1.8em;}
  18. /* À transférer éventuellement dans base.css */
  19. #menu-mots {font-size : 1em;}
  20. body {font-size: 91%;} /* pour 960px de large */
  21. .menu ul li a, .menu ul li b, .edito h3, .signatures td {
  22.     border-radius: 4px 0px 4px 0;
  23.     background-image: none;
  24. }

 Techno

Descriptif rapide

Ici, nous indiquons le lien vers la feuille de styles CSS de déclaration des polices que nous désirons utiliser. Deux possibilités sont offertes :

  • utiliser un service externe de téléchargement des polices,
  • héberger vous-mêmes les polices à télécharger.

Le lien vers la feuille de style de téléchargement des polices que l’on désire utiliser, copié du service de son choix et collé dans le contenu de Descriptif rapide du mot-clé ’polices’ est inséré au tout début de la partie <head> de toutes nos pages, immédiatement après l’élément <title>.

Ainsi, on réduit un certain nombre d’effets indésirables sur nombre de navigateurs dont Internet Explorer.

Dans le jeu de squelettes AHUNTSIC, ce code se trouve au tout début du fichier /inc/inc-meta.html dans la boucle <BOUCLE_lien_webfonts... >

Petit détail : dans le cas de certains services externes, dont Google, il est recommandé d’ajouter au lien copié et collé, à la fermeture de la balise <link... >, une espace et une barre oblique afin d’assurer une validation adéquate du code en XHTML. En HTML 4 ou HTML5, cette correction du code copiée est inutile.

Texte explicatif

Ici, il faut maintenant spécifier par des déclarations CSS à quels éléments de nos page nous désirons appliquer les polices choisies.

Ce code sera inséré à la toute fin de la partie <head>, dans le fichier styles.html. Ainsi, on s’assure que nos déclarations CSS surchargerons toutes les autres déclarations CSS du squelette AHUNTIC ou des plugins activés.

 Perso CSS

En BONUS, dans le TEXTE EXPLICATIF du mot-clé polices, vous pouvez dorénavant redéfinir, ajouter ou personnaliser TOUTE règle de style désirée, en plus des polices. Ces règles s’appliqueront après toutes les autres règles du squelette ou des plugins activés. Ce nouveau mécanisme peut remplacer ou surcharger le fichier /squelettes/styles/perso.css qui devient ainsi obsolète (mais encore supporté, s’il est présent).


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 3900 / 1767118

Suivre la vie du site fr  Suivre la vie du site Ressources  Suivre la vie du site Squelette AHUNTSIC   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.0.8 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 5