web-dev-qa-db-fra.com

@ font-face url pointant vers un fichier local

J'ai besoin d'inclure une police (OpenSymbol) dans un fichier html et le fichier de police se trouve dans un dossier local (je connais le chemin absolu exact vers celui-ci). Si j'utilise @ font-face comme ceci:

@font-face {
  font-family: "OpenSymbol";
  src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}

Il fonctionne dans Chrome, Opera et Safari, mais pas dans Firefox ni IE9. L'autre utilisation de la police @ fonctionne parfaitement dans tous les navigateurs.

Btw, dans Chrome, je reçois un avertissement:

Resource interpreted as Font but transferred with MIME type application/octet-stream

Que puis-je faire pour inclure proprement une police stockée localement qui n'est pas installée sur le système d'exploitation?

Modifier:

J'ai découvert que la liste des différentes URL ne semble pas fonctionner! Chrome charge la police si je mets le [...].ttf url en premier lieu, mais pas si c'est ailleurs!

2e édition:

Je l'ai fait fonctionner dans tous les navigateurs sauf Firefox:

@font-face { 
  font-family: 'OpenSymbol';
  src: url('file:<path>/openSymbol.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face { 
  font-family: 'OpenSymbolEOT';
  src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
...

puis

.element {
  font-family: OpenType, OpenTypeEOT, [...];
}

Quoi qu'il en soit, cela fonctionne dans IE mais pas dans Eclipse, qui utilise le moteur de rendu d'IE ... o.O

Btw, Firefox a des problèmes à cause de problèmes de sécurité: voir ici

htmlcssfontsfont-face
29
Cedric Reichenbach

Vous n'avez besoin que d'un fichier de police au format de police Web ouvert. Allez sur http://www.fontconverter.org pour convertir votre OpenSymbol.tff to OpenSymbol.woff. Je suis un développeur multiplateforme et j'ai testé cela fonctionne bien sur:

  1. Safari 10.1 et Firefox 52.0.2 sur macOS 10.12.4 (iMac)
  2. Internet Explorer 11.0 et Firefox 52.0.1 et Google Chrome 52.0 et Opera 53.0 sur Windows 7 (PC)
  3. Safari sur iOS 10.3.1 (iPhone)
  4. Chrome 57.0 et Asus Browser 2.0.3 sur Android 5.0.2 (tablette Asus)

Cela va dans le CSS:

/* Add the decaration on top */
@font-face { 
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */ 
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..

Pas besoin de s'embêter avec les fichiers de polices Embedded OpenType (EOT), car ils ne sont nécessaires que pour IE9 (2011) et IE10 (2012). Pas besoin de s'embêter avec les polices SVG (Scalable Vector Graphics), car elles ne sont plus nécessaires depuis iOS 5.0

Depuis 2012, Web Open Font Format (WOFF) est entièrement pris en charge par tous les navigateurs connus. Les polices Truetype (TTF) sont utilisées localement sur iMac et PC, et peuvent être utilisées localement sur Android et iPhone également. C'est pourquoi les développeurs Web font souvent cette erreur, en utilisant TTF au lieu de WOFF pour un site.

9
Geert Jan

Selon un exemple de page de polices de Font Squirrel, les deux IE 9 et Firefox exigent que les fichiers de polices soient servis à partir du même domaine que la page dans laquelle ils sont chargés. Donc avec @ font-face, votre la seule option consiste à rechercher le ou les fichiers de police que vous essayez d'utiliser et à les télécharger sur le site, puis à utiliser un code similaire à celui-ci:

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

Tiré de http://www.fontspring.com/blog/f Further-hardening-of-the-bulletproof-syntax

EDIT: Une dernière chose de la page Font Squirrel, si vous utilisez un serveur IIS, les types de fichiers doivent être ajoutés à la liste des types MIME.

3
Greg Rozmarynowycz

Il se peut que le navigateur ne prenne tout simplement pas en charge le fichier .ttf. Pensez à travailler avec fontsquirrel , il générera tous les fichiers requis (.ttf, .woff, .svg, .eot) et css pour vous, et fonctionne dans tous les navigateurs. Je l'utilise tout le temps...

2
Pevara