Cette dernière nous permet très simplement d’inclure une ou plusieurs polices hébergées sur les serveurs de Google via un simple fichier CSS.

Un petit exemple pour illustrer le tout, dans la balise head :

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />

Et plus loin dans le corps de la page :

<span style="font-family: 'Lobster', arial, serif; font-size: 16px;">Hello World !</span>

Ce qui donne le résultat suivant :

Tout de même bien pratique cette API ! Vous pouvez consulter la liste des polices disponibles sur cette page.

Sachez qu’il est aussi possible d’utiliser un script Javascript co-développé par Google et TypeKit : WebFont Loader.

Rien de bien compliqué ici non plus, si ce n’est que vous pouvez mieux contrôler le chargement des polices via WebFont Loader :

      WebFontConfig = {
        google: { families: [ 'Lobster', 'Nobile' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();

Vous pouvez ensuite définir vos styles comme ceci :

<style>
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Lobster', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 18px
      }
      .wf-active h1 {
        font-family: 'Nobile', serif;
        font-size: 18px
      }
</style>

L’avantage de WebFont Loader est qu’il supporte le chargement de polices via plusieurs fournisseurs. Ainsi vous pouvez charger des polices provenant des serveurs de Google mais aussi de TypeKit, Ascender, et même de n’importe quel fournisseur via un loader dit « custom » :

WebFontConfig = {
  custom: { families: ['OneFont', 'AnotherFont'],
    urls: [ 'http://www.yriase.fr/mystylesheet1.css',
      'http://www.weblike.me/stylesheet2.css' ] }
};

En effet un seul gros fichier avec toutes les classes dedans, c’est pas beau et c’est beaucoup plus difficile à maintenir que plusieurs fichiers, chacun contenant les classes et styles utilisées dans la vue.

Pour ajouter automatiquement une feuille de style correspondante à une action,  rien de plus simple, il suffit de placer le code suivant dans le(s) contrôlleur(s) souhaités :

  public function init()
  {
    $this->view->headLink()->appendStylesheet('/css/'.$this->getRequest()->getActionName().'.css');
  }

Ainsi, l’action index aura son fichier index.css et ainsi de suite !

De plus en cette période où le Web est « 2.0″, on aime bien mettre des arrondis partout.
Un problème se pose toutefois : comment éviter d’utiliser des images ? Sous Firefox/Gecko on possède la propriété -moz-border-radius, sous Webkit(Safari, Chrome etc…) -webkit-border-radius, sous KHTML(Konqueror) -khtml-border-radius, sous Opera une propriété sera disponible sous Presto 2.3 (actuellement 2.2), et sous IE : rien.

Malheureusement, la solution proposée ci dessous n’est pas compatible avec Opera, cependant, comme indiqué plus haut la nouvelle version de Presto, qui devrait arriver courant 2010, va arranger cela.

Le problème concerne donc IE, et Microsoft pour palier aux manques de son navigateurs a créé en 1998 les fichiers HTC. Mélange d’HTML et de balises HTA, les fichiers HTC peuvent contenir du code JScript ou VBScript. Ils disposent également de fonctionnalités comme la possibilité de permettre à IE d’afficher la couche alpha des images PNG (via AlphaImageLoader), ou d’appliquer un comportement :hover sur d’autres balises que <a>.

Le code suivant utilise justement un fichier HTC via la propriété behavior :

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
behavior:url('./border-radius.htc');

Vous pouvez télécharger le fichier HTC à cette adresse.
Sachez toutefois que ce code n’est pas conforme aux normes CSS3 établies par le W3C, néanmoins il permet de combler certains manques sur IE.