Apakah saya perlu membungkus kutipan di sekitar nama keluarga font di CSS?

Saya ingat lama sekali mendengar bahwa itu dianggap "praktik terbaik" untuk membungkus tanda kutip di sekitar nama font yang berisi banyak kata dalam properti CSS font-family, seperti ini:

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

Untuk itu, saya mencoba menghapus tanda kutip dari "Arial Narrow"dan Safari dan Firefox tidak memiliki masalah dalam merendernya.

Jadi, apakah ada logika untuk aturan praktis ini, atau itu hanya mitos? Apakah ini masalah dengan browser lama yang tidak lagi berlaku untuk versi saat ini? Saya telah melakukan ini begitu lama sehingga saya tidak pernah berhenti untuk berpikir apakah itu benar-benar perlu.

Spesifikasi CSS 2.1 memberi tahu kita bahwa:

Nama keluarga font harus diberi kutipan sebagai string, atau tidak dikutip sebagai urutan dari satu atau lebih pengenal. Ini berarti sebagian besar karakter tanda baca dan angka di awal setiap token harus di-escape dalam nama keluarga font yang tidak dikutip.

Selanjutnya dikatakan:

Jika urutan pengidentifikasi diberikan sebagai nama keluarga font, nilai yang dihitung adalah nama yang diubah menjadi string dengan menggabungkan semua pengidentifikasi dalam urutan dengan spasi tunggal.

Untuk menghindari kesalahan dalam melarikan diri, disarankan untuk mengutip nama keluarga font yang berisi spasi, angka, atau karakter tanda baca selain tanda hubung:

Jadi ya, memang ada perbedaan, tetapi perbedaan itu tidak mungkin menimbulkan masalah. Secara pribadi, saya selalu mengutip nama font jika mengandung spasi. Dalam beberapa kasus (mungkin sangat jarang), kutipan benar-benar diperlukan:

Nama keluarga font yang kebetulan sama dengan nilai kata kunci ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy', dan 'cursive') harus dikutip untuk mencegah kebingungan dengan kata kunci dengan nama yang sama. Kata kunci 'awal' dan 'default' disediakan untuk penggunaan di masa mendatang dan juga harus dikutip saat digunakan sebagai nama font.

Perhatikan juga tanda baca seperti / atau! dalam pengenal mungkin juga perlu dikutip atau di-escape.

Menurut spesifikasi CSS Font Module Level 3 bulan Oktober 2013, " nama keluarga font selain keluarga generik harus diberi tanda kutip sebagai string, atau tidak diberi tanda kutip sebagai urutan satu atau lebih pengenal ". Jadi, Anda TIDAK perlu menyertakannya dalam tanda kutip.

Namun, jika Anda tidak " kebanyakan karakter tanda baca dan angka di awal setiap token harus di-escape ". Untuk menghindari kesalahan melarikan diri, W3C sebenarnya merekomendasikan untuk mengutip nama keluarga font yang mengandung spasi putih, angka, tanda baca atau nilai kata kunci ('mewarisi', 'serif', dll.).

Nama keluarga font umum ('serif', 'sans-serif', 'kursif', 'fantasi', dan 'monospace') TIDAK HARUS dikutip karena merupakan kata kunci.

Jika gaya sebaris, seperti <font style="font-family:Arial Narrow">some texte</font>, itu berhasil.

Tetapi jika nama font polisi mengandung beberapa karakter khusus, atau dimulai dengan angka yang mengandung tanda kutip atau hal-hal aneh lainnya (seperti "01 Digitall" atau "a_CityNovaTitulB & WLt" atau "Bailey'sCar"), Anda harus menggunakan sintaks khusus dengan & quot; yang dapat diterapkan ke semua jenis nama font asing:

<font style="font-family:&quot;a_CityNovaTitulB&WLt&quot; , &quot;Bailey'sCar&quot;">some text</font>

Di FireFox, sumber akan menampilkan & quot; seperti ini: "

tanpa trik ini, ini:

<font style="font-family:a_CityNovaTitulB&WLt ,Bailey'sCar">some text</font>

tidak bekerja secara otomatis di setiap browser. Ini berguna untuk penyihir nama font yang dimulai dengan angka, seperti "8 Pin".