28172 sujets

CSS et mise en forme, CSS3

[Résolu] Utiliser une nouvelle police

Bonjour à toutes et à tous,

Utiliser une nouvelle police

Je place les fichiers style.css et stylesheet.css dans le sous dossier css

a) - Dans le fichier index.html, il y a :

 <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/stylesheet.css">

b) - Dans le fichier style.css, il y a

}*/ Déclaration de la nouvelle police*/
@font-face {
    font-family: 'learning_curve_dashed_OT.eot';
    src: url('learning_curve_dashed_OT.eot');
}
p
{
	font-family: "Arial Black", Arial, Verdana, sans-serif;
    font-size: 10px; /* Paragraphes de 14 pixels */
}
h1
{
	font-family: 'learning_curve_dashed_proRg';
	font-size: 120px;
	text-align: center;
}

c) - Dans le fichie stylesheet.css il y a :

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

Problème
Quand j'exécute le programme dans Firefox les titres (h1) ignorent la police
learning_curve_dashed_OT.eot'
Où est l'erreur ?

Avec mes remerciements
Cordialement
Papy
Modifié par Jean Sympa (10 Jul 2015 - 10:02)
Bonjour,
il manque la police au format TTF, non ?
quelque chose comme 


@font-face {
    font-family: 'learning_curve_dashed_OT';
    src: url('learning_curve_dashed_OT.ttf');
}


et à quoi sert le ".eot" dans le nom de la police ? je l'enlève.

je mettrais donc aussi :


@font-face {
    font-family: 'learning_curve_dashed_OT';
    src: url('learning_curve_dashed_OT.eot');
}


et il vient :


h1
{
	font-family: 'learning_curve_dashed_OT';
	font-size: 120px;
	text-align: center;
}


pour avoir les H1 en learning_curve_dashed_OT
Merci farang,

La maquette suivante prend en compte tes conseils. Il y a une erreur, elle n'affiche pas la police learning curve pro.


Fichier Index.html
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Learning_curve_pro</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/stylesheet.css"> 
    <script type="text/javascript" src="sympa.js"> </script>
</head>
<body>
 <h1>Installer Learning curve</h1>
  
</body>
</html>



Fichier Style.css
@font-face {
    font-family: 'learning_curve_dashed_OT';
    src: url('learning_curve_dashed_OT.ttf');
}
@font-face {
    font-family: 'learning_curve_dashed_OT';
    src: url('learning_curve_dashed_OT.eot');
}
p
{
	font-family: "Arial Black", Arial, Verdana, sans-serif;
    font-size: 70px; /* Paragraphes de 14 pixels */
}
h1
{
	font-family: 'learning_curve_dashed_OT';
	font-size: 50px;
	text-align: center;
}



Fichier stylesheet.css
@font-face { /* Définition d'une nouvelle police nommée LearningCurveProRegular */

    font-family: 'LearningCurveProRegular';

    src: url('LearningCurve_OT-webfont.eot');

    src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),

         url('LearningCurve_OT-webfont.woff') format('woff'),

         url('LearningCurve_OT-webfont.ttf') format('truetype'),

         url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');

}


Où est l'erreur ?

Cordialement
Papy
2 possiblités d'erreur :

1 Les fichiers eot et ttf ne sont pas au même niveau que la feuille de style, ( = ne sont pas dans le dossier "css");

2 les fichiers sont corrompus.

Sinon je ne vois pas, j'ai repris en local les fichiers, avec les mêmes apostrophes ou guillemets, avec un autre police avec des '_' dans le nom, tout fonctionne.

A l'aide les pros !

Tu peux mettre en ligne le fichier index.html et les fichiers ?
Merci farang,

Solution du problème.
Un pro ,ireaux62, m'a fourni la solution (http://www.developpez.net/forums/f463/webmasters-developpement-web/mise-page-css/). La voici :

Après extraction des fichiers de Learning-Curve-Pro-fontfacekit.zip on obtient le dossier
web font. Je le copie dans le dossier css.

Le dossier web fonts contiens deux sous dossiers :
learningcurvedashedpro_regular_macroman et,
learningcurvepro_regular_macroman.
J'ignore la différence existant entre ces deux fichiers.

J'ouvre le second, learningcurvepro_regular_macroman. Il contient :

Dossier specimen-files
learningCurve_OT-demo.html
learningCurve_OT-webfont.eot
learningCurve_OT-webfont.svg
learningCurve_OT-webfont.ttf
learningCurve_OT-webfont.woff
stylesheet.css

Conseils
1 ) - Tu as un dossier nommé "css".
DANS ce dossier, mets les fichiers :
learningCurve_OT-webfont.eot
learningCurve_OT-webfont.svg
learningCurve_OT-webfont.ttf
learningCurve_OT-webfont.woff


2 ) - Inutile d'avoir 2 fichiers CSS style.css et stylesheet.css. UN SEUL suffit, avec tout dedans.
DANS ce fichier (au début, de préférence) :

style.css

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

3 ) - il ne reste plus qu'à utiliser la nouvelle font :


h1 { font-family:'learning_curve_proregular', 'Comic Sans', sans-serif; }

index.html

<head>
    <meta charset="utf-8">
    <title>Travail</title>
    <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="sympa.js"> </script>
</head>
<body>
 <h1>Le travail c'est la santé<h1>
  <p>Le reste du contenu n'existe pas: c'est une maquette</p>
 
</body>
</html>

Le problème est résolu.
Cordialement
Papy
Sujet clos
Aller à