28172 sujets

CSS et mise en forme, CSS3

Problème de @font-face dans un fichier css

j'utilise tinymce pour des clients et je souhaite intégrer des polices personnalisées dans les zones gérées par tinymce.
Or, tinymce génère une iframe à sa création. Donc je ne peut utiliser un code du type 
<style type="text/css">
@font-face {font-family: "cabin";src: url("../script/fonts/Cabin-Regular.ttf");}
</style>
<!--[if IE]>
<style type="text/css">
@font-face {font-family: "cabin";src: url("../script/fonts/Cabin-Regular.eot");}
</style>
<![endif]-->

je dois l'intégrer dans la feuile de style chargée au lancement de l'instance tinymce
Or dans ce fichier j'ai testé:
1) ce hack

@font-face {font-family: "cabin";src: url("../script/fonts/Cabin-Regular.ttf");}/*not ie*/
@font-face {_font-family:"cabin";_src: url("../fonts/Cabin-Regular.oet");}/*ie only*/

ou bien
2)
@font-face {font-family:"cabin";src: url('../fonts/Cabin-Regular.ttf') format('truetype'),url('../fonts/Cabin-Regular.eot') format('eot');}

puis

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: "cabin", Arial, Helvetica, sans-serif;
...
}

mais dans les 2 cas la police ne se charge pas sur IE6+

merci d'avance pour vos idées
Salut,

Afin de te faciliter la tâche, je te conseille de te rendre sur Font Squirrel. Tu cliques sur "Add fonts", tu mets ton écriture et ça te charge un zip contenant tes polices à envoyer sur ton serveur. Il y a également un fichier qui te donne le code css à intégrer à ton fichier.

Voilà bonne soirée
Modifié par kinkaz (28 Mar 2012 - 19:26)
Bonjour,
merci pour l'intervention. Cependant, je pense que tu n'as pas saisi mon problème : j'arrive à utiliser cette police sur du texte dans une page.
Le souci c'est que tinymce génère une iframe et donc une pseudo page qui a besoin de la définition de la fonte. Même si je la défini dans ma page appelante, elle ne sera pas prise en compte, puisque c'est une frame. Pour la charger dans ma frame, l'idéal est donc d'intégrer cette font DANS la feuille de style spécifique à l'occurence de tinymce.
D'où ma question :
est-ce possible de déclarer DANS une feuille de style une font à la fois pour IE et non IE (ttf et eot ?) et qui fonctionne sur IE6+ ?
j'arrive à intégrer pour l'un ou pour l'autre mais pas les deux
@font-face {font-family:"cabin";src: url('../fonts/Cabin-Regular.XXX');}

avec XXX = ttf ou eot



<html>
<head>
<title>Page contenant le tesxtarea</title>
=> style pour appeler la police "exotique"
</head>
<body>
	TEXTE <= mis en forme avec la police exotique
	=> script d'appel de tinymce
	<iframe>
		<html>
		<head>
		<title> Iframe généré par tinymce</title>
		=> feuille de style personnalisé de tinymce
		</head>
		<body>
			TEXTE <= non pris en compte par la police 
		</body>
		</html>
	</iframe>
</body>
</html>
Modérateur
a écrit :
est-ce possible de déclarer DANS une feuille de style une font à la fois pour IE et non IE (ttf et eot ?) et qui fonctionne sur IE6+ ?

Oui c'est possible. Si tu utilises le générateur cité (fontsquirell) tu auras un bon exemple
Bonjour.

Rien à voir avec ta question, mais tu définis en CSS :

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

    font-family: "cabin", Arial, Helvetica, sans-serif;
...

}



body {

    font-family: "cabin", Arial, Helvetica, sans-serif;
...

}


... suffit, non ?, sud pour l'iframe (une feuille de style doit être inserée dans la page affichée dans l'iframe).
Modifié par thierry (30 Mar 2012 - 11:32)
Modérateur
Non seulement cela suffit, mais la première proposition pose problème, car elle supprime l'héritage de la police entre de nombreuses balises.

Par exemple, tu souhaites faire 


#header {
  font-family: serif;
}


il risquera d'être nécessaire de faire:

#header p, #header a, #header abbr, #header div, #header span, #header h1, #header h2, #header strong [ etc. ] {
  font-family: serif;
}


pour que cela fonctionne
Sujet clos
Aller à