Huruf awal - Trik CSS

Anonim

initial-letter adalah harta CSS yang memilih huruf pertama elemen di mana ia diterapkan dan menentukan bilangan baris yang ditempati oleh huruf tersebut.

Anda mungkin pernah melihat sesuatu seperti ini di laman berita, di mana huruf pertama perenggan utama lebih besar daripada isi kandungannya.

Laman New Yorker menggayakan huruf awal

Caranya dengan menggayakan huruf pertama kandungan yang digunakan untuk meretas sedikit di mana anda membungkus huruf itu dan menerapkan kelas untuk menggayakannya:

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )


Once upon a time in a faraway land…

Itu berfungsi, tetapi lebih banyak penandaan HTML daripada yang kita mahukan dan memecah kandungan kita. Tambahan lagi, sangat menyakitkan apabila anda terpaksa menggunakan kelas tersebut secara manual pada bila-bila masa anda mahu menggunakannya.

Dari mana initial-letterdatang:

/* Style that first letter! */ .subhead ( initial-letter: 2; )


Once upon a time in a faraway land…

Itu lebih bersih! Pendekatan lain adalah menerapkannya pada ::first-letterpemilih psuedo sebagai gantinya:

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

Adakah anda melihatnya? Properti initial-letterini secara automatik mengira saiz fon dan bilangan baris yang diperlukan untuk membuat topi drop bergaya kami! Ingin mengambil tepat 2, 3, 4 atau lebih baris? Beritahu harta tanah dan ia akan melakukan pengangkatan berat.

Menukar harta tanah untuk menempati garisan 1, 2 dan 4

Sintaks dan Nilai

initial-letter: normal | ( );

initial-letter menerima nilai berikut:

  • normal: Tidak berlaku kesan penskalaan pada huruf pertama. Ini berguna untuk menetapkan semula nilai yang mungkin diwarisi dari lata.
  • : Berapa banyak baris yang harus ditempati oleh huruf di mana nilai negatif tidak dibenarkan.
  • : Berapa banyak baris yang harus diturunkan di mana nilai negatif tidak dibenarkan. Ini berguna sekiranya anda perlu meletakkan huruf lebih rendah untuk menampung masalah jarak yang rumit tetapi, jika tidak ditentukan, ia memerlukan nilai

Contoh

Drop Cap, Cap Naik dan Tutup Blok menggunakan Huruf Awal

Menggayakan huruf awal dapat digunakan untuk mencapai beberapa kaedah reka bentuk tipografi yang menarik. Harap maklum bahawa contoh berikut hanya disokong oleh Safari pada masa ini.

Drop Caps mungkin merupakan kes penggunaan yang paling biasa:

Lihat huruf awal Pen: Drop Cap oleh Geoff Graham (@geoffgraham) di CodePen.

Topi yang dinaikkan adalah contoh lain:

Lihat huruf awal Pen: Raised Cap oleh Geoff Graham (@geoffgraham) di CodePen.

Block Caps kembali ke kisah dongeng lama:

Lihat huruf awal Pen: Block Cap oleh Geoff Graham (@geoffgraham) di CodePen.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
Tidak Tidak Tidak Tidak TP *

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
Tidak Tidak Tidak 14.0-14.4 *

Berkaitan

  • ::first-letter
  • Coretan Drop Caps

Maklumat lanjut

  • Modul Tata Letak Inline CSS Tahap 3: Spesifikasi tidak rasmi
  • Makmal Jen Simmons: Demo dan contoh kes penggunaan
  • Tiket Firefox: Buka tiket untuk menyokong ciri tersebut
  • Tiket Internet Explorer: Buka tiket untuk menyokong ciri tersebut