28111 sujets

CSS et mise en forme, CSS3

@font-face

Bonjour,
Je suis assez nul en css et je voudrais appliquer une police spéciale à une page html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet "href="style.css"/>
<title>Ma Page</title>
</head>

J'ai créé un fichier que j'ai appellé: style.css

@font-face {
        font-family: "OpenSans";
        src: url('OpenSans-Lignt.ttf');
}
@font-face {
        font-family: "OpenSans";
        font-style: italic;
        src: url('OpenSans-Italic.ttf');
}
@font-face {
        font-family: "OpenSans";
        font-weight: bold;
        src: url('OpenSans-Bold.ttf');

Les 3 fontes sont dans le dossiet où se trouvent mon fichier html et css

Sur le navigateur le texte apparaît toujours en times. Merci de m'aider.
Modérateur
Salut,

Au dela d'être bon en CSS ou pas, il suffit de lire un peu les exemples : 

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
}

body {
  font-family: "Bitstream Vera Serif Bold", serif;
}

https://developer.mozilla.org/fr/docs/Web/CSS/@font-face

@font-face permet de déclarer une font perso mais il faut ensuite attribuer la font au texte avec font-family sur l'élément que tu veux.
OK, merci pour l'exemple, mais dès que je retranscris le code CSS, comment le sauver ? Sous quel nom (.css) ?
Merci.
Administrateur
Alataj a écrit :
Et je n'obtiens toujours rien..... Le texte reste en simple Times.

Tu appliques bien la police sur le texte ?
On peut avoir un exemple (page ou code) ?
J'ai choisi une police sur un autre site
Voilà mon code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="http://fr.allfont.net/allfont.css?fonts=open-sans"
rel="stylesheet" type="text/css" />
<style type="text/css" media="screen"><!--font-family: 'Open Sans',
arial;--></style>
<title>Ma Page</title>
</head>Bonjour
Administrateur
Alataj a écrit :

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;
&lt;link href="http://fr.allfont.net/allfont.css?fonts=open-sans"
rel="stylesheet" type="text/css" /&gt;
&lt;style type="text/css" media="screen"&gt;&lt;!--font-family: 'Open Sans',
arial;--&gt;&lt;/style&gt;
&lt;title&gt;Ma Page&lt;/title&gt;
&lt;/head&gt;Bonjour

Si c'est bien ton code, je ne vois pas sur quelle balise (body, p, ...) tu pourrais appliquer ta police Smiley ohwell
Voilà la page avec plus de texte et la balise body:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

        <head>
                <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
                <meta name="generator" content="Adobe GoLive 6">
                <link href="http://fr.allfont.net/allfont.css?fonts=open-sans"
rel="stylesheet" type="text/css" />
                <style type="text/css" media="screen"><!--font-family: 'Open Sans',
arial;--></style>
                <title>Welcome to Adobe GoLive 6</title>
        </head>

        <body bgcolor="#ffffff">
                <div align="left">
                        <p><font size="4" color="#6c6c6c"
face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Principes
d'efficacit&eacute; qui seront d&eacute;velopp&eacute;s</font><font
size="3" color="#6c6c6c"
face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">:<br>
                                        Centr&eacute; sur l'objectifambitieux(ressort puissant de la
motivation)<br>


                                                                Compr&eacute;hensiondes &eacute;tats de performance
(&eacute;volution, progressionpermanente)<br>


                                                                Travail sp&eacute;cifique et individualis&eacute;: Emotions /
Confiance / Adaptation (souplesse) / Responsabilit&eacute; /
Ressources / Concentration<br>


                                                                Illustr&eacute; en permanence par des exemples issus de la
pratique de terrain avec des champions<br>


                                                                Au besoin, tordre le cou aux id&eacute;es re&ccedil;ues,
pens&eacute;es collectives et autres croyances limitantes<br>
                                        <br>
                                </font><font size="4" color="#6c6c6c"
face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Pr&eacute;requis</font><font
size="3" color="#6c6c6c"
face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">:<br>


                                                                Ma&icirc;triser la technique, donner le meilleur de
soi-m&ecirc;me pour atteindre son plein potentiel&#133; &ecirc;tre en
phase avec l&#146;objectif.<br>


                                                                Etre pr&ecirc;t &agrave; se remettre en cause, tout remettre
en cause&#133;<br>


                                                                L&#146;envie de faire mieux, de franchir une &eacute;tape
indispensable&#133;<br>
                                        <br>
                                </font><font size="4" color="#6c6c6c"
face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Curiosit&eacute;,
ouverture, humilit&eacute;</font></p>
                </div>
                <div align="center">
                        <p></p>
                </div>
        </body>

</html>
Sujet clos
Aller à