Comment append une police non standard à un site Web?

Y a-t-il un moyen d’append des fonts personnalisées sur le site Web sans utiliser d’images, de Flash ou d’autres graphiques?

Par exemple, je travaillais sur un site Web de mariage, et je trouvais beaucoup de belles fonts pour ce sujet, mais je ne trouve pas la bonne façon d’append cette police sur le serveur, et comment inclure cette police avec CSS dans le HTML? Est-ce possible de se passer de graphiques?

Cela pourrait être fait via CSS:

  

Hello world!

Il est pris en charge pour tous les navigateurs classiques si vous utilisez TrueType-Fonts (TTF) ou le format de police Web Open (WOFF).

Vous pouvez append des fonts via Google Web Fonts .

Techniquement, les fonts sont hébergées chez Google et vous les liez dans l’en-tête HTML. Ensuite, vous pouvez les utiliser librement en CSS avec @font-face ( lisez-le ).

Par exemple:

Dans la section :

   

Puis en 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 n’ya cependant pas beaucoup de fonts disponibles jusqu’à présent dans Google Font Directory .

La méthode à suivre consiste à utiliser la déclaration CSS @ font-face qui permet aux auteurs de spécifier des fonts en ligne pour afficher du texte sur leurs pages Web. En permettant aux auteurs de fournir leurs propres fonts, @ font-face élimine le besoin de dépendre du nombre limité de fonts installées par les utilisateurs sur leurs ordinateurs.

Jetez un coup d’oeil au tableau suivant:

entrer la description de l'image ici

Comme vous pouvez le constater, il existe plusieurs formats que vous devez connaître, principalement en raison de la compatibilité entre les navigateurs. Le scénario dans les appareils mobiles n’est pas très différent.

Solutions:

1 – Compatibilité totale du navigateur

C’est la méthode avec le support le plus profond possible en ce moment:

 @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 évoluent fortement vers WOFF , vous pouvez donc 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 simplement 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 faire plus de 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

  • Utilisation de la police de caractères (très recommandé)
  • Bulletproof @ syntaxe de font-face
  • Puis-je utiliser les fonts web @ font-face?
  • Comment archiver le support Cross-Browser @ font-face
  • @ font-face sur le réseau de développeurs CSS Mozilla

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’ici:

 @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 besoin des fonts 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 trouvé que le moyen le plus simple d’avoir des fonts non standard sur un site Web est d’utiliser sIFR

Il implique l’utilisation d’un object Flash contenant la police, mais il se dégrade facilement en texte / police standard si Flash n’est pas installé.

Le style est défini dans votre CSS et JavaScript configure le remplacement Flash de votre texte.

Edit: (Je recommande toujours d’utiliser des images pour des fonts non standard car sIFR ajoute du temps à un projet et peut nécessiter une maintenance).

L’article Font-face dans IE: Création de fonts Web Le travail 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 les fonts d’incorporation .

Typeface.js et Cufon sont deux autres options intéressantes. Ce sont des composants JavaScript qui rendent des données de police spéciales au format JSON (que vous pouvez convertir à partir de formats TrueType ou OpenType sur leurs sites Web) via le nouvel élément dans tous les nouveaux navigateurs, sauf Internet Explorer et 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 au moins ne fonctionne que de manière assez maladroite.

C’est quand même très bien 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).

Est-il possible d’append une police personnalisée sur le 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écrite par les trois articles suivants: Incorporation de fonts . Dans mes expériences limitées, j’ai trouvé que ce processus était sujet aux erreurs et qu’il avait peu de succès pour 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 police incorporés différents. Firefox prévoit de prendre en charge le même type que Apple dans un avenir proche. SVG peut intégrer des fonts mais n’est pas encore largement pris en charge (sans plug-in).

Je pense que la solution la plus portable que j’ai vue est d’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 votre police de choix. des trucs dans Photoshop.

Si vous utilisez ASP.NET, il est très facile de générer des fonts basées sur des images sans avoir à installer (comme pour l’ajout à la base de fonts installée) des fonts sur le serveur en utilisant:

 PrivateFontCollection pfont = new PrivateFontCollection(); pfont.AddFontFile(filename); FontFamily ff = pfont.Families[0]; 

puis dessiner avec cette police sur un Graphics .

Il semble que cela ne fonctionne que dans Internet Explorer, mais une recherche rapide sur Google pour “les fonts incorporées HTML” donne http://www.spoono.com/html/tutorials/tutorial.php?id=19

Si vous souhaitez restr indépendant de la plate-forme (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éniché Dynamic Text Replacement (publié le 15 juin 2004).

Cette technique utilise des images, mais elle semble être “mains libres”. Vous écrivez votre texte, et vous laissez quelques scripts automatisés faire automatiquement la recherche et le remplacement sur la page pour vous.

Il a quelques limitations, mais c’est probablement l’un des choix les plus faciles (et plus compatibles avec les navigateurs) que tout le rest que j’ai vu.

Il est également possible d’utiliser les fonts 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 suffit simplement de fournir le lien vers la police réelle comme celle-ci et vous serez prêt à partir

        

Montserrat

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Typeface.js JavaScript Way:

Avec typeface.js, vous pouvez intégrer des fonts personnalisées dans vos pages Web afin de ne pas avoir à rendre du texte aux images.

Au lieu de créer des images ou d’utiliser Flash uniquement pour afficher le texte graphique de votre site dans la police souhaitée, vous pouvez utiliser typeface.js et écrire en HTML et CSS, comme si la police était installée localement.

http://typeface.neocracy.org/

Monotype a récemment sorti un grand nombre de ses fonts avec 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.

Je n’ai utilisé que Cufon . Je l’ai trouvé fiable et très facile à utiliser, donc je suis resté avec.

Si vous avez un fichier de votre police, vous devrez append d’autres formats de cette police pour les autres navigateurs.

Pour cela, j’utilise un générateur de fonts tel que Fontsquirrel qui fournit tous les formats de fonts et son CSS @ font-face. Il vous suffit de le faire glisser dans votre fichier CSS.

J’ai bien peur que les graphiques soient votre seule option dans ce cas.