Utilisation des polices .otf sur les navigateurs Web

440

Je travaille sur un site Web qui nécessite des essais de polices en ligne, les polices que j'ai sont toutes .otf

Existe-t-il un moyen d'incorporer les polices et de les faire fonctionner sur tous les navigateurs?

Sinon, quelles autres alternatives ai-je?

html css fonts font-face Naruto
la source
1
Peut-être que javascript devrait être supprimé de la liste des balises ici?
kzh

Réponses:

756

Vous pouvez implémenter votre OTFpolice en utilisant @ font-face comme:

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

Toutefois , si vous voulez soutenir une grande variété de navigateurs modernes , je vous recommande de passer à WOFFet TTFtypes de polices. WOFFLe type est implémenté par tous les principaux navigateurs de bureau, tandis que le TTFtype est un remplacement pour les anciens navigateurs Safari, Android et iOS. Si votre police est une police gratuite, vous pouvez convertir votre police en utilisant par exemple un convertisseur de police en ligne .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

Si vous souhaitez prendre en charge presque tous les navigateurs qui sont toujours disponibles (ce n'est plus nécessaire à mon humble avis), vous devez ajouter d'autres types de polices comme:

@font-face {
    font-family: GraublauWeb;
    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 */
}

Vous pouvez en savoir plus sur les raisons pour lesquelles tous ces types sont implémentés et leurs hacks ici . Pour obtenir une vue détaillée des types de fichiers pris en charge par les navigateurs, voir:

Prise en charge du navigateur @ font-face

Prise en charge du navigateur EOT

Prise en charge du navigateur WOFF

Prise en charge du navigateur TTF

Prise en charge du navigateur de polices SVG

J'espère que cela t'aides

choix
la source
1
Cela fonctionnait parfaitement sur presque tous les navigateurs ... Le seul navigateur qui ne fonctionnait pas est FireFox Linux ... Une suggestion pour celui-là ??
Naruto
3
Notez que si vous l'hébergez sur un serveur Windows, vous devez ajouter le type de fichier .otf en tant que type de fichier valide et servi. La seule façon de voir que c'est le problème est de suivre le lien vers la police (erreur 404 si c'est le cas). Vous pouvez renommer temporairement .ttf ou même .html pour les tests. La seule police Web prise en charge par IE est le format WOFF. (Non, je n'en ai jamais entendu parler non plus!)
Henrik Erlandsson
Hé, que diriez-vous de la performance de ce type de police? Est-ce bien? Ou autre, c'est mieux?
Anggie Aziz
Y a-t-il des guillemets ( ") manquants dans les exemples de code?
steffen
2
On dirait que l'otf devrait fonctionner presque partout maintenant caniuse.com/#search=otf
Stephen
49

À partir des exemples de Google Font Directory :

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Cela fonctionne sur plusieurs navigateurs avec .ttf, je pense que cela peut fonctionner avec .otf. ( Wikipedia dit que .otf est principalement rétrocompatible avec .ttf) Sinon, vous pouvez convertir le .otf en .ttf

Voici quelques bons sites:

kzh
la source