28172 sujets

CSS et mise en forme, CSS3

@font-face (... suite et fin) ?

Bonjour,

N'étant pas un utilisateur des navigateurs IE9 et Opéra,
(je lui préfère Chrome, question de préférence),
je constate qu'à l'affichage, avec IE9 ou Opéra,
c'est d'abord du trébuchet (font par défaut sur le site) qui est géré,
à droite de l'animation JS des mains,
et puis, après quelques millisecondes,
c'est bien la @font-face qui est utilisée pour l'affichage de la police !
Ceci se reproduit à chaque rafraîchissement de la page F5...

Avec Chrome, FF, safari... c'est OK !

Voici la page en question, ici

Y a-t-il quelquechose qui m'échappe encore
avec ce fameux @font-face ?

Merci d'avance pour très précieuse aide !
Modifié par jytest (01 Jul 2012 - 06:41)
re,

tu veux vraiment faire le tour de la question avec les font-faces, hein?! Smiley lol

si je reprends la logique de ce que tu as codé, la police par défaut pour tout élément est la police Trébuchet. valable donc pour ta div bloc21 qui contient le "votre site vitrine".

ensuite, tu changes la police de Trébuchet vers ta police exotique "font_agg" via la classe font_agg.

une police exotique est un peu plus longue à charger, il me semble aussi que IE charge le tout même s'il ne comprend que l' EOT. un article sympa de quelqu'un de connu chez Alsa

une question d'héritage css peut-être? combiné avec le comportement curieux d' IE? Pas sûr, puis la flemme de tester aussi....mais au moins, c'est une piste comme une autre.

Bon courage.
Et oui, le @font-face n'aura peut-être bientôt plus de secret pour moi (et les futurs membres, hein) !

Pour le fonctionnement, bien vu !

J'étais déjà tombé sut ce superbe article !

Cette nuit, une idée m'est venue !
Pourquoi ne pas cacher la div "bloc21" et puis la visualiser en fin de page par un script javascript ?
Lourd me diront peut-être les puristes ?
Mais qui ne risque rien n'a rien !
A défaut d'autre piste...
Peut-être serait-ce la solution ?
Ou un début de solution ?

Dans mes scripts javascript entre <head> et </head>, j'insère ceci :
function afficheId(balise) {
    document.getElementById(balise).style.visibility='visible';
}

function cacheId(balise) {
    document.getElementById(balise).style.visibility='hidden';
}


Dans mon css, pour #bloc21", je rajoute les 2 propriétés suivantes :
	visibility: hidden;


En fin de page (juste avant le </body>), j'insère ceci :
<script type="text/javascript">afficheId('bloc21');</script>


Ceci a le mérite de fonctionner sous IE9 (sauf au refresh F5) !
Mais toujours pas sous Opéra !

Mais n'y a-t-il pas plus simple, sans passer par le javascript
(vu que les seuls navigateurs à en avoir besoin sont IE et peut-être Opéra)

Pouvez-vous m'aider ?
Modifié par jytest (01 Jul 2012 - 06:18)
oulà, je vais dire non. pas de solution javascript pour un truc pareil.

- simplifie donc tes css, des regroupements sont sûrement possibles. pas la peine non plus dans ton cas de faire 4 pages de css. une seule suffit.

- enlèves ta police par defaut, et attribue donc le trébuchet uniquement aux éléments concernés.
Sauf pour la div "bloc21", toutes mes balises utilisent le trébuchet
cfr la propriété suivante dans "general.css"
* {
	margin: 0;
	padding: 0;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}


Pour les 4 pages de css, c'est pour faciliter la relecture et/ou modifications des pages (celle-ci et les autres) dans le futur :
"general.css" pour toutes les balises reprises systématiquement dans toutes les pages,
"webdesign01.css" pour uniquement les balises de la page actuelle ("webdesign01.php"),
et une pour chaque police utilisée (certaines pages ne chargeront pas ces 2 polices-là !).
Avoue que cela est quand même plus facile pour l'évolution du site !

Changer toutes les balises en "trebuchet" va être un travail fastidieux !
Alors, vu que je ne peux pas (...) modifier cette propriété dans "*",
que faire de mieux ?

