Intégrer un gabarit HTML - Etape 3 - Typographie
le 21/05/2010 dans CSS, Intégration
Maintenant que la structure générale est posée, vient le temps d'appliquer les styles graphiques en commençant par les polices...
Je reprends le même sens d'intégration, commençant par les éléments généraux et terminant par les éléments spécifiques à la page d'accueil (gabarit principal). Pour chaque élément je vérifie dans le fichier du gabarit la taille, le corps et le type de police. J'utilise directement les pixels, je ne cherche pas à faire une quelconque relation entre les tailles relative et autres complexités pour rendre accessible ma page avec des tailles de polices variables, puisque la plupart des navigateurs modernes utilisent le zoom pour agrandir une page.
Par contre, en lieu et place d'image avec une police "non générique", j'utilise les capacités @font-face, supportées par, tenez-vous bien, IE6 !!!
Pour la génération des règles, je ne m'embête pas : http://www.fontsquirrel.com/fontface/generator
Le seul problème que j'ai actuellement vient de la différence de tailles de polices entre Windows de MacOSX... D'où l'intérêt d'avoir des boites flexibles, et là j'ai quelques améliorations à apporter... Ok, c'est fait...
Voilà les screenshots qui montrent les différences mais après étape 4 d'insertion des couleurs et visuels (sur MAC et PC) :







Je reprends le même sens d'intégration, commençant par les éléments généraux et terminant par les éléments spécifiques à la page d'accueil (gabarit principal). Pour chaque élément je vérifie dans le fichier du gabarit la taille, le corps et le type de police. J'utilise directement les pixels, je ne cherche pas à faire une quelconque relation entre les tailles relative et autres complexités pour rendre accessible ma page avec des tailles de polices variables, puisque la plupart des navigateurs modernes utilisent le zoom pour agrandir une page.
Par contre, en lieu et place d'image avec une police "non générique", j'utilise les capacités @font-face, supportées par, tenez-vous bien, IE6 !!!
Pour la génération des règles, je ne m'embête pas : http://www.fontsquirrel.com/fontface/generator
Le seul problème que j'ai actuellement vient de la différence de tailles de polices entre Windows de MacOSX... D'où l'intérêt d'avoir des boites flexibles, et là j'ai quelques améliorations à apporter... Ok, c'est fait...
Voilà les screenshots qui montrent les différences mais après étape 4 d'insertion des couleurs et visuels (sur MAC et PC) :






