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

133

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?

css font-face stephenmurdoch
sumber

Jawaban:

94

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.

berkarat
sumber
12
terima kasih banyak ☺ sudah jelas sekarang - Saya baru saja menemukan artikel ini di nicewebtype.com yang menjawab semua pertanyaan saya yang lain juga
stephenmurdoch
9
jadi, pada dasarnya, bagian lokal dari kode itu mengatakan "font ini secara lokal dikenal sebagai X", dan kami menggunakan smiley untuk mencegah browser dari kemungkinan menggunakan font yang salah dengan nama yang sama (untuk alasan yang disebutkan di atas). bagus :)
abelito
3
Apakah Anda benar-benar membutuhkan local()pernyataan? Apakah itu berlebihan? Bukankah seharusnya browser menggunakan yang pertama url()tanpa itu?
Simon East
Ketika saya melihat sumber css saya di alat dev chrome, wajah tersenyum tersenyum seperti ini: ☺ Apakah itu benar?
Anthony
1
@Simon: Pernyataan lokal ada untuk mendukung IE6 - 8 (lihat posting blog tertaut) jadi kecuali Anda tidak peduli dengan browser ini diperlukan.
Stijn de Witt
34

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/

Magne
sumber
-3

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

logu
sumber