18041 sujets

Questions générales et questions de débutants

@font face / liberation font

Bonjour,

je souhaiterais utiliser sur un site une font libre (comme les logiciels). je pensais utiliser @font-face mais j'ai l'impression que ça ne marche pas très bien :


@font-face {
font-family: 'Liberation Sans Regular', sans-serif ;
src: url('liberation-fonts/LiberationSans-Regular.ttf');
}

body { font-family: 'Liberation Sans Regular'; font-size: 12px; margin-left: 100px; }
h2 { font-family: 'Liberation Sans Regular'; font-size: 12px;}


Est-ce que vous utilisez cette font ? Le @font-face ?

Merci d'avance

LPG
LPG a écrit :

Est-ce que vous utilisez cette font ? Le @font-face ?

Vu qu'il n'est actuellement implémenté que par Safari, non, on l'évite… Smiley cligne
J'ai dernièrement fait quelques test avec sIFR, il est vrai que pour énormément de texte cela peut causer quelques problèmes de fluidité/rapidité mais cela dépent du site créé. Et pour quand même quelques zones de texte bien rempli, sIFR ne pose pas vraiment de soucis.
@LPG : @font-face n'est pas du tout standardisé, c'est plus ou moins pas implémenté dans les navigateurs. A éviter.

@startrox : sIFR crée surtout des vieux problèmes d'ergonomie, du genre la possibilité d'avoir 2 sélections distinctes simultanées, dans 2 blocs sIFR ou dans un bloc sIIFR et un html.
D'autre part, sauf erreur de ma part, on n'a pas de contrôle sur l'interlignage (ou alors la façon de faire ça m'intéresse beaucoup).
Sinon effectivement c'est sympa pour des titrages.
a écrit :
Sinon effectivement c'est sympa pour des titrages.



... sauf que CSS désactivée ça double tous les objets concernés, et sauf que ça ne s'agrandit pas au clavier.
Marvin Le Rouge a écrit :
@LPG : @font-face n'est pas du tout standardisé

@font-face est standardisé, même si absent de CSS 2.1.

Pour être exact:
- @font-face fait son apparition dans CSS 2;
- les implémentations (IE, Netscape) sont foireuses, et on décide de remettre à plus tard... en conséquence, @font-face disparait de CSS 2.1;
- @font-face revient dans CSS 3 avec le module Web Fonts (Working Draft de 2002).

Donc voilà. Smiley cligne
Bonjour,

Merci pour toutes ces réponses. En effet c'est un vrai casse-tête. Sur mac seul safari
le prends en compte (cf par ex cette page sous firefox ou safari: http://www.alistapart.com/d/cssatten/poen.html ce n'est vraiment pas la même chose (voir l'article : http://www.alistapart.com/articles/cssatten))...

la soluce pour les navigateurs éclairés est donc :

@font-face {
font-family: 'Liberation Sans Regular';
src: url('liberation-fonts/LiberationSans-Regular.ttf' format("truetype"));
}

body { font-family: 'Liberation Sans Regular', sans-serif ;font-size: 12px; margin-left: 100px; }

avec le sans-serif de remplacement pour les autres majoritaires...

Pour les solutions utilisant flash, c'est interessant mais ne résous pas vraiment le problème.

Merci !

LPG
Hum pourquoi :
a écrit :
A éviter.
?

Dans le pire des cas, la font ne sera pas affichée ... me trompe-je ? Smiley murf
LPG a écrit :
avec le sans-serif de remplacement pour les autres majoritaires...

Là c'est un peu idiot, car on prend le risque que la fonte soit remplacée par une fonte très différente, par exemple une Déjà Vu Sans ou une Verdana. Liberation Sans étant «calqué» sur les proportions d'Arial, autant indiquer:
font-family: 'Liberation Sans Regular', Arial, Helvetica, sans-serif;
UP

@font-face est à présent implémenté ou le sera très prochainement dans les navigateurs modernes les plus courants (notamment la version 3.5 de firefox et version 10 d'opéra).

Cette propriété est implémentée depuis longtemps dans IE mais il faut utiliser un logiciel (WEFT) qui n'a pas été mis à jour depuis bien longtemps, afin de convertir la police. Cela fonctionne plutôt bien.

Je pense donc que l'on peut envisager l'utilisation de cette propriété dans un futur proche. Ceux n'utilisant pas un navigateur la supportant auront une police de substitution.

Par contre, si le rendu est correct sur les grandes tailles, le résutat est plus qu'aléatoire pour des petites tailles (12 ou 13px par exemple). Cela dépend en fait du lissage des polices. S'il est activé, c'est correct, le cas échéant... Smiley confus
Sujet clos
Aller à