J'ai néanmoins essayé de mettre ceci en tête de "webdesign01.css",
juste après le link de "general.css"
(... pas mal l'idée de 4 sheetstyle successifs, hein ? Avoue ! Avoue !) :
* {
	margin: 0;
	padding: 0;
	font-family:'AvantGarde2BQRoman','Trebuchet MS', Arial, Helvetica, sans-serif;
}
Cela ne fonctionne pas non plus !
De plus, pour cette page j'ai besoin de deux polices exotiques !

Néanmoins, cette méthode (pas très propre) du javascript,
résout pourtant en partie mon problème !
Une solution à me proposer ?
Modifié par jytest (01 Jul 2012 - 06:53)
je vais te donner un exemple concret :

ce que tu as codé : 


#visuel {
	margin-left: 44px;
	width: 676px;
	height: 800px;
}
#entete {
	height: 105px;
	width: 676px;
}
#separateurH01{
	height: 6px;
	width: 676px;
}
#menu {
	height: 147px;
	width: 676px;
}
#separateurH02{
	height: 6px;
	width: 676px;
}
#contenu {
	height: 436px;
	width: 676px;
}
#separateurH03{
	height: 6px;
	width: 676px;
}
#pied {
	height: 75px;
	width: 676px;
}


ce que tu peux faire : 


#visuel, #entete, #separateurH01, #menu, #separateurH02, #contenu, #separateurH03, #pied {
	width: 676px;
}
#visuel {
	margin-left: 44px;
	height: 800px;
}
#entete {
	height: 105px;
}
#separateurH01{
	height: 6px;
}
#menu {
	height: 147px;
}
#separateurH02{
	height: 6px;
}
#contenu {
	height: 436px;
}
#separateurH03{
	height: 6px;
}
#pied {
	height: 75px;
}


y a sûrement moyen d'améliorer encore, encore une fois question d'héritage. dans CSS y a aussi cascade. Smiley lol

le fait d'avoir 4 pages de css, voire plus ne rend pas le code plus lisible ou la maintenance plus facile. cela peut même entrainer une certaine confusion, un risque d'erreur. au moins pour celui qui passe derrière toi.
Ok, à chacun son point de vue, sur les regroupements de css !

Comme tu vois, j'ai profité du cascading, moi aussi,
en rajoutant les propriétés "*" dans "webdesign01.css".

Mais comme je viens de te le dire,
dans mon message précédent,
cela ne résout pas mon problème d'affichage !
Modifié par jytest (01 Jul 2012 - 07:03)
oui, chacun son point de vue. ton problème d'affichage vient quand même, peut-être, du temps de chargement. déclare tes font-face dans general.css, en premier. et vire tes 2 feuilles dédiées uniquement à tes 2 polices. Regarde si le problème persiste. j'ai aussi des polices exotiques sur mon site, mais bon, certaines sont un peu plus lourdes à charger.
Je viens juste de tester cela !
Rien n'y change !

D'autant plus que mes sheetstyle des polices sont justement chargés,
pour cette raison, avant "general.css" et "webdesign01.css" !
C'est voulu !

A part la solution JS,
Mon problème est toujours là !
A l'aide !
A l'aide !
A l'aide !
Modifié par jytest (01 Jul 2012 - 07:15)
Bonjour,

il y a souvent une latence de ce genre sur les font-faces. La plupart du temps c'est effectivement une question de poids et de chargement. Tu peux :
• optimiser tes fichiers de typos, en ne conservant que les glyphes dont tu te sers ( pas besoin de la typo au complet, et bien souvent le gain est conséquent )
• gzipper l'ensemble ( cf cet article ), et améliorer la prise en cache ( dans le .htaccess également )
• et dans l'ensemble réduire le nombre de fichiers à charger ( un seul fichier .css, utiliser des sprites.. )

Tu peux consulter google page speed ou GT Metrix par exemple pour te donner une idée plus précise de ce que tu peux améliorer.

Simple remarque sur une des réponses précédentes : si tu souhaites appliquer la Trebuchet MS sur tout la page, applique la plutôt au body. Le sélecteur universel est un peu lourd pour ça, et en l'appliquant au body l'ensemble de ses enfants en hériteront..

Bon courage !!
Modifié par Ten (01 Jul 2012 - 12:27)
Bonjour à toi.

a écrit :
• gzipper l'ensemble ( cf cet article ), et améliorer la prise en cache ( dans le .htaccess également )


Je viens de créer un .htaccess (vide) à la racine du site.
Mais qu'y mettre ?
Comment faire, stp ?
Modifié par jytest (01 Jul 2012 - 14:39)
En y mettant le nécessaire du code,
mon site plante !!!

Avez-vous d'autres pistes ?
Merci d'avance.
Sujet clos
Aller à