Ukuran font dalam CSS dengan garis miring

133

Apa arti garis miring di sini:

font: 100%/120%;

html css size

— Alex
sumber

font-sizetidak menerima tebasan. Properti yang benar adalah font.

— BoltClock

bagaimana dengan ini? latar belakang: "rgba (0, 0, 0, 0) tidak ada gulir berulang 0% 0% / kotak-padding kotak batas otomatis"

— jerinho.com

195

Ini sebenarnya menetapkan dua properti dan setara dengan:

font-size: 100%;
line-height: 120%;

Mengutip dokumentasi resmi :

Sintaks properti ini didasarkan pada notasi steno tipografi tradisional untuk menetapkan beberapa properti yang terkait dengan font.

Seperti yang dikatakan David M dalam komentar, itu mencerminkan tradisi penyusunan huruf yang menentukan ukuran jenis huruf sebagai " x pt on y pt" untuk menunjukkan ukuran mesin terbang pada ketinggian garis.

Tetapi contoh dalam pertanyaan Anda sebenarnya salah dan akan diabaikan oleh browser: Anda hanya dapat menggabungkan dua properti ini dalam fontnotasi steno, dan Anda harus menentukan setidaknya ukuran font dan keluarga. Menulis saja font: 100%/120%;tidak cukup; Anda bisa menambahkan nama keluarga generik untuk membuatnya valid, misalnya:

font: 100%/120% serif;

— Konrad Rudolph
sumber

Ini untuk mencerminkan sintaks penyusunan huruf lama, di mana Anda akan mengatur font, misalnya "10pt on 12pt", atau "10pt / 12pt".

— David M

Saya sebenarnya menggunakan ini sedikit. Perancang tempat saya bekerja selalu mengacu pada ukuran, misalnya, "14 lebih dari 22". Saya memasukkannya secara tidak sengaja suatu hari dan terkejut / puas ketika itu berhasil.

— Dylan Lukes

quickie: apakah format ini juga tidak mengharuskan font-family ditentukan? Browser saya mengabaikan properti ini: font: 12px / 16px; tetapi menerima ini: font: 12px / 16px sans-serif; Perilaku ini juga didokumentasikan di sini

— kumarharsh

@ Keras Ya, keluarga (bersama dengan ukuran) minimal diperlukan untuk fontproperti steno seperti yang Anda lihat dalam definisi resmi .

— Konrad Rudolph

terimakasih atas klarifikasinya. Mungkin Anda dapat memperbarui jawabannya (atau pertanyaan) karena sedikit menyesatkan karena pembaca biasa dapat berasumsi bahwa hanya deklarasi SIZE / LINE_HEIGHT yang akan berfungsi.

— kumarharsh

Konrad mendapatkan yang ini, tetapi ada banyak properti singkatan CSS seperti ini yang dapat Anda gunakan untuk mempersingkat style sheet Anda. Beberapa dari mereka terlihat sedikit samar jika Anda tidak menyadarinya.

— Bill the Lizard
sumber

Namun, sebagian besar steno membahas properti gaya terkait border-*. David telah memberikan penjelasan yang baik dalam komentar untuk jawaban saya. Adapun singkatan menjadi samar: tentu benar, tapi sangat berguna dan cukup mudah dipelajari.

— Konrad Rudolph