Comment ajouter des polices non standard à un site Web?
Existe-t-il un moyen d’ajouter des polices personnalisées 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 polices Nice pour ce sujet, mais je ne trouve pas la bonne façon d’ajouter cette police sur le serveur, et comment puis-je l’inclure avec CSS dans le HTML? Est-ce possible de se passer de graphisme?
Cela pourrait être fait via CSS:
<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>
Il est pris en charge par tous les navigateurs classiques si vous utilisez des polices TrueType (TTF) ou le format de police Open Web (WOFF).
Vous pouvez ajouter des polices via Google Web Fonts .
Techniquement, les polices sont hébergées chez Google et vous les liez dans l'en-tête HTML. Ensuite, vous pouvez les utiliser librement dans CSS avec @font-face ( lisez à ce sujet ).
Par exemple:
Dans la section _<head>_:
_ <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
_Puis en CSS:
_h1 { font-family: 'Droid Sans', arial, serif; }
_La solution semble assez fiable (même Smashing Magazine l'utilise pour le titre d'un article. ). Il n’existe cependant pas autant de polices disponibles dans Répertoire de polices Google .
La solution consiste à utiliser la déclaration CSS @ font-face, qui permet aux auteurs de spécifier des polices en ligne pour afficher du texte sur leurs pages Web. En permettant aux auteurs de fournir leurs propres polices, @ font-face élimine le besoin de dépendre du nombre limité de polices installées par les utilisateurs sur leurs ordinateurs.
Regardez le tableau suivant:
Comme vous pouvez le constater, vous devez connaître plusieurs formats, principalement en raison de la compatibilité entre navigateurs. Le scénario dans les appareils mobiles n'est pas très différent.
Solutions:
1 - Compatibilité totale avec le navigateur
C'est la méthode avec le support le plus profond possible actuellement:
@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 du navigateur
Les choses sont se déplaçant fortement vers WOFF bien, alors vous pouvez probablement vous en tirer 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 - Seuls les derniers navigateurs
Ou même juste WOFF.
Vous l'utilisez ensuite comme ceci:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Références et lectures complémentaires:
C'est principalement ce que vous devez savoir sur la mise en œuvre de cette fonctionnalité. Si vous souhaitez approfondir vos recherches sur le sujet, je vous encourage à consulter les ressources suivantes. La plupart de ce que je mets ici est extrait de ce qui suit
Si par police non standard, vous entendez 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 */
}
vous aurez donc simplement besoin des polices ttf et eot. Certains outils disponibles en ligne peuvent effectuer la conversion.
Mais si vous souhaitez attacher une police dans un format non standard (bitmaps, etc.), je ne peux pas vous aider.
J'ai constaté que le moyen le plus simple d'avoir des polices non standard sur un site Web est d'utiliser sIFR
Cela implique l'utilisation d'un objet Flash contenant la police, mais il se dégrade agréablement en texte/police standard si Flash n'est pas installé.
Le style est défini dans votre CSS et JavaScript configure le remplacement Flash pour votre texte.
Edit: (Je recommande tout de même d'utiliser des images pour les polices non standard, car sIFR ajoute du temps à un projet et peut nécessiter une maintenance.)
L'article Font-face dans IE: faire fonctionner les polices Web indique qu'il fonctionne avec les trois principaux navigateurs.
Voici un exemple de travail: http://brendanjerwin.com/test_font.html
Plus de discussion est dans Incorporation de polices.
Typeface.js et Cufon sont deux autres options intéressantes. Ce sont des composants JavaScript qui rendent les données de police spéciales au format JSON (que vous pouvez convertir à partir des formats TrueType ou OpenType sur leurs sites Web) via le nouvel élément <canvas> dans tous les cas. navigateurs plus récents, sauf Internet Explorer et via VML dans Internet Explorer.
Le principal problème avec les deux (à partir de maintenant) est que la sélection de texte ne fonctionne pas ou du moins ne fonctionne que très maladroitement.
Pourtant, c'est très gentil pour les gros titres. Corps du texte ... Je ne sais pas.
Et c'est étonnamment rapide.
Ou vous pouvez essayer sIFR . Je sais qu'il utilise Flash, mais seulement s'il est disponible. Si Flash n'est pas disponible, il affiche le texte d'origine dans sa police d'origine (CSS).
Existe-t-il un moyen d'ajouter des polices personnalisées sur un site Web sans utiliser ... Flash?
Bien sûr, utilisez Silverlight .
La technique recommandée par le W3C à cet effet est appelée "incorporation" et est bien décrite par les trois articles suivants: Incorporation de polices . Dans mes expériences limitées, j'ai trouvé ce processus sujet aux erreurs et je n'ai réussi que très rarement à le faire fonctionner dans un environnement multi-navigateurs.
Safari et Internet Explorer prennent tous deux en charge la règle CSS @ font-face, mais ils prennent en charge deux types de polices incorporées différents. Firefox envisage de prendre en charge le même type que Apple dans peu de temps. SVG peut intégrer des polices mais n'est pas encore largement supporté (sans plugin).
Je pense que la solution la plus portable que j'ai vue consiste à utiliser une fonction JavaScript pour remplacer les en-têtes, etc., avec une image générée et mise en cache sur le serveur avec la police de votre choix. trucs dans Photoshop.
Si vous utilisez ASP.NET, il est très facile de générer des polices basées sur une image sans avoir à installer (par exemple, les polices ajoutées à la base de polices installée) sur le serveur en utilisant:
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
puis en dessinant avec cette police sur un Graphics.
Il est également possible d’utiliser des polices WOFF - exemple ici
@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
}
Il vous suffit simplement de fournir le lien vers la police réelle comme celle-ci et vous serez prêt à partir
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>
<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
Il semble que cela ne fonctionne que dans Internet Explorer, mais une recherche rapide dans Google pour "polices intégrées" génère http://www.spoono.com/html/tutorials/tutorial.php?id = 19
Si vous voulez rester agnostique (et vous devriez le faire!), Vous devrez utiliser des images ou simplement utiliser une police standard.
J'ai fait un peu de recherche et déterré remplacement de texte dynamique (publié le 15/06/2004).
Cette technique utilise des images, mais elle semble être "mains libres". Vous écrivez votre texte et vous laissez quelques scripts automatisés effectuer la recherche et le remplacement automatisés sur la page à la volée.
Il a quelques limitations, mais c'est probablement l'un des choix les plus faciles (et plus compatible avec les navigateurs) que tout le reste que j'ai vu.
Typeface.js JavaScript Way:
Avec typeface.js, vous pouvez incorporer des polices personnalisées dans vos pages Web afin que vous n'ayez pas à rendre le texte en images.
Au lieu de créer des images ou d’utiliser Flash pour simplement afficher le texte graphique de votre site dans la police de votre choix, vous pouvez utiliser typeface.js et écrire en HTML et en CSS simples, comme si la police avait été installée localement.
Monotype a récemment publié un grand nombre de ses polices, ainsi qu'un nouveau système pour les utiliser sur vos pages Web: http://www.webfonts.fonts.com/
Voir l'article 50 outils de conception utiles pour une belle typographie Web pour d'autres méthodes.
J'ai seulement utilisé Cufon . Je l’ai trouvé fiable et très facile à utiliser, je l’ai donc persévéré.
Si vous avez un fichier de votre police, vous devrez alors ajouter d'autres formats de cette police pour les autres navigateurs.
Pour cela, j'utilise un générateur de polices comme Fontsquirrel il fournit tous les formats de police et son CSS @ font-face, il vous suffit de le glisser-déposer dans votre fichier CSS.
Je crains que les graphiques ne soient votre seule option dans ce cas.