Utiliser Google Font API pour ajouter des polices à ses pages Web

Posté par seiyar81 le 2 août 2010 | Laisser un commentaire (1)

Parmis les nombreuses API disponibles dans ses Code Labs, Google a mis en place une API particulièrement intéressante : Google Font API !

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 :

Hello World

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' ] }
};
Catégorie: Développement Web, Javascript | Laisser un commentaire (1)

Zend Framework : Une feuille de style par action

Posté par seiyar81 le 19 juillet 2010 | Laisser un commentaire (1)

Je partage une petite astuce qui m’est venue en développant aujourd’hui. Quand on travaille sur des applications plutôt importantes, on peut être amené à vouloir segmenter le 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 !

Catégorie: Développement Web, PHP, Zend Framework | Laisser un commentaire (1)

<div> arrondies en CSS compatibles IE

Posté par seiyar81 le 18 janvier 2010 | Laisser un commentaire (1)

Un problème qui revient souvent pour les développeurs Web : écrire un code CSS compatible avec tous les navigateurs. Enfin quand on dit tous ça sous-entend bien évidemment Internet Explorer et sa gestion foireuse du CSS3…

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.

Catégorie: Développement Web | Laisser un commentaire (1)