Question Comment ajouter une police non standard à un site Web?


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 inclure cette police avec CSS dans le HTML? Est-ce possible de faire sans graphiques?


451
2017-09-20 11:26


origine


Réponses:


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>

C'est supporté pour tous les navigateurs standards si vous utilisez TrueType-Fonts (TTF) ou Web Open Font Format (WOFF).


435
2018-06-28 07:08



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 en 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 Smashing Magazine l'utilise pour un titre d'article.). Il y a, cependant, pas beaucoup de polices disponibles jusqu'à présent dans Google Font Directory.


100
2018-03-30 01:00



Le chemin à parcourir est d'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.

Jetez un coup d'oeil au tableau suivant:

enter image description here 

Comme vous pouvez le voir, il existe plusieurs formats que vous devez savoir 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 sont se déplaçant fortement vers WOFF Cependant, 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 - 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 autres lectures:

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


66
2017-09-12 15:30



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'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 */
}

donc vous aurez juste besoin des polices ttf et eot. Certains outils disponibles en ligne peuvent effectuer la conversion.

Mais si vous voulez joindre une police dans un format non standard (bitmaps etc), je ne peux pas vous aider.


16
2017-09-20 11:35



J'ai trouvé 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 qui contient la police, mais il se dégrade bien avec le texte / la police standard si Flash n'est pas installé.

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

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


11
2018-02-25 22:56



L'article Font-face dans IE: Faire fonctionner les polices Web dit qu'il fonctionne avec les trois principaux navigateurs.

Voici un exemple que j'ai travaillé: http://brendanjerwin.com/test_font.html

Plus de discussion est dans Incorporation de polices.


10
2018-05-11 16:59



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 Vrai type ou Type ouvert formats sur leurs sites web) via le nouvel élément <canvas> dans tous les nouveaux navigateurs sauf Internet Explorer et via VML dans Internet Explorer.

Le principal problème avec les deux (à partir de maintenant) est que la sélection du texte ne fonctionne pas ou au moins ne fonctionne que très maladroitement.

C'est quand même très bien pour les gros titres. Corps du texte ... je ne sais pas.

Et c'est étonnamment rapide.


10
2017-09-20 11:33



Ou vous pourriez essayer sIFR. Je sais qu'il utilise Flash, mais seulement si disponible. Si Flash n'est pas disponible, il affiche le texte original dans sa police d'origine (CSS).


8
2017-09-20 11:40