Comment ajouter des polices non standard à un site Web?
https://stackoverflow.com/questions/107936
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Existe-t-il un moyen d'ajouter des polices personnalisées sur le site Web sans utiliser d'images, Flash ou d'autres autres graphiques?
Par exemple, je travaillais sur un site Web de mariage et je trouvais beaucoup de polices de caractères intéressantes 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 police avec CSS dans le HTML? Est-ce possible de se passer de graphisme?
La solution
Ceci 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 TrueType- Polices de caractères (TTF) ou Web Open Font Format (WOFF).
Autres conseils
Vous pouvez ajouter des polices via les polices Web Google .
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 ( à 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 en CSS:
h1 { font-family: 'Droid Sans', arial, serif; }
La solution semble assez fiable (même le magazine Smashing l'utilise pour le titre d'un article. ). Toutefois, le répertoire de polices de Google ne contient pas beaucoup de polices disponibles.
Pour ce faire, utilisez 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.
Consultez 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 à l'heure actuelle:
@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
Cependant, les sont en train de basculer fortement vers WOFF , de sorte que vous pouvez probablement vous en sortir:
@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 navigateurs les plus récents
Ou même simplement WOFF.
Vous l'utilisez ensuite comme ceci:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Références et lectures supplé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 vous utilisez une police non standard, vous voulez parler d'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 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.
Modifier: (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 que cela fonctionne avec les trois principaux navigateurs.
Voici un exemple sur lequel je travaille: http://brendanjerwin.com/test_font.html
De plus amples discussions sont disponibles 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 de TrueType ou formats OpenType sur leurs sites Web) via le nouveau < canvas > ; élément dans tous les nouveaux navigateurs sauf Internet & nbsp; Explorer et via VML dans Internet nbsp; 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 intéressant pour les gros titres. Corps du texte ... Je ne sais pas.
Et c'est étonnamment rapide.
Vous pouvez également 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 est appelée & "incorporation &"; et est bien décrit par les trois articles ici: Incorporation de polices . Au cours de 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 d’Apple d’ici peu. 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., par une image générée et mise en cache sur le serveur avec la police de votre choix. t avoir à farfouiller 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, l'ajout à la base de polices installée) sur le serveur à l'aide de:
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
puis en dessinant avec cette police sur un Graphics.
Il semble que cela ne fonctionne que dans Internet Explorer, mais une recherche Google rapide pour & "; polices HTML incorporées &"; rendements http://www.spoono.com/html/tutorials/tutorial .php? id = 19
Si vous souhaitez rester indépendant de la plate-forme (et vous devriez le faire!), vous devrez utiliser des images ou utiliser une police standard.
J'ai effectué quelques recherches et découvert Remplacement de texte dynamique (publié le 2004-06-15).
Cette technique utilise des images, mais il semble que ce soit & "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.
Il est également possible d'utiliser les 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>
Typeface.js JavaScript Way:
Avec typeface.js, vous pouvez intégrer des paramètres personnalisés. polices dans vos pages Web afin que vous ne le fassiez pas rendre le texte en images
Au lieu de créer des images ou d’utiliser Flash juste pour montrer le graphique de votre site texte dans la police que vous voulez, vous pouvez utiliser typeface.js et écrire en HTML brut et CSS, comme si vos visiteurs avaient la police 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 utile Outils de conception d'une belle typographie Web pour des méthodes alternatives.
J'ai uniquement 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.
À cette fin, j'utilise un générateur de polices, comme Fontsquirrel , qui fournit tous les formats de police < !> amp; Son CSS @ font-face, il vous suffit de faire glisser & amp; déposez-le dans votre fichier CSS.
Je crains que les graphiques ne soient votre seule option dans ce cas.
