web-dev-qa-db-fra.com

Comment installer une police personnalisée sur un site HTML

Je n'utilise ni flash ni php - et on m'a demandé d'ajouter une police personnalisée à une simple mise en page HTML. "KG June Bug"

Je l'ai téléchargé localement - existe-t-il un truc simple en CSS pour accomplir cela?

htmlcssfontswebfonts
140
adam

Oui, vous pouvez utiliser la fonctionnalité CSS nommée @ font-face. Il n'a été officiellement approuvé que par CSS3, mais a été proposé et implémenté dans CSS2 et a été pris en charge dans IE pendant assez longtemps.

Vous le déclarez dans le CSS comme ceci:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

Ensuite, vous pouvez simplement le référencer comme les autres polices standard:

 h3 { font-family: Delicious, sans-serif; }

Donc, dans ce cas,

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

Et il vous suffit de placer le fichier JUNEBUG.TFF au même emplacement que le fichier html.

J'ai téléchargé la police à partir du site Web dafont.com :

http://www.dafont.com/junebug.font

247
Nicolas Modrzyk

Vous pouvez utiliser @ font-face dans la plupart des navigateurs modernes.

Voici quelques articles sur son fonctionnement:

Voici une bonne syntaxe pour ajouter la police à votre application:

Voici quelques endroits pour convertir des polices à utiliser avec @ font-face:

Cufon fonctionnera également si vous ne souhaitez pas utiliser font-face, et sa documentation est satisfaisante sur le site Web:

16
nheinrich

Pour un meilleur support du navigateur, votre code CSS devrait ressembler à ceci:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Pour plus d'informations, voir l'article Utilisation de @ font-face à CSS-tricks.com .

14
John Slegers

Essaye ça

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}
 <div class="FontMarket">KhonKaen Market</div>

vilis.org

7
siamwebsite.me

Si vous utilisez une feuille de style externe, le code pourrait ressembler à ceci:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

Et devrait être enregistré dans un fichier .css séparé (par exemple, styles.css). Si votre fichier .css se trouve dans un emplacement distinct du code de la page, le fichier de police réel doit avoir le même chemin que le fichier .css, PAS le fichier de page Web .html ou .php. Ensuite, la page Web a besoin de quelque chose comme:

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

dans la section <head> de votre page html. Dans cet exemple, le fichier de police doit être situé dans le dossier css avec la feuille de style. Après cela, ajoutez simplement class = "junebug" dans n’importe quelle balise de votre code HTML pour utiliser la police Junebug dans cet élément.

Si vous mettez le css dans la page Web réelle, ajoutez la balise de style dans l'en-tête du code HTML, comme suit:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

Et le style d'élément réel peut soit être inclus dans le <style> ci-dessus et être appelé élément par classe ou id, ou vous pouvez simplement déclarer le style en ligne avec l'élément. Par élément, j'entends <div>, <p>, <h1> ou tout autre élément du code HTML devant utiliser la police Junebug. Avec ces deux options, le fichier de police (Junebug.ttf) doit être situé dans le même chemin que la page html. Parmi ces deux options, la meilleure pratique serait la suivante:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

et

<h1 class="junebug">This is Junebug</h1>

Et le moyen le moins acceptable serait:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

et

<h1 style="font-family: Junebug;">This is Junebug</h1>

La raison pour laquelle il est déconseillé d’utiliser des styles en ligne est que la meilleure pratique en vigueur consiste à conserver tous les styles au même endroit, ce qui rend l’édition pratique. C'est également la raison principale pour laquelle je recommande d'utiliser la toute première option consistant à utiliser des feuilles de style externes. J'espère que ça aide.

2
Richard Stitz