Réponses:
Oui, vous pouvez utiliser la fonctionnalité CSS nommée @ font-face. Il n'a été officiellement approuvé que dans 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 mettre le JUNEBUG.TFF au même emplacement que le fichier html.
J'ai téléchargé la police sur le site Web dafont.com :
urlest relatif à l'emplacement de votre fichier css .
Pour une prise en charge optimale du navigateur, votre code CSS doit 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, consultez l'article Utilisation de @ font-face sur CSS-tricks.com .
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 les polices à utiliser avec @ font-face:
Cufon fonctionnera également si vous ne voulez pas utiliser font-face, et il a une bonne documentation sur le site Web:
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
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 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 se trouver dans le dossier css avec la feuille de style. Après cela, ajoutez simplement le class = "junebug" à l'intérieur de n'importe quelle balise de votre html pour utiliser la police Junebug dans cet élément.
Si vous mettez le css dans la page Web réelle, ajoutez la balise style dans la tête du html comme:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>Et le style d'élément réel peut être inclus dans ce qui précède <style>et appelé par élément par classe ou id, ou vous pouvez simplement déclarer le style en ligne avec l'élément. Par élément, je veux dire <div>, <p>, <h1> ou tout autre élément dans le html qui doit 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 ressemblerait à ceci:
<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 n'est pas bon d'utiliser des styles en ligne est que les meilleures pratiques dictent que les styles doivent être conservés au même endroit afin que l'édition soit 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.
il existe un moyen simple de le faire: dans le fichier html, ajoutez:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />Remarque: vous mettez le nom du fichier .ttf que vous avez. puis allez dans votre fichier css et ajoutez:
h1 {
color: blue;
font-family: vermin vibes;
}Remarque: vous mettez le nom de la famille de polices de la police que vous avez.
Remarque: n'écrivez pas le nom de la famille de polices comme votre nom de police.ttf Exemple de nom: si votre nom font.ttf est: "vermin_vibes.ttf", votre famille de polices sera: "vermin vibes" la famille de polices ne contient pas de caractères spéciaux comme "-, _" ... etc, il ne peut contenir que des espaces.
font-faceCSS au lieu d'exiger un fichier ttf.