WebPetit

Je n’ai pas testé la Beta d’Internet Explorer 9 mais d’après 456 Berea Street le nouveau navigateur Web de Microsoft, comme ses prédécesseurs, ne gère pas l’agrandissement des textes lorsque en CSS, la taille de police (font-size) est donnée en pixels. Il faudra donc donner la taille de polices avec les autres unités : pourcentage, em et point. Pas de CSS au petits oignons avec la taille de pixels si on veut vraiment mettre le paquet niveau accessibilité.

Voilà comme à son habitude Internet Explorer fait la sourde oreille et ne veut pas se mettre au pas des standards du W3C comme les autres navigateurs. Et ce quasi-systématiquement au détriment de l’accessibilité.

Source : 456 Berea Street, Britoweb.

---

Une police spéciale développeur ? Oui ça existe et c’est une création de Mark Simonson. C’est un designer et sur son site on peut acheter des fontes mais celle-ci, en l’occurrence la police Anonymous Pro est sous licence SIL Open Font License et elle est gratuitement téléchargeable sur son site.

Pour ma part, c’est toujours un peu déroutant de faire face à une nouvelle police (non non il ne s’agit pas des forces de l’ordre ). J’ai l’habitude de la bonne vieille monospace mais à première vue Anonymous Pro m’est agréable. Après les goûts et les couleurs ça ne se discute pas. Phrase bateau mais que voulez-vous ? Je n’ai pas trouvé mieux.

Outre le côté jolitude « joliesse » il est à noter que Mark Simonson a fait en sorte que pour les caractères qui se ressemblent dans certaines polices ce ne soit pas le cas dans la fonte « Anonymous Pro » comme les 0, O,o,l ou encore 1.

J’ai appliqué cette police sur le module syntaxhighlighter du site. Donc si vous l’avez installé, elle s’affichera sur les bouts de codes publiés dans les articles du site.

Je vous laisse admirer une ch’tite capture d’écran du fichier index.php du thème WordPresss du site. Tout ça sous Gedit avec le thème que j’utilise : Oblivion.

---

Vous avez trouvé une police de la mort-qui-tue-deux-fois sur un site de ouf-malade et vous voulez l’installer sur Ubuntu pour l’utiliser avec votre thème, vos documents OpenOffice et autres applications ?
Ne vous inquiétez c’est tout à fait possible !

Deux solutions se présentent à vous. L’installer rien que pour votre session car vous êtes un sale égoïste (ou bien il n’y a qu’une session sur votre système) ou l’installer pour tout le monde vous êtes généreux.

La solution de l’égoïste

On copie la police dans le dossier /home/utilisateur/.fonts/. Si .fonts n’existe pas on le crée.

cp mapolice2lamortquitue.ttf /home/utilisateur/.fonts/mapolice2lamortquitue.ttf

La solution du généreux

On copie la police dans le dossier /usr/share/fonts/. Pour ce faire, il faut avoir les droits root. On peut utiliser le bon vieux sudo.

sudo cp mapolice2lamortquitue.ttf /usr/share/fonts/mapolice2lamortquitue.ttf

Attention il faudra relancer l’application que l’on veut utiliser pour qu’elle puisse recharger la liste des polices de caractères à dispositions.

Voici quelques sites où vous pouvez trouver des polices sous différentes licences :

• Font Squirrel
• dafont.com
• 1001 fonts

Voilà c’est tout pour ce tuto, et n’oubliez surtout pas : BI-DOU-ILLEZ !

---

La propriété CSS @font-face permet d’importer de nouvelles polices.

@font-face {
font-family: 'nom_police';
src: url('lien_de_la_police/nom_police.eot');
src: local('☺'),url('lien_de_la_police/nom_police.ttf') format('truetype');
}

Elle permet d’importer de nouvelles polices et de les appeler facilement grâce à la propriété font-family.
Bien sûr il faut convertir la police en .ttf en .eot .(Cf : le tutoriel convertir les ttf en eot dans les tutoriels du site. )

Note : .eot est un format qui permet à Internet Explorer d’afficher les polices car il ne reconnait pas les formats ttf et otf.

Exemple :

CSS

#font {
@font-face {
  font-family: 'komica';
  src: url('/wp-content/uploads/fonts/komica.eot');
  src: local('☺'),url('/wp-content/uploads/fonts/komica.ttf') format('truetype');
}
font-family:'komica';
}

HTML

<p id="font">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

---

La propriété CSS font-family permet de définir un groupe de police permettant un bon affichage de la page HTML par le navigateur.

body{
font-family:Arial, 'Comic Sans Ms', Helvetica, sans-serif;
}

Elle permet d’afficher une page HTML en imposant une liste de police au navigateur, ainsi dans notre exemple si l’ordinateur du visiteur n’a pas Arial , ce sera Helvetica qui s’appliquera et ainsi de suite.

Nous avons comme valeurs  de fontes : Times New Roman, Times, serif… Ou des types de polices génériques : serif, sans-serif, cursive, fantasy… à appliquer une à une.

Si la police est composée de plusieurs mots, on la mettra alors entre guillemets simples ou doubles.

Exemple :

<p style="font-family: 'Courier New',courier,monospace;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

---