CSS @ font-face - Was bedeutet "src: local ('☺')"?

Ich benutze @font-facezum ersten Mal und habe ein Font-Kit von fontsquirrel heruntergeladen

Der Code, den sie zum Einfügen in mein CSS empfehlen, lautet:

@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');
}

Jetzt hat mich das Smiley-Ding verblüfft. Aber auch die Anzahl der URLs im src - warum empfehlen sie so viele Dateien und werden sie alle an den Browser gesendet, wenn eine Seite gerendert wird? Kann es schaden, alle außer der .ttf zu entfernen?

Wenn Sie die Notizen im Font-Face-Generator von Font-Squirrel lesen, werden Sie feststellen, dass es sich um eine Gotcha von Paul Irish handelt.

Hier ist der Auszug aus seinem Blogbeitrag :

Und .. bezüglich der @font-faceSyntax

Ich empfehle jetzt die kugelsichere Smiley-Variante gegenüber der ursprünglichen kugelsicheren Syntax.

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

Aus dem kugelsicheren Pfosten:

Ja, es ist ein Smiley. Die OpenType-Spezifikation gibt an, dass Zwei-Byte-Unicode-Zeichen in einem Schriftnamen auf einem Mac überhaupt nicht funktionieren, sodass die Wahrscheinlichkeit verringert wird, dass jemand tatsächlich eine Schriftart mit einem solchen Namen veröffentlicht.

Es gibt einige Gründe, warum Smiley eine bessere Lösung ist:

• Die Software Webkit + Font Management kann lokale Referenzen durcheinander bringen, z. B. Glyphen in A-Blöcke verwandeln.

• Unter OS X kann die Schriftverwaltungssoftware die Systemeinstellungen so ändern, dass ein Dialogfeld angezeigt wird, wenn versucht wird, auf eine lokale () Schriftart zuzugreifen, auf die außerhalb von Library / Fonts zugegriffen werden kann. Mehr Details zu meinem kugelsicheren Beitrag. Es ist auch bekannt, dass Font Explorer X andere Dinge in Firefox durcheinander bringt.

• Obwohl es unwahrscheinlich ist, können Sie auf eine lokale () Schriftart verweisen, die völlig anders ist als Sie denken. (Typophiler Beitrag auf verschiedenen Schriftarten, gleicher Name) Zumindest ist dies ein Risiko, und Sie geben die Kontrolle über den Typ sowohl an den Browser als auch an den Host-Computer ab. Dieses Risiko ist möglicherweise nicht den Vorteil wert, das Herunterladen von Schriftarten zu vermeiden.

Dies sind alles ziemlich Randfälle, aber es lohnt sich, darüber nachzudenken.

Das lokale (☺︎) ist ein CSS-Hack, um IE6-8 vom Herunterladen von nicht verwendeten Schriftarten abzulenken (es können nur Schriftarten im EOT-Format verwendet werden).

Erklärt: Die letzte src-Eigenschaft hat in der CSS-Kaskade Vorrang, dh das CSS wird von unten nach oben analysiert. Das lokale (☺︎) veranlasst den IE, den src unten zu überspringen, ohne Bandbreite beim Herunterladen von Schriftarten zu verschwenden, die er nicht verwenden kann, und geht stattdessen direkt zu der Schriftart im .eotFormat (definiert in der obigen Zeile in Ihrer Frage), das er verwenden wird. Der Smiley soll nur sicherstellen, dass es keine lokale Schriftart mit diesem Namen gibt (Zeichenkombination).

Lesen Sie hier mehr: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

@ font-face Die letzte src-Eigenschaft hat in der CSS-Kaskade Vorrang, dh das CSS wird von unten nach oben analysiert.