CSS @ font-face - apa arti "src: local ('☺')"?

Saya menggunakan @font-faceuntuk pertama kalinya dan mengunduh font-kit dari fontsquirrel

Kode yang mereka sarankan untuk dimasukkan ke dalam CSS saya adalah:

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

Sekarang, wajah yang tersenyum membuatku bingung. Tetapi demikian juga jumlah url dalam src - mengapa mereka merekomendasikan begitu banyak file dan akankah semuanya dikirim ke browser ketika halaman dirender? Apakah ada salahnya menghapus semua kecuali .ttf?

jika Anda membaca catatan di generator font-tupai font-face, Anda akan melihat bahwa itu adalah gotcha oleh paul irish.

Berikut kutipan dari posting blognya :

Dan .. tentang @font-facesintaks

Saya sekarang merekomendasikan variasi smiley antipeluru di atas sintaksis antipeluru asli.

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

Dari pos antipeluru:

Ya, itu adalah wajah yang tersenyum. Spesifikasi OpenType menunjukkan karakter unicode dua byte tidak akan berfungsi dalam nama font pada Mac sama sekali, sehingga mengurangi kemungkinan seseorang benar-benar merilis font dengan nama seperti itu.

Ada beberapa alasan mengapa smiley adalah solusi yang lebih baik:

• Perangkat lunak Webkit + Font Management dapat mengacaukan referensi lokal, seperti mengubah mesin terbang menjadi blok A.

• Pada OS X, perangkat lunak Manajemen Font dapat mengubah pengaturan sistem untuk menampilkan dialog ketika mencoba mengakses font lokal () yang dapat diakses di luar Library / Fonts. Lebih detail di posting antipeluru saya. Font Explorer X juga dikenal mengacaukan hal-hal lain di Firefox.

• Meskipun tidak mungkin, Anda dapat mereferensikan font lokal () yang sama sekali berbeda dari yang Anda pikirkan. (Posting Typophile pada font yang berbeda, nama yang sama) Paling tidak itu risiko, dan Anda menyerahkan kontrol jenis untuk kedua browser dan mesin host. Risiko ini mungkin tidak sebanding dengan manfaat menghindari pengunduhan font.

Ini semua adalah masalah tepi yang cantik, tapi patut dipertimbangkan.

Lokal (☺︎) adalah hack css untuk mengalihkan IE6-8 dari mengunduh font yang tidak dapat digunakan (itu hanya dapat menggunakan font dalam format EOT).

Dijelaskan: Properti src terakhir diutamakan dalam cascade CSS, yang berarti bahwa CSS akan diurai dari bawah ke atas. Lokal (☺︎) akan membuat IE melewati src di bagian bawah, tanpa membuang bandwidth untuk mengunduh font yang tidak dapat digunakan, dan langsung menuju ke font dalam .eotformat (didefinisikan pada baris di atas dalam pertanyaan Anda) yang akan digunakan. Smiley hanya untuk memastikan tidak akan ada font lokal dengan nama itu (kombinasi karakter).

Baca lebih lanjut di sini: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

@ font-face Properti src terakhir diutamakan dalam cascade CSS, artinya CSS akan diuraikan dari bawah ke atas.