CSS @ font-face - cosa significa "src: local ('☺')"?

Sto usando @font-faceper la prima volta e ho scaricato un font-kit da fontsquirrel

Il codice che consigliano di inserire nel mio CSS è:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

Ora, la faccina sorridente mi ha lasciato perplesso. Ma anche il numero di URL in src - perché raccomandano così tanti file e saranno inviati al browser quando viene visualizzata una pagina? C'è qualche danno nel rimuovere tutto tranne il .ttf?

se leggi le note nel generatore di font-face di font-squirrel, vedrai che era un gotcha di paul irish.

Ecco l'estratto del suo post sul blog :

E .. per quanto riguarda la @font-facesintassi

Ora raccomando la variazione di smiley antiproiettile rispetto alla sintassi originale antiproiettile.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Dal post antiproiettile:

Sì, è una faccina sorridente. Le specifiche OpenType indicano che qualsiasi carattere unicode a due byte non funzionerà affatto nel nome di un font su Mac, quindi ciò riduce la probabilità che qualcuno abbia effettivamente rilasciato un font con un tale nome.

Ci sono alcuni motivi per cui lo smiley è una soluzione migliore:

• Il software Webkit + Font Management può incasinare i riferimenti locali, come trasformare glifi in blocchi A.

• Su OS X, il software di gestione dei font può modificare le impostazioni di sistema per mostrare una finestra di dialogo quando si tenta di accedere a un font locale () accessibile al di fuori di Libreria / Font. Maggiori dettagli sul mio post antiproiettile. Font Explorer X è anche noto per incasinare altre cose in Firefox.

• Sebbene sia improbabile, potresti fare riferimento a un font local () che è completamente diverso da quello che pensi che sia. (Messaggio typophile su caratteri diversi, stesso nome) Per lo meno è un rischio e stai cedendo il controllo del tipo sia al browser che al computer host. Questo rischio potrebbe non valere il vantaggio di evitare il download del carattere.

Questi sono tutti problemi piuttosto interessanti, ma vale la pena considerare.

Il local (☺︎) è un hack css per deviare IE6-8 dal download di font che non può usare (può usare solo font in formato EOT).

Spiegazione: l'ultima proprietà src ha la precedenza nella cascata CSS, il che significa che il CSS verrà analizzato dal basso verso l'alto. Il locale (☺︎) farà in modo che IE salti l'src in fondo, senza sprecare la larghezza di banda scaricando i caratteri che non può usare, e piuttosto andare direttamente al carattere nel .eotformato (definito nella riga sopra nella tua domanda) che utilizzerà. Lo smile è solo per garantire che non ci sarà un font locale con quel nome (combinazione di caratteri).

Maggiori informazioni qui: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

@ font-face L'ultima proprietà src ha la precedenza nella cascata CSS, il che significa che il CSS verrà analizzato dal basso verso l'alto.