Font-size : un miracle s’il vous-plait (hiiii)

Bonsoir, Guten Abend,

Je suis bien embêté avec deux polices. La première est Yanone Kaffeesatz, un police trouvée sur Google Fonts (le lien, c’est la page de l’auteur), et la seconde est DejaVu Sans Condensed (que vous avez certainement déjà vu), que j’ai choisi comme police de substitution pour les navigateur n’interprétant pas @font-face (ou tout simplement pour les cas ou le serveur fournissant la police est HS ou que la police n’est plus disponible).

Mais leurs tailles apparentes diffèrent beaucoup, et pour obtenir un effet correct avec la police de substitution, il faudrait que je lui donne une taille de 80%… pour dire qu’il y a un important écart. Je pensais y remédier en utilisant font-size-adjust, mais comme l’indique le précédent lien, cette propriété n’est supportée que par FireFox.

Une idée de miracle ? Ou a défaut des incantations ? Tites prières ? Ou même des gris-gris ?

Ce qui aurait été l’idéal avec le CSS, ça aurait été de pouvoir donner des font-size, letter-spacing, word-spacing, etc, pour chacun des élément d’une déclaration font-family; mais bon, on ne va pas refaire le monde du CSS.

Si quelqu’un(e) a quand-même une idée de miracle, et que c’est pas trop secret…


Marchi, Gracias,
Modifié par hibou57 (11 Jan 2011 - 20:46)

Bonjour,

Pas de grigri a proposer, mais il me semble que si la police de substitution n'a pas un aspect approchant la police principale et que le support de font-size-adjust est très partiel il faudrait au mieux changer l'une ou l'autre police si les dégradations sont inacceptables dans ce projet.

Ou bien s'en contenter compte-tenu des cibles... et ne rien faire de plus et "tatonner" pour le fallback

A priori font-size-adjust ne règle pas tout dans l'absolu compte-tenu de son implémentation. J'ai souvenir d'un test de Florent V sur le sujet que j'ai la flemme de rechercher

Bonjour
Si tu arrives à afficher une police différente pas navigateur, ne peux tu pas aussi choisir la taille de police avec la même méthode ?

Tu peux essayer d'appliquer un classe au body par exemple et cibler comme ça ta police.

ou sinon tu as jquery

var font = jQuery('body').css("font-family").indexOf("Georgia");

La variable va te retourner la position de Georgia dans le stack de police et -1 si elle n'y est pas
Tu peux utiliser cette astuce pour tester ta police. A condition qu'elle soit en tête de liste.
Tu peux donc faire

if( jQuery('body').css("font-family").indexOf("DejaVu Sans Condensed") > -1 ){
    jQuery('body').css("font-size", "12px");
};

Attention la fonction indexOf est sensible au Majuscules et aux minuscules.

Je m'interroge sur le choix de Dejavu Sans condensed comme police de subtitution,

Il ne faudrait pas plutôt choisir une police que l'on peut retrouver partout cf ici http://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html

Igor a écrit :
A priori font-size-adjust ne règle pas tout dans l'absolu compte-tenu de son implémentation. J'ai souvenir d'un test de Florent V sur le sujet que j'ai la flemme de rechercher

Oui, font-size-adjust ne peut pas régler ce cas parfaitement, parce qu’elle ne s’occupe que la hauteur des majuscule par rapport à celle des minuscules, mais ça aurait permis de bricoler.

Finalement j’ai résolu en choisissant une autre substitution :

font-family: "Yanone Kaffeesatz", "Cordia New", "Kartika", sans-serif;

Cordia New et Kartika s’en approchent mieux, même si elles sont un peu trop petites. Mais c’est justement parce qu’elles sont plus petites que Yanone Kaffeesatz qu’elles peuvent convenir (plus petit, ça va, plus grand, ça ne va pas).

joska a écrit :
Bonjour
Si tu arrives à afficher une police différente pas navigateur, ne peux tu pas aussi choisir la taille de police avec la même méthode ?

Tu peux essayer d'appliquer un classe au body par exemple et cibler comme ça ta police.
[…]

Ce n’est pas une par navigateur, c’est le navigateur qui décide. Concernant la détermination de la police que le navigateur a choisi, ce n’est pas possible, parce que la propriété fontFamily, sera celle de la feuille CSS (elle inclura toute les police, sans distinction).

joska a écrit :
Attention la fonction indexOf est sensible au Majuscules et aux minuscules.

Vi, je sais
Modifié par hibou57 (14 Jan 2011 - 00:44)

Tu as juste un css dans ce genre ?

h1 { font-family: 'google-font', 'fontface', Georgia, Serif; }

Dans ce cas effectivement le code que j'ai donné ne va te servir.

Pour ta substitution il y a quelque chose que je ne comprend pas.

a écrit :

La première est Yanone Kaffeesatz, un police trouvée sur Google Fonts (le lien, c’est la page de l’auteur), et la seconde est DejaVu Sans Condensed (que vous avez certainement déjà vu), que j’ai choisi comme police de substitution pour les navigateur n’interprétant pas @font-face (ou tout simplement pour les cas ou le serveur fournissant la police est HS ou que la police n’est plus disponible).

Yanone = google font
DejaVu = police de substitution si le navigateur ne supporte pas font-face
Je ne vois pas à quoi DejaVu doit se substituer.

Apparement tu as choisis une autre police, c'est surement un meilleur solution.

Re-Bonsoir

joska a écrit :
Tu as juste un css dans ce genre ?

h1 { font-family: 'google-font', 'fontface', Georgia, Serif; }

Oops, font-face n’est pas un nom de police, c’est une propriété CSS :
Les descriptions des polices et @font-face (sur YoyoDesign)
Web fonts with @font-face (sur CSS3.info)

Google-font n’est pas non-plus un nom de police de caractères (explications un peu plus loin).

joska a écrit :
Pour ta substitution il y a quelque chose que je ne comprend pas.

Yanone = google font
DejaVu = police de substitution si le navigateur ne supporte pas font-face
Je ne vois pas à quoi DejaVu doit se substituer.

Apparement tu as choisis une autre police, c'est surement un meilleur solution.

En fait, Google Font, c’est un répertoire de police de caractères qui peuvent être utilisées comme sources pour font-face. Font-face, c’est une manière de charger des polices de caractère qui pourront ensuite être utilisées avec font-family (ne pas confondre font-face est font-family).

Internet Explorer connait font-face, mais ne prend en charge que certains formats de polices de caractères, et ce format n’est pas celui des polices fournies par Google Font (sas compter qu’il est possible qu’un navigateur soit configuré pour ne pas télécharger les polices sur le web). Peut-être que plus tard je résoudrais le problème en hébergeant moi-même les polices au format adéquate, mais pour l’instant, celle que je je veux utiliser, ne sont pas reconnu par Internet Explorer, qui reconnait néanmoins la propriété font-face (je ne sais plus où, sur quel fil exactement, mais on avait déjà discuté de cette question du format des polices pour font-face, dans le bar du forum).
Modifié par hibou57 (14 Jan 2011 - 04:20)

Relis mon poste. je connais font-face et google-font
Je voulais comprendre exactement ton problème car la question est trop confuse.
Modifié par joska (14 Jan 2011 - 14:16)