Est-il possible d'ajouter une police personnalisée sur le site Web sans utiliser d'images, Flash ou d'autres graphiques?
Par exemple, je travaillais sur un site web de mariage, et je trouvais beaucoup de belles polices pour ce sujet, mais je ne trouve pas la bonne façon d'ajouter cette police sur le serveur, et comment puis-je inclure cette police avec CSS dans le HTML? Est-ce possible de faire sans graphiques?
Cela pourrait être fait via CSS 2.0 et devrait fonctionner dans un navigateur basé sur WebKit. Cependant, je pense que ce n'est pas vraiment soutenu.
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
Vous pouvez ajouter des polices via Google Web Fonts.
Techniquement, les polices sont hébergées sur Google et vous lien dans l'en-tête HTML. Ensuite, vous pouvez les utiliser librement dans le CSS avec @font-face (lire à ce sujet).
Par exemple:
Dans la section <head>:
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
Puis dans le CSS:
h1 { font-family: 'Droid Sans', arial, serif; }
La solution semble assez fiable (même Smashing Magazine l'utilise pour un titre d'article.). Il y a, cependant, pas beaucoup de polices disponibles jusqu'à présent dans le Répertoire de Polices Google.
Le chemin à parcourir est à l'aide de @font-face CSS déclaration qui permet aux auteurs de spécifier en ligne polices de caractères pour l'affichage du texte sur leurs pages web. En permettant aux auteurs de fournir leurs propres polices @font-face élimine le besoin de dépendre d'un nombre limité de polices d'utilisateurs ont installé sur leurs ordinateurs.
Prendre un coup d'oeil au tableau suivant:
Comme vous pouvez le voir, il existe plusieurs formats que vous devez savoir sur principalement en raison de la compatibilité inter-navigateur. Le scénario dans les appareils mobiles n'est pas très différente.
1 - Complète la compatibilité du navigateur
C'est la méthode avec le plus grand soutien possible dès maintenant:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - la Plupart des navigateurs
Les choses sont en décalage fortement vers l'WOFF bien, vous pouvez probablement vous en sortir avec:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3-5 */
}
3 - les plus récentes des navigateurs
Ou même juste WOFF.
Vous pouvez ensuite l'utiliser comme ceci:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
C'est principalement ce que vous devez savoir à propos de la mise en œuvre de cette fonctionnalité. Si vous voulez la recherche de plus dans le sujet, je vous encourage à jeter un oeil à la suite de ressources. La plupart de ce que j'ai mis ici est extraite de la suite
Si par police non standard, vous voulez dire une police personnalisée d'un format standard, voici comment je le fais, et cela fonctionne pour tous les navigateurs que j'ai vérifiés jusqu'à présent:
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}
donc vous aurez juste besoin des polices ttf et eot. Certains outils disponibles en ligne peuvent faire la conversion.
Mais si vous voulez joindre une police dans un format non standard (bitmaps etc), je ne peux pas vous aider.
L'article font-face dans IE: Faire de Polices Web de Travail , dit-il fonctionne avec tous les trois principaux navigateurs.
Voici un exemple que j'ai obtenu: http://brendanjerwin.com/test_font.html
De plus, la discussion est dans l'Incorporation des Polices.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
