28172 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

J'ai deux questions : la première concerne les fonts en elles-mêmes et l'autre @font-face pour IE8.

Voilà les faits : je n'ai jamais intégré de font payante jusque là. Pour un nouveau projet mon client m'a fourni un pack de font format .otf (qu'il a eu en toute légalité) que je dois utiliser pour un site intranet visible impérativement sur IE8 et IE9 (et en bonus sur Chrome, Firefox et Opéra).

Question 1 : Il me faut les fonts format .eot, .ttf, woff et optionnellement svg. Ai-je le droit de les générer ? (en utilisant un logiciel tiers ->fontforge par exemple sachant que la font est blacklistée [ Smiley confus ] sur fontsquirel)

N'ayant pas l'habitude de font payante je ne me suis pas posée la question (n°1) tout de suite et j'ai "naturellement" générer les formats qu'il me fallait et j'ai commencé à intégrer avec la règle @font-face.

Ce qui m’amène à ma deuxième question :

Dans un premier temps : sous Chrome et Opéra (malgré un lissage absolument attroce) et Firefox : tout fonctionne.
Ensuite : après quelques manip' IE9 veut enfin de ma font.

Mais IE8 ... IE8, c'est une autre histoire... Smiley bawling Smiley fache
J'ai beau retourné le problème dans tout les sens, je passe forcément à coté de quelque chose mais impossible de trouver quoi (et puis avoir le nez coller la dedans depuis plusieurs heures n'arrange pas les choses... Smiley mur )

Voici mon code :

@font-face
{
font-family: AELight;

src: url('AltoProCon-ExtraLight.eot'); /* IE9 */
src: url('AltoProCon-ExtraLight.eot?#iefix') format('embedded-opentype');

src: local('☺'),
     url('AltoProCon-ExtraLight.otf') format('opentype'),
     url('AltoPro-EtraLight.ttf') format('truetype'),
     url('AltoPro-ExtraLight.woff') format('woff');
     
}

@font-face
{
font-family: ALight;

src: url('AltoPro-Light.eot'); /* IE9 */
src: url('AltoPro-Light.eot?#iefix') format('embedded-opentype');

src: local('☺'),
     url('AltoPro-Light.otf') format('opentype'),
     url('AltoPro-Light.ttf') format('truetype'),
     url('AltoPro-Light.woff') format('woff');
     
}
@font-face
{
font-family: ABold;

src: url('AltoPro-Bold.eot'); /* IE9 */
src: url('AltoPro-Bold.eot?#iefix') format('embedded-opentype');

src: local('☺'),
     url('AltoPro-Bold.otf') format('opentype'),
     url('AltoPro-Bold.ttf') format('truetype'),
     url('AltoPro-Bold.woff') format('woff');
     
}

div.container{
  font-family: ALight;
  font-size: 14px;
 }
 
div.step-title{
	font-family: AELight;
	font-size: 24px;
}
 
span.bold{
  font-family: ABold;
}


A savoir que IE me propose ces gentils messages (en passant par F12) :
CSS3111: @font-face a rencontré une erreur inconnue.
AltoPro-Light.eot
CSS3111: @font-face a rencontré une erreur inconnue.
AltoProCon-ExtraLight.eot
CSS3111: @font-face a rencontré une erreur inconnue.
AltoPro-Bold.eot

Si quelqu'un trouve quelque chose, merci de m'aider ... je suis à bout Smiley tired

Matsuchou
Concernant la 2eme question, je n'ai jamais rencontré ce genre de problèmes. A vue de nez, c'ets soit un problème de déclaration font face, et dans ce cas je suggèrerais de t'inspirer de la syntaxe de font-squirrel par exemple... soit un problème avec les fichiers eot, et la ben c'ets un problème de génération.

Pour ta première question, c'est très probablement interdit. S'il a eu les fichiers otf légalement, il a du avoir une licence avec expliquant ce qu'il a le droit de faire avec ou non. Mais si c'est des fonts de la famille alto, tu peux considérer que c'est interdit. Il y a plusieurs types de licences, mais celles qui permettent l'utilisation sur un site sont génération des licences particulières et sont livrés avec tous les fichiers nécessaires au bon format. Une licence par poste n'autorise pas ce genre de choses Smiley smile
1ere question :
Effectivement c'est bien ce que je pensais, on ne peut pas générer ça comme ça. Maintenant me reste à voir avec mon client s'il n'a pas eu autre chose que les otf. Ce qui confirmerais, si c'est le cas, qu'il a effectivement bien acheter une licence qui autorise le web, sinon s'il tient vraiment à sa font, ben il va devoir ressortir son porte monnaie Smiley ohwell .

2e question :
Je vais essayer avec la syntaxe de font-squirrel, voir ce que ça donne, mais c'est vrai que je penserais plutôt à un problème de génération (ce qui devrait être probablement réglé si je reçois les bons fichiers)