Utilisation de @font-face

**TroisR** · 04/01/2015, 18h30

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

Code :

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

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 :

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

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.

**numew** · 04/01/2015, 19h34

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

Code :

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

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

et son utilisation dans le code html :

Code :

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

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

Cela devrait fonctionner

**TroisR** · 04/01/2015, 20h01

Bonjour numew,

Le point n'est pas présent dans mon exemple mais existe bien dans le code.

**numew** · 04/01/2015, 22h17

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

**TroisR** · 05/01/2015, 04h45

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

Invité · 05/01/2015, 05h08

Bonjour,

Font Squirell - Webfont Generator

**TroisR** · 05/01/2015, 17h35

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

Code css :

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
/* 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 :

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

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>

**Muchos** · 06/01/2015, 02h03

@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é.

**TroisR** · 06/01/2015, 05h52

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

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
 
/* 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 :

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
 
<!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>

Invité · 06/01/2015, 06h47

bonjour,

on ne met pas de

"à 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

, afin d'équilibrer... en attendant que tu enlèves ton

.

**TroisR** · 06/01/2015, 07h24

Si j'ai fais ça c'est par erreur,
? Comment cela s'enlève.

Invité · 06/01/2015, 08h15

Il suffit de re-cliquer dessus :
Si ça affiche 2, c'est que ce n'était pas toi !

**numew** · 06/01/2015, 10h09

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 :

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

@fon-face {

dans le dernier code copié.

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

Code :

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

1
2
 
body{background:#ff0000;}

ce la s'applique t'il à la page ?

**TroisR** · 06/01/2015, 13h05

! J'ai de bonnes nouvelles: cela fonctionne parfaitement sous GOOGLE CHRome et Firefox mais pas sous IE

**valaendra** · 06/01/2015, 13h13

Envoyé par TroisR

@fon-face

Mal recopié également ? Parceque c'est @font-face

**TroisR** · 06/01/2015, 13h32

?! Je ne comprends pas la question

**TroisR** · 06/01/2015, 13h47

Code :

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

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

Invité · 06/01/2015, 23h30

Bonjour,
il te faut ces 4 fichiers :

HoboStd.eot
HoboStd.woff
HoboStd.ttf
HoboStd.svg

**TroisR** · 07/01/2015, 06h00

Merci JRaux62, c'est exactement cela.

Cordialement.

Utilisation de @font-face

CSS

Discussions similaires

Partager

Partager