28172 sujets

CSS et mise en forme, CSS3

Fontface

Bonjour

je n'arrive pas à mettre en place une police fontface.
Je vous demande d'un peu d'aide.
Voici le code html (c'est pour l'instant une exercise pour y arriver) :



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>proba fontface</title>

<link rel="stylesheet" type="text/css" href="fface.css" charset="utf-8"/>

<style type="text/css" media="screen"> 
		h1.fontface {font: 60px/68px 'LaneNarrowRegular', Arial, sans-serif;letter-spacing: 0;}
 
		p.style1 {font: 18px/27px 'LaneNarrowRegular', Arial, sans-serif;}
		
		#container {
			width: 800px;
			margin-left: auto;
			margin-right: auto;
		}
	</style> 

		
		



</head>

<body>
    <div id="container">
        <h1 class="fontface">Font-face Demo for the Lane  Font</h1> 
        
        <p class="style1">Lane - Narrow Regular - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
        
    </div>

</body>
</html>



et la css


@charset "UTF-8";
/* CSS Document */


@font-face {
    font-family: 'LaneNarrowRegular';
    src: url('../fface/LANENAR_-webfont.eot?#iefix') format('eot');
    src:
         url('../fface/LANENAR_-webfont.woff') format('woff'),
         url('../fface/LANENAR_-webfont.ttf') format('truetype'),
         url('../fface/LANENAR_-webfont.svg#webfontMAZXZguX') format('svg');
    font-weight: normal;
    font-style: normal;

}




Merci Smiley cligne
Modifié par andjamandja (17 Apr 2011 - 00:06)
h1 {
font-family:LaneNarrowRegular;

}


<h1 class="fontface">Font-face Demo for the Lane Font</h1>

tu peux supprimer la classe et présenter ainsi
<h1>Font-face demo</h1>
Bonjour, je n'avais pas fait attention au css
dans le <head>

c'est certainement une question d'adresse de liens de ta font

mets ta font à la racine du site et essaie cela :

(marche sans pb, chez moi)

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>proba fontface</title> 
 
<link rel="stylesheet" type="text/css" href="fface.css" charset="utf-8"/> 
 
<style type="text/css" media="screen">  
      h1.fontface {font: 60px/68px 'LaneNarrowRegular', Arial, sans-serif;letter-spacing: 0;} 
  
        p.style1 {font: 18px/27px 'LaneNarrowRegular', Arial, sans-serif;} 
         
        #container { 
            width: 800px; 
            margin-left: auto; 
            margin-right: auto; 
        } 
		
		@charset "UTF-8"; 
/* CSS Document */ 
 
 
@font-face {
    font-family: 'LaneNarrowRegular';
    src: url('lanenar_-webfont.eot');
    src: url('lanenar_-webfont.eot?#iefix') format('eot'),
         url('lanenar_-webfont.woff') format('woff'),
         url('lanenar_-webfont.ttf') format('truetype'),
         url('lanenar_-webfont.svg#webfontdg7DlZma') format('svg');
    font-weight: normal;
    font-style: normal;

}
    </style>  
 
         
         
 
 
 
</head> 
 
<body> 
    <div id="container"> 
        <h1 class="fontface">Font-face Demo for the Lane  Font</h1>  
         
        <p class="style1">Lane - Narrow Regular - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
         
    </div> 
 
</body> 
</html>

Modifié par waik (17 Apr 2011 - 12:43)
upload/37102-Capturedec.png

merci waik
mais ça marche tjs pas.

tu as mis quoi dans le fichier css ?

et aussi voicicomment il est mon dossier www

merci !
Modifié par andjamandja (17 Apr 2011 - 20:47)
bonsoir,

je n'ai rien mis dans un fichier externe css

tout est dans la page html

dans ton dossier racine, tu places ta page html,
si tu as besoin ton fichier css fface.css
tu copies les différents fichiers de ta font dans le dossier racine
où tu as ta page html et là cela fonctionnera en utilisant
le html que je t'ai donné tout a l'heure.
Une piste qui vaut ce qu'elle vaut :

si tu es sur un environnement linux, ton CSS appelle la police en minuscule alors que les fichiers sont en majuscule.
Sujet clos
Aller à