Problème avec font-face

nanard74 · 17/11/2011, 12h00

Bonjour,
j'ai un petit soucis avec une police "Brush Script MT" que je voudrais bien voir sur une page de site, chez moi pas de problème, mais ailleurs, ils n’ont pas forcément cette police. Après plusieurs essais en passant sur pas mal de page de lecture sur internet, je n'arrive toujours pas au résultat. Je met les codes et si une personne à une solution se serait parfait. Merci d'avance.
Bernard

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style6.css" />
 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
</head>
 
<body>
<div id="global">
       <div id="haut"><img src="http://d.b.laroche.free.fr/ban_haute/ban5.png" width="980" height="170" alt="" /></div>
	     <div id="ban_gauche"><img src="http://d.b.laroche.free.fr/ban_gauche/ban_gauche.png" width="300" height="893" alt="" /></div>
  <div id="fond"></div>
  <div id="wrapper">
<div id="navMenu">
     <ul><a href="#"></a>
	 <ul id="menu">
	     <li><a href="#"><span class="font-face">Accueil</span></a></li>
		 <li><a href="#">Photos</a></li>
		 <li><a href="#">Situation</a></li>
		 <li><a href="#">Descriptif</a></li>
		 <li><a href="#">Tarrifs</a></li>
	 </ul>
     </ul>
</div>
</div>
 
 
</div>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/****css barre de navigation****/
#wrapper{
	position:absolute;
	left:70px;
	top: 175px;
	z-index:4;
	width: 785px;
}
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background: #d4d5d6;
 
}
#navMenu ul li a{
text-align:center;
font-family: "Brush Script MT",curvine;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#993300;
font-size:28px;
border:2px outset #7c7c7d;
text-shadow: 1px 1px 1px #f7f2f6 ;
}
.font-face {
	font-family: Brush Script MT;
	src: url('myfont-webfont.eot?') format('embedded-opentype');
	}
 
.font-face {
	font-family: Brush Script MT;
	     url(data:font/truetype;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('truetype'),
	     url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('woff'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}
#navMenu li:hover{
background:#aaaaae;
 
}
#navMenu a:hover{
color:#4a7df8 ;
font-size:32px;
}

eckerdecker · 17/11/2011, 17h53

Commence ta feuille css avec la déclaration des font-face, plutôt qu'en plein milieu (moi ça me choque mais ça ne pose peut-être pas de problème ...), et surtout la syntaxe serait plutôt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
@font-face {
...
}

nanard74 · 18/11/2011, 15h35

bonjour,
merci de me répondre et j'ai essayé mais sans succès, donc j'ai parcouru internat et j'ai trouvé d'autre explication qui consiste à mettre la police en ligne sur le site et de faire le code en fonction mais cela ne marche toujours pas. J'ai vraiment besoin d'aide car je bloque total. Je joins le code html et css sur le même support car je ne l'ai pas mis dans la feuille css car pas de résultat.
Donc si quelqu'un peut me renseigner sur cela et à une solution ce serait super.
Bonne fin de journée Bernard
ps: j'ai mis 2 sortes de "span" mais toujours sans succès.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style6.css" />
<style type="text/css">
 @font-face { font-family:Brush Script MT; src:local(Brush Script MT), url(Brush-Script-MT.ttf) format(TrueType); }
 @font-face { font-family:Brush Script MT; url(http://d.b.laroche.free.fr/Brush-Script-MT.ttf) format(TrueType) 
 }
 </style>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
</head>
 
<body>
<div id="global">
       <div id="haut"><img src="http://d.b.laroche.free.fr/ban_haute/ban5.png" width="980" height="170" alt="" /></div>
	     <div id="ban_gauche"><img src="http://d.b.laroche.free.fr/ban_gauche/ban_gauche.png" width="300" height="893" alt="" /></div>
  <div id="fond"></div>
  <div id="wrapper">
<div id="navMenu">
     <ul><a href="#"></a>
	 <ul id="menu">
	     <li><a href="#"><span style="@font-face">Accueil</span></a></li>
		 <li><a href="#"><span style="font-family:Brush Script MT">Photos</span></a></li>
		 <li><a href="#">Situation</a></li>
		 <li><a href="#">Descriptif</a></li>
		 <li><a href="#">Tarifs</a></li>
	 </ul>
     </ul>
</div>
</div>
 
 
</div>
</body>
</html>

miss_socrates · 19/11/2011, 18h42

La balise html font-face est obsolète.
Je propose d'utiliser l'équivalent CSS: "font-family:"

Il faudrait peut-être mettre un lien sur la page pour que ceux qui n'ont pas cette police puissent l'installer.

19/11/2011, 18h42	#4
miss_socrates Membre habitué Inscription : mai 2011 Messages : 109 Détails du profil Informations personnelles : Sexe : Localisation : Belgique Informations professionnelles : Secteur : Enseignement Informations forums : Inscription : mai 2011 Messages : 109 Points : 134 Points : 134	police La balise html font-face est obsolète. Je propose d'utiliser l'équivalent CSS: "font-family:" Il faudrait peut-être mettre un lien sur la page pour que ceux qui n'ont pas cette police puissent l'installer.
	01

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email