28172 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour à tous,
j'ai un souci pour que IE lise bien les polices que j'ai mis avec @font-face dans mon css.......

j'ai bien vu que le sujet a déjà été abordé plusieurs fois, mais j'ai tout essayé et je n'ai pas encore trouvé la bonne solution.

voici mon css


@font-face {
	font-family: 'Conv_HN-BoldCond';
	src: url('../fonts/HN-BoldCond.eot'),
		 url('../fonts/HN-BoldCond.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/HN-BoldCond.woff') format('woff'),
		 url('../fonts/HN-BoldCond.ttf') format('truetype'),
		 url('../fonts/HN-BoldCond.svg#Conv_HN-BoldCond') format('svg');
	font-weight: normal;
        font-style: normal;
}

 h3 {
	    font-family: 'Conv_HN-BoldCond';
}


J'ai voulu passer par fontsquirrel, mais apparemment la police a est blacklistée donc il veut rien faire... pourtant mon client a acheté les droits d'utiliser cette police qui fait partie intégrante de sa charte!....

SVP si vous avez des idées je suis préneuse parceque là je ne sais plus quoi inventer!

Merci d'avance
Bonjour,

Tu es sûr des chemins d'accès aux fichiers ? Pas de souci au niveau des noms (fautes éventuelles, majuscules/minuscules) ?
Tu peux éventuellement tenter de mettre ces fichiers dans le dossier CSS, modifier les adresses en conséquence, et vérifier si cela fonctionne.

Essaies éventuellement avec le code ci dessous :
@font-face {
	font-family: 'Conv_HN-BoldCond';
	src: url('../fonts/HN-BoldCond.eot');
	src: url('../fonts/HN-BoldCond.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/HN-BoldCond.woff') format('woff'),
	     url('../fonts/HN-BoldCond.ttf') format('truetype'),
	     url('../fonts/HN-BoldCond.svg#Conv_HN-BoldCond') format('svg');
	font-weight: normal;
        font-style: normal;
}

Bon courage.
J'ai déjà tout vérifié 1000 fois, j'ai fait carrément des copiers-collers pour pas me tromper dans les noms et les chemins aussi j'ai déjà essayé plusieurs choses... je n'ai pas encore testé de mettre les polices à la racine du css, je vais essayer encore ça, après j'abdique, je ne sais vraiment plus!

En tout cas merci pour ta réponse, par contre je ne vois pas la différence entre ton code et le mien?
b-creative a écrit :
J'ai déjà tout vérifié 1000 fois, j'ai fait carrément des copiers-collers pour pas me tromper dans les noms et les chemins aussi j'ai déjà essayé plusieurs choses... je n'ai pas encore testé de mettre les polices à la racine du css, je vais essayer encore ça, après j'abdique, je ne sais vraiment plus!
On garde le sourire et on ne perd pas espoir Smiley cligne
b-creative a écrit :
En tout cas merci pour ta réponse, par contre je ne vois pas la différence entre ton code et le mien?

Essentiellement là :
src: url('../fonts/HN-BoldCond.eot')[b];/* le point virgule*/[/b]
[b]src: /*la source*/[/b]url('../fonts/HN-BoldCond.eot?#iefix') format('embedded-opentype'),
@bcreative : Le plus simple, ce serait de fournir une url où l'on puisse constater le souci rencontré Smiley cligne
Bon, j'ai essayé de mettre à la racine, de mettre ton code, mais rien à faire....
je parle essentiellement de la version IE8..... l'espoir est en train de me lâcher.............................
pour l'instant c'est qu'en local et en plus je suis sur Mac et pour tester sur IE c'est la galère...

je vois si j'arrive à vous faire des impressions d'écran
Bonjour,

Les captures d'écrans ne sont pas chargées. De toute façon, elle n'ont strictement aucun intérêt pour t'aider à résoudre ton souci : je ne vois vraiment pas ce qu'on peut en faire, et en quoi nous pourrions en déduire quoi que ce soit Smiley sweatdrop

Le projet sur lequel tu travaille est en local, ok, mais pourquoi ne pourrais-tu tout simplement pas isoler ce qui pose problèmeet mettre en ligne une page avec trois lignes de HTML, l'appel de tes fontes et d'une CSS simplifiée ? Ça te prendra deux minutes et ça permettra aux forumeurs de tester tout ça in situ Smiley smile
Modifié par audrasjb (06 May 2014 - 13:45)
IE8 n'est plus un navigateur capital, à ta place j'afficherai la police par défaut en solution de repli sur cette version de navigateur précisément, avec par exemple un commentaire conditionnel pour IE...

Tu peux également en plus de cela afficher un bandeau fixe en sommet de page indiquant que la version d'internet explorer utilisée est obsolète, en proposant de mettre à jour le navigateur ou d'utiliser un autre nav' parmi la liste la plus répandue (les classiques Chrome, Firefox et Safari)...

A noter que Internet explorer 8 est utilisé principalement si ce n'est exclusivement sur Windows XP dont le support a pris fin le 8 avril dernier, est que par conséquent ce navigateur ne va faire que disparaître dans les prochains mois... IE 9 a encore par contre de beaux jours devant lui.

Source concernant XP : http://windows.microsoft.com/fr-fr/windows/help/what-does-end-of-support-mean
Modifié par ohweb (06 May 2014 - 14:54)
Salut,

Oh ouaip, Ohweb ( Smiley kc ), c'est vrai ce que tu dis à propos de l'arrêt du support d'XP, et ça risque de peser sur le parc des grosses (et "grosses et moyennes") entreprises/industries qui vont commencer à renouveler leur parc si ce n'est pas déjà fait. Cela dit, il risque d'y avoir encore un peu (= 6 mois ? 1 an ? 2 ans ?) d'inertie. On constate encore sur beaucoup de sites sur lesquels on intervient (notamment sites publics/collectivités, donc plutôt visités par les particuliers et entreprises/administrations à l'échelle locale) une présence "importante" (±= 5%) d'IE8/XP. Les statistiques d'IE6/7 sont par contre (enfin) devenues (vraiment) négligeables (mais même eux, on leur donnera toujours accès aux contenus).

Dans le cas qui nous intéresse (support de @font-face), il ne devrait pas être impossible/trop complexe de fournir un support vu que cette technique est supportée depuis longtemps. Je serais d'avis de faire ce qui est possible pour assurer une compat' minimale Smiley smile

Par contre, je suis à titre personnel opposé à l'idée du bandeau d'avertissement (surtout fixe !! grr Smiley langue ). On en a déjà causé sur le forum à plusieurs reprises et j'en suis plutôt personnellement resté sur le constat qu'il était inutile voire contre-productif de procéder ainsi : le visiteur sait probablement que son matos est obsolète, et ne risque pas vraiment d'en changer comme ça…

En tout cas, en attendant une page de test de b-creative, ça me semblait pas inintéressant de revenir une fois de plus sur ces question de compat' Smiley smile
Modifié par audrasjb (06 May 2014 - 16:59)
salut,
simple question bête, as-tu changer aussi les chemins lorsque tu as placer tes fonts dans le même dossier ?
Autre chose, as-tu aussi fait des tests en ligne ? Parfois les fonts ne se chargent pas en local mais marchent parfaitement une fois en ligne.

Pour ce qui est de IE8 ou du fait qu'il soit négligeable, c'est peut être relativement vrai, mais pour ce qui est de cette propriété, elle très bien comprise même par des IE encore plus vieux.
Salut,
Zelalsan a écrit :
Pour ce qui est de IE8 ou du fait qu'il soit négligeable, c'est peut être relativement vrai, mais pour ce qui est de cette propriété, elle très bien comprise même par des IE encore plus vieux.

En ce qui concerne la négligence vis-à-vis d'IE 8, tout dépend du contexte (le contexte, d'où le contexte, rien que le contexte Smiley cligne ).

Pour le reste, n'oublions pas que c'est Microsoft qui a proposé la règle @font-face et que c'est IE qui l'a implémentée en premier (à partir d'IE 5.5, si je ne dis pas de bêtise). Cette règle était initialement apparue en CSS 2 avant d'être retirée de la spécification CSS 2.1 (faute d'implémentation, à l'époque, par les navigateurs autres qu'IE, outre des soucis liés au format) pour revenir en force en CSS 3, pour notre plus grand plaisir. Donc, la police Web en question doit pouvoir s'afficher sous IE 8.
je vais essayer quand j'ai 2 minutes de faire un bout de code simple pour vous montrer en ligne, en effet ça sera plus simple...

il faut que je trouve une solution pour IE8 car mon client a pratiquement tout son parc la dessus (et c'est pas des moindres) et ils regardent tous la dessus pour valider... voilà pourquoi j'insiste... si ça ne tenait qu'à moi........
Victor BRITO a écrit :
En ce qui concerne la négligence vis-à-vis d'IE 8, tout dépend du contexte (le contexte, d'où le contexte, rien que le contexte Smiley cligne ).

Je n'ai pas compris ce que tu cherches à me dire ?
Dans tous les cas je ne cherche pas à dire que IE8 est négligeable (même si en voie de disparition) et perso je le prends encore en compte pour mes sites
Victor BRITO a écrit :
Donc, la police Web en question doit pouvoir s'afficher sous IE 8.

C'est exactement ce que j'ai dit, d'où mon intervention sur ce point pour signifier que ce n'est pas IE8 le fautif mais que le problème se situe probablement ailleurs.
Dans ta CSS de test, il y a comme des restes de Less. Remplace @black par black.

Pour le reste, la police ne se charge, effectivement, pas.
Fontsquirrel ajoute un "?#iefix" derrière l'extension.eot. Ca pourrait peut-être réglé le soucis non ?

@font-face {
    font-family: 'venice';
    src: url('veniceclassic-webfont.eot');
    src: url('veniceclassic-webfont.eot?#iefix') format('embedded-opentype'),
         url('veniceclassic-webfont.woff') format('woff'),
         url('veniceclassic-webfont.ttf') format('truetype'),
         url('veniceclassic-webfont.svg#venice_classicmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}


Ce code-là marche chez moi, y compris sous IE ^^
Lothindil a écrit :
Fontsquirrel ajoute un "?#iefix"derrière l'extension.eot.
Toi tu n'as pas bien lu le code présenté Smiley cligne

Il n'y a pas de raison pour que ça ne fonctionne pas sous IE, peut-être un fichier corrompu lors du téléchargement de la police ou de l'envoi via FTP ?
Tente avec un nouveau fichier ou même une autre police pour écarter cette piste.

Bon courage.
Pages :