Embedded fonts (polices embarquées)

[Globe]

Bonjour à tous, dans ma quête pour la maîtrise du CSS je suis tombé comme beaucoup de designers sur le sujet des Embedded fonts (polices embarquées en Français si j'ai bien compris). Le problème que je rencontre c'est surtout le manque d'informations. Après quelques recherches sur internet je suis tombé sur un paquet d'articles traitant du sujet mais aucun qui ne soit réellement récent et précis.

C'est dans cette situation que je m'en remet à vous, d'après ce que j'ai compris le système ne fonctionne qu'avec Internet Explorer mais j'aimerais une confirmation.

Après j'ai vu une API google qui donnait accès à un nombre très limité de polices, alors je me demandais si vous connaissiez un moyen pas trop compliqué d'utiliser des polices d'écriture personnalisée dans un design en accord avec du CSS =)

[Sephi-Chan]

Pour utiliser des polices exotiques hébergées sur le serveur, tu peux utiliser :

• FLIR (Facelift Image Replacement), qui va substituer les textes par des images générées par PHP. Ça implique d'avoir une distribution PHP avec GD. Je n'aime pas trop cette solution, mais elle a le mérite d'exister.
  
• sIFR, qui va substituer le texte par du Flash. Le texte peut même être sélectionné ! Si tu veux voir ce que ça donne Tarschool (le jeu de Anthor) utilise cette solution.
  
• Cufón, qui substitue le texte avec du SVG (ou VML, pour IE).
  

Ma préférence va à Cufon. sIFR est très bien aussi mais je n'aime pas Flash, d'autant que les navigateurs embarquent de plus en plus d'extensions pour bloquer Flash. Et je n'aime pas du tout FLIR.

Tu trouveras de nombreuses comparaisons des 3 sur le Web.


Sephi-Chan

[Globe]

Merci beaucoup pour ta réponse, j'hésites entre sIFR et Cufon mais je pencherais probablement sIFR pour pouvoir utiliser les hover et la selection du texte. Merci encore.

[Sh4rk]

Pourquoi ne pas utiliser les fonctionnalité de CSS3?

[Plume]

Peut-être parce que c'est moins cross-browser et donc plus prise de tête (pour l'instant) que les solutions existantes ?

[Sh4rk]

Il n'y a aucune prise de tête ça ne prends même pas 5 minutes à mettre en place et ne demande rien à part modifier dans le css et importer la police

[Sephi-Chan]

Et bien, tu peux utiliser plusieurs solutions complémentaires, en utilisant Javascript et/ou les commentaires conditionnels pour fournir aux navigateurs qui le supportent la version font-face, et pour les autres

Coup de bol, il existe une fabuleuse librairie, Modernizr, qui prend en charge ce genre de détection.

L'exemple, issu de la documentation, pour le support de @font-face :

@font-face {

   font-family: MyWebLicensedFont;

   src: url(/fonts/my_web_licensed_font.eot);

   src: local('My Web Font'), 

          url(/fonts/my_web_licensed_font.ttf) format("truetype");

}



.fontface #heading h1 {

   font: 16px/24px MyWebLicensedFont, Helvetica, sans-serif;

}

.no-fontface #heading h1 {/*

   Specify a background image as a fallback or prepare rules for sIFR/Cufon.

*/}

// The function you pass Modernizr._fontfaceready() that will execute after

//   the fontfaceCheckDelay has elapsed.

// The function will be passed the boolean value of Modernizr.fontface

Modernizr._fontfaceready(function(bool){

  

  // if @font-face isn't supported, you may want to employ Cufón

  if (!bool) getScript('cufon.withfont.min.js',function(){

    Cufon.now();

  });

});

Sephi-Chan

[Thib4s]

Cufon gère la sélection de texte et les hover ^^
Pour moi c'est la meilleur des solutions disponible actuellement.
Légère, facile à mettre en place et Cross-Bross.
Si tu as des soucis pour mettre en place la sélection du texte je peux t'aider ;D

[Globe]

Ah je ne savais pas sur l'un des sites ou je suis passé il m'avait semblé voir que non, merci pour vos réponses, bah je vais tester un peu à gauche et à droite alors voir ce que ça donne

[Sephi-Chan]

D'après la page Known bugs and issues, la sélection de texte n'est pas fonctionnelle puisqu'elle ne fonctionne pas sur Opera.
J'arrive à sélectionner le texte mais le copier/coller ne donne rien (ça écrase le contenu actuel du presse-papier).


Sephi-Chan