Comment installer une police personnalisée sur un site en HTML

Je ne suis pas à l'aide de flash ou php - et j'ai été invité à ajouter une police personnalisée à une simple mise en page HTML. "KG June Bug"

Je l'ai téléchargé localement - est-il un simple CSS astuce pour accomplir cette?

InformationsquelleAutor adam | 2011-11-01

246

Oui, vous pouvez utiliser la fonctionnalité CSS nommé @font-face.
Il a été officiellement approuvé en CSS3, mais en ont été proposées et mises en œuvre dans CSS2 et a été pris en charge dans IE pour un temps assez long.

Vous le déclarer 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 référence 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 vous avez juste besoin de mettre le JUNEBUG.La FFT dans le même emplacement que le fichier html.

J'ai téléchargé la police de la dafont.com site web:

http://www.dafont.com/junebug.font
- désolé si c'est des "devoirs" que serait le code ressembler si j'ai utilisé ce JUNEBUG police pour seulement le texte brut
- J'ai mis à jour la réponse. De Nice à la recherche de la police par la voie.
- Je ne savais pas qu'on pouvait le faire. Cela fonctionne dans d'autres navigateurs aussi?
- Fonctionne dans n'importe quel navigateur décent: webfonts.info/wiki/index.php?title=@font-face_browser_support
- Ne fonctionne pas pour moi, ma police est dans le même dossier que ma page php.
- chemin d'accès spécifié dans url est relative à l'emplacement de votre css dossier.
InformationsquelleAutor Nicolas Modrzyk
16

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

Voici quelques articles sur la façon dont il fonctionne:
- http://webdesignerwall.com/general/font-face-solutions-suggestions
- http://webdesignerwall.com/tutorials/css3-font-face-design-guide
Ici est la bonne syntaxe pour ajouter de la police à votre application:
- http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
Ici sont un couple de lieux à convertir les polices à utiliser avec @font-face:
Aussi cufon de travailler si vous ne souhaitez pas utiliser font-face, et il a une bonne documentation sur le site web:
- http://cufon.shoqolate.com/generate/
InformationsquelleAutor nheinrich

Pour la meilleure prise en charge du navigateur, votre CSS code 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'info, voir l'article Utilisation de @font-face à CSS-tricks.com.

InformationsquelleAutor John Slegers

Essayer cette

CSS:

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

HTML:

 <div class="FontMarket">KhonKaen Market</div>

vilis.org

InformationsquelleAutor siamwebsite.me

2

Si vous utilisez une feuille de style externe, le code pourrait ressembler à quelque chose comme ceci:
```
@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }
```
Et doit être enregistré dans un document distinct .fichier css (par exemple les styles.css). Si votre .le fichier css est dans un emplacement distinct de code de la page, le fichier de police devrait avoir le même chemin que la .fichier css, PAS la .html ou .php fichier de la page web. Ensuite, la page web a besoin de quelque chose comme:
```
<link rel="stylesheet" href="css/styles.css">
```
dans le <head> la section de votre page html. Dans cet exemple, le fichier de police doit être situé dans le répertoire css avec la feuille de style. Après cela, il suffit d'ajouter la class="junebug" à l'intérieur de toute balise html à utiliser Junebug de police au sein de cet élément.

Si vous êtes de mettre le css dans la page web, ajouter la feuille de style dans la balise head du html comme:
```
<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>
```
Et le réel de l'élément de style peut être soit inclus dans le <style> et appelé par élément en classe ou l'id, ou vous pouvez simplement déclarer le style inline avec l'élément. Par élément, je veux dire <div>, <p>, <h1> ou de tout autre élément dans le code html qui nécessite l'utilisation de la Junebug de police. Avec ces deux options, le fichier de police (Junebug.ttf) doivent être situés dans le même chemin que celui de la page html. De ces deux options, la meilleure pratique serait ressembler à:
```
<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 moins acceptable serait de:
```
<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 n'est pas bon d'utiliser des styles en ligne est la meilleure pratique dicte que les styles doivent être conservés en un seul endroit afin d'édition est pratique. C'est aussi la principale raison que je recommande d'utiliser la première option de l'utilisation de feuilles de style externes. J'espère que cette aide.

InformationsquelleAutor Richard Stitz
-1

il y a une façon simple de le faire:
dans le fichier html ajouter:
```
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
```
Remarque: vous mettez le nom de .ttf fichier que vous avez.
ensuite, allez à votre fichier css et d'ajouter:
```
h1 {
    color: blue;
    font-family: vermin vibes;
}
```
Remarque: vous mettez le nom de famille de polices de la police que vous avez.

Remarque: ne pas écrire à la police-nom de famille de votre police.ttf nom
exemple: si votre police.ttf nom est: "vermin_vibes.ttf" votre font-family sera: "la vermine vibes" famille de police ne contient pas de caractères spéciaux comme "-,_"...etc il ne peut contenir d'espaces.
- Vous devriez vraiment le définir comme un font-face dans le CSS au lieu d'exiger une ttf fichier.
- il n'est pas nécessaire de le faire, vous pouvez simplement le faire comme cela, j'ai toujours le faire dans les deux voies et deux œuvres
InformationsquelleAutor Abbass Sharara

Vous devez vous connecter pour publier un commentaire.