Utilisation de @font-face

Version imprimable

Bonjour,
J'essaie d'utiliser la police HoboStd avec @fon-face dans IE11:
Code:

1 2 3 4 5 6 7 8 9 10 @font-face { font-family: 'HoboStd'; src: url('HoboStd.eot'); src: url('HoboStd.eot?#iefix') format('embedded-opentype'), url('HoboStd.woff') format('woff'), url('HoboStd.ttf') format('truetype'), url('HoboStd.svg#HoboStd') format('svg'); font-weight: normal; font-style: normal; }
puis je définit un format:

Code:

HoboStd_16BLack { font-family:"HoboStd"; font-style:normal; font-size:16px; color:#000000; }

Je le triture dans tous les sens, mais je n'arrive pas à l'afficher.
D'avance, merci de vos conseils.

Avec l'ajout d'un point pour créer une classe css
Code:

1 2 .HoboStd_16BLack { font-family:"HoboStd"; font-style:normal; font-size:16px; color:#000000; }
et son utilisation dans le code html :
Code:

1 2 <div class="HoboStd_16BLack">Mon texte</div>
Cela devrait fonctionner

04/01/2015, 20h01
TroisR

Bonjour numew,

Le point n'est pas présent dans mon exemple mais existe bien dans le code.
04/01/2015, 22h17
numew

Si les différents fichiers des font (HoboStd.eot, HoboStd.woff, HoboStd.ttf, HoboStd.svg) sont bien disponibles au même endroit que le css, alors le code est fonctionnel
05/01/2015, 04h45
TroisR

C'est-à-dire que je n'ai de disponible que HoboStd.eot
05/01/2015, 05h08
Invité
Bonjour,
- Font Squirell - Webfont Generator

@font-face

Voici ~~le pdf avec~~ mon code:
~~http://troisr.pagesperso-orange.fr/P...onnalisees.pdf~~

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Définition Des Polices Personnalisées */
@fon-face{ 
	font-family: 'HoboStd';
	src: url('HoboStd.eot');
	src: url('HoboStd.eot?#iefix') format('embedded-opentype'),
	url('HoboStd.woff') format('woff'),
	url('HoboStd.ttf') format('truetype'),
	url('HoboStd.svg#HoboStd') format('svg');
	font-weight: normal;
	font-style: normal; 
}
.HoboStd_16BLack { 
	font-family:"HoboStd"; font-style:normal; font-size:16px;
	color:#000000; 
}
body { 
	background-color: #ffffff;
	width: 2048px;
	height: 1024px;
	font-family: HoboStd, 'Comic Sans MS', Arial, sans-serif;
	overflow-x: hidden; 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="Text/html; charset=ISO-8859-1" />
<title> Moderne Et Contemporain </title>
<link rel="stylesheet" type="Text/CSS" href="CSS/F_STyles_.css" media="all" />
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
	<!-- 01 -->
	<div id="FRancais01">
		<h1 class="HoboStd_20BLack"><i>Moderne Et Contemporaine</i></h1>
	</div>
</body>
</html>

06/01/2015, 02h03
Muchos

Citation:

@fon-face, .HoboStd_16BLack puis class="HoboStd_20BLack"

C'est encore mal recopié ou c'est dans le code ?

ps: le CHARSET ne se rédige pas comme ça en HTML5. En outre, l'élément FORM n'est pas fermé.

@font-face

Ce fut mal recopié, je suis désolé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
/* Définition Des Polices Personnalisées */
@fon-face { 
	font-family: 'HoboStd';
	src: url('HoboStd.eot');
	src: url('HoboStd.eot?#iefix') format('embedded-opentype'),
	url('HoboStd.woff') format('woff'),
	url('HoboStd.ttf') format('truetype'),
	url('HoboStd.svg#HoboStd') format('svg');
	font-weight: normal;
	font-style: normal; }
.HoboStd_16BLack { font-family:"HoboStd"; font-style:normal; font-size:16px; color:#000000; }
body { 
	background-color: #ffffff;
	width: 2048px;
	height: 1024px;
	font-family: HoboStd, 'Comic Sans MS', Arial, sans-serif;
	overflow-x: hidden; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html>
<html>
	<head>
		<meta HTTP-EQUIV="Content-Type" CONTENT="Text/html; charset=ISO-8859-1" />		
		<title> Moderne Et Contemporain </title>    
		<link rel="stylesheet" type="Text/CSS" href="CSS/F_STyles_.css" media="all" />
	</head>
	<body> 
		<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">	
<!-- 01  -->       <div id="FRancais01">
				<h1 class="HoboStd_16BLack"><i>Moderne Et Contemporain</i></h1>		
			</div>  
		</form>
        </body>
</html>

06/01/2015, 06h47
Invité

bonjour,

on ne met pas de :moinsser: "à la légère".
Il faut que la raison soit justifiées, et suffisamment grave : manquement aux règles du forum, incivilité, manque évident de pertinence,...

Je ne pense pas que Muchos en méritait un, alors que ses arguments sont juste : il met le doigt sur des erreurs que TU as faites.

Je lui ai donc attribué un :plusser:, afin d'équilibrer... en attendant que tu enlèves ton :moinsser:.
06/01/2015, 07h24
TroisR

Si j'ai fais ça c'est par erreur,
? Comment cela s'enlève.
06/01/2015, 08h15
Invité

Il suffit de re-cliquer dessus :
Si ça affiche 2, c'est que ce n'était pas toi ! :oops:
06/01/2015, 10h09
numew
Citation:

Envoyé par TroisR

C'est-à-dire que je n'ai de disponible que HoboStd.eot

As tu importé les autres formats (générés via le lien qui à été donné) ?

Il y'a toujours l'erreur

Code:

@fon-face {

dans le dernier code copié.

Le fichier css est il bien appelé ? si tu met un :
Code:

1 2 body{background:#ff0000;}
ce la s'applique t'il à la page ?
06/01/2015, 13h05
TroisR

@font-face

! J'ai de bonnes nouvelles: cela fonctionne parfaitement sous GOOGLE CHRome et Firefox mais pas sous IE
06/01/2015, 13h13
valaendra

Citation:

Envoyé par TroisR

@fon-face

Mal recopié également ? Parceque c'est @font-face :)
06/01/2015, 13h32
TroisR

?! Je ne comprends pas la question

Code:

1
2
3
4
5
6
7
8
9
10
 
@font-face {
    font-family: 'HoboStdWeb';
    src: url('HoboStd.eot');
    src: url('HoboStd.eot?#iefix') format('embedded-opentype'),
         url('HoboStd.woff') format('woff'),
         url('HoboStd.ttf') format('truetype'),
         url('HoboStd.svg#HoboStdWeb') format('svg');
    font-weight: normal;
    font-style: normal; }

Dans CSS j'ai HoboStd.eot et HoboStd.tff: cela fonctionne bien sous GOOGLE CHRome et Firefox mais pas sous IE.

? Que me manquerait-il pour que cela fonctionne sous IE

06/01/2015, 23h30
Invité
Bonjour,
il te faut ces 4 fichiers :
- HoboStd.eot
- HoboStd.woff
- HoboStd.ttf
- HoboStd.svg
07/01/2015, 06h00
TroisR

Merci JRaux62, c'est exactement cela.

Cordialement.