web-dev-qa-db-fra.com

Utilisation de polices .otf sur les navigateurs Web

Je travaille sur un site Web qui nécessite des essais de polices en ligne. Toutes mes polices sont .otf

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

Si non, quelles autres alternatives ai-je?

htmlcssfontsfont-face
380
Naruto

Vous pouvez implémenter votre police OTF 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 souhaitez prendre en charge une grande variété de navigateurs modernes , je vous recommande de passer aux types de police WOFF et TTF. . Le type WOFF est implémenté par tous les principaux navigateurs de bureau, tandis que le type TTF est une solution de secours 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 onlinefontconverter .

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

Si vous voulez prendre en charge presque tous les navigateurs encore disponibles (plus nécessaire à mon humble avis), vous devez ajouter quelques types de polices supplémentaires, par exemple:

@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 la raison pour laquelle tous ces types sont implémentés et leurs hacks here . Pour obtenir une vue détaillée des types de fichiers pris en charge par quels navigateurs, voir:

Support du navigateur @ font-face

support du navigateur EOT

Prise en charge du navigateur WOFF

Prise en charge du navigateur TTF

support du navigateur SVG-Fonts

j'espère que cela t'aides

666
choise

Parmi les exemples Répertoire de polices Google :

@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 avec plusieurs navigateurs .ttf, je crois que cela peut fonctionner avec .otf. ( Wikipedia dit que .otf est principalement rétro-compatible avec .ttf) Sinon, vous pouvez convertir le .otf en .ttf

Voici quelques bons sites:

41
kzh