28172 sujets

CSS et mise en forme, CSS3

[Résolu] Les caprices de font-face. A l'aide !!!

Quand dans la css "bloc21", je mets :
font-family: "Conv_avgr65w", Times;
Tout va à l'exec.

Par contre, quand j'y mets :
font-family: "Conv_avgr45w", Times;
Plus rien ne va.
La police avantgarde est absente et est remplacée par la police Times...

On dirait que :
<link href="css/font_avgr45w.css" rel="stylesheet" type="text/css" media="all" />
est ignoré !!! Pourquoi ?

Pouvez-vous m'aider ?
D'avance, je vous en remercie !

Voici la page, ici

Mes polices "avgr45w" (ttf, eot,svg et woff) sont pourtant bien sur le serveur dans le dossier "<racine www>/fonts/avgr45w".
Mes polices "avgr65w" (ttf, eot,svg et woff) sont pourtant bien sur le serveur dans le dossier "<racine www>/fonts/avgr65w".



Voici ma css "font_avgr45w.css"
@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: 'Conv_avgr45w';
	src: url('../fonts/avgr45w/avgr45w.eot');
	src: url('../fonts/avgr45w/avgr45w.woff') format('woff'),
		url('../fonts/avgr45w/avgr45w.ttf') format('truetype'),
		url('../fonts/avgr45w/avgr45w.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


Voici ma css "font_avgr65w.css"
@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: 'Conv_avgr65w';
	src: url('../fonts/avgr65w/avgr65w.eot');
	src: url('../fonts/avgr65w/avgr65w.woff') format('woff'),
		url('../fonts/avgr65w/avgr65w.ttf') format('truetype'),
		url('../fonts/avgr65w/avgr65w.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


Voici ma css "bloc21", dans la page "webdesign99.css",
#bloc21 {
	height: 85px;
	width: 243px;
	border: 0px;
	position: absolute;
	left: 420px;
	top: 269px;
	z-index: 300;
	color: #0E72B5;
	font-size: 14px;
	padding-top: 175px;
	font-weight: bold;
	line-height: 16px;
	padding-left: 57px;
	font-family: "Conv_avgr45w", Times;
}


Dans ma page html, j'ai les links suivants :
<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />
<link href="css/font_avgr45w.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font_avgr65w.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/general.css" rel="stylesheet" type="text/css" media="all">
<link href="css/webdesign99.css" rel="stylesheet" type="text/css" media="all">

Modifié par jytest (29 Jun 2012 - 12:56)
Bonjour,

a écrit :
J'ai un problème d'affichage dans dreamweaver cs6 (avec solution... introuvable) pour font-face !


Je ne vais pas résoudre ton problème, mais le but final de la création de pages web est d'avoir un rendu correct dans les navigateurs, pas dans Dreamweaver.

Pour ma part, j'ai été confronté à de multiples cas de rendu incorrect dans Dreamweaver en mode "création" (menus en position fixed, notamment)... et je n'utilise plus ce logiciel depuis longtemps.
Merci thierry.
Le problème n'étant pas vraiment pas là,
je viens de mettre à jour mon post initial !
L'affichage création de Dw cs6 est secondaire !
Il est vrai que cela arrive de temps en temps !

Par contre, j'ai toujours un énorme souci avec mes css !!!
A l'aide, svp.

Peut-être n'est-il pas possible d'avoir 2 font-face ???
Modifié par jytest (29 Jun 2012 - 17:52)
Bien-sûr que c'est possible d'avoir plusieurs font-face Smiley smile

Tu as essayé sur combien de navigateurs ? As-tu essayé avec www.fontsquirrel.com ? Essaye de mettre ton code dans ton fichier css principale ( si tu en possède plusieurs )
Modifié par LeG3nDz (29 Jun 2012 - 18:32)
Modérateur
Bonjour!

J'ai la solution: Cette police, «ITC Avant Garde Gothic®» (nottez bien le dernier caractère, les infos de copyright étant tirée des metadatas de la police…), n'est malheureusement pas utilisable de cette façon, encore moins en la transformant par ses soins. Heureusement vous pouvez aquérir une license par abonnement (&DRM et toute la joie associée) ici: http://www.fonts.com/font/itc/itc-avant-garde-gothic?isRatingExpanded=False

En tout les cas cette police doit être licensiée pour être utilisée sur le web, ce qui n'est pas le cas ici. Ce qui est plus que limite pour un professionnel de l'image. Le droit d'auteur a été mis en place pour les professionnels. Que des particuliers maîtrisent mal c'est compréhensible, mais dans ce cas, c'est un gros manque de professionnalisme.
Merci LeG3nDz !
Cela me réconforte !

Merci Kustolovic !
J'avais pas fait attention à cela... Je voulais prendre un exemple avec cette police.

Merci FloydinBremen !
J'ai rajouté 1 ligne avec #iefix...
J'ai fait comme ceci :
url('../fonts/LTe50011/LTe50011.eot?#iefix') format('embedded-opentype')
Mais je vois pas ce que tu veux me faire changer d'autre !

Voici la dernière version des codes en ce moment !!!

En ce moment, cela fonctionne sous chrome, FF, Opéra, Iphone...
Mais pas IE6, ni IE7, ni IE8, nii IE9 !!!

J'ai vérifié les autorisations des .eot :
elles sont bien à "755" !!!

voici les css "font_LTe50011.css" :
@charset "utf-8";

@font-face {
	font-family: 'LTe50011';
	src: url('../fonts/LTe50011/LTe50011.eot');
	src: url('../fonts/LTe50011/LTe50011.eot') format('embedded-opentype'),
		url('../fonts/LTe50011/LTe50011.woff') format('woff'),
		url('../fonts/LTe50011/LTe50011.ttf') format('truetype'),
		url('../fonts/LTe50011/LTe50011.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
et "font_LTe50013.css"
@charset "utf-8";

@font-face {
	font-family: 'LTe50013';
	src: url('../fonts/LTe50013/LTe50013.eot');
	src: url('../fonts/LTe50013/LTe50013.eot') format('embedded-opentype'),
		url('../fonts/LTe50013/LTe50013.woff') format('woff'),
		url('../fonts/LTe50013/LTe50013.ttf') format('truetype'),
		url('../fonts/LTe50013/LTe50013.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
et voici les link
<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />
<link href="css/font_LTe50011.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font_LTe50013.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/general.css" rel="stylesheet" type="text/css" media="all">
<link href="css/webdesign99.css" rel="stylesheet" type="text/css" media="all">
et voici maintenant la css du "bloc21" dans "webdesign99.css"
#bloc21 {
	height: 85px;
	width: 243px;
	border: 0px;
	position: absolute;
	left: 420px;
	top: 269px;
	z-index: 300;
	color: #0E72B5;
	font-size: 16px;
	padding-top: 175px;
	line-height: 16px;
	padding-left: 57px;
	font-family: "LTe50011", Trebuchet;
}

Modifié par jytest (29 Jun 2012 - 22:30)
plutôt comme ceci : 


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


regardes si cela fonctionne.
C'est raté...
Cela ne va pas !
Ce n'est pas non plus un problème de droit,
vu que cela partout saus en eot (avec IE) !

Je viens de remettre les "" devant et derrière le nom de la police !

Par contre, "www.fontsquirrel.com" ne convertit pas les polices linotype...
Est-ce de là que le eot soit mal créé ?
Modifié par jytest (29 Jun 2012 - 22:47)
Et bien, vous avez tous raison !

Oui, "www.fontsquirrel.com" est le meilleur...
Les autres sont apparemment "à la ramasse".
Oui, il ne convertit pas les polices linotype.
Non, il ne convertit pas les polices à licence (...tant mieux !).
Oui, c'était le fichier "eot" qui était mauvais !
Oui, cela fonctionne aussi sur IE !

Oui, www.fontsquirrel.com fournit des kits de police libres de droits !
Oui, elles fonctionnent.
Oui, cela est hyper bien expliqué !

Oui, cela fonctionne !!!
Merci à tous !!!
Merci.
Bon weekend !
Modifié par jytest (30 Jun 2012 - 11:09)
Sujet clos
Aller à