Ký tự đầu tiên - Thủ thuật CSS

Anonim

initial-letter là một thuộc tính CSS chọn chữ cái đầu tiên của phần tử nơi nó được áp dụng và chỉ định số dòng mà chữ cái đó chiếm.

Bạn có thể đã thấy điều gì đó như thế này trên các trang web tin tức, nơi chữ cái đầu tiên của đoạn dẫn đầu lớn hơn phần còn lại của nội dung.

Trang web của New Yorker định kiểu chữ cái đầu tiên

Mẹo tạo kiểu cho chữ cái đầu tiên của nội dung được sử dụng để thực hiện một chút hack khi bạn bọc chữ cái trong một và áp dụng một lớp để tạo kiểu cho nó:

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


Once upon a time in a faraway land…

Điều đó hoạt động, nhưng đó là đánh dấu HTML nhiều hơn chúng ta muốn và chia nhỏ nội dung của chúng ta. Thêm vào đó, thật khó để áp dụng lớp đó theo cách thủ công bất cứ lúc nào bạn muốn sử dụng.

Đó là nơi initial-letterxuất hiện:

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


Once upon a time in a faraway land…

Nó sạch hơn! Một cách tiếp cận khác là áp dụng nó cho ::first-letterbộ chọn psuedo để thay thế:

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

Bạn có thấy điều đó không? Các initial-letterbất động sản tự động tính toán cả hai kích thước phông chữ và số dòng cần thiết để tạo nắp thả cách điệu của chúng tôi! Muốn nó chiếm chính xác 2, 3, 4 dòng hoặc nhiều hơn? Nói với tài sản và nó sẽ thực hiện việc nâng vật nặng.

Thay đổi thuộc tính để chiếm 1, 2 và 4 dòng

Cú pháp và giá trị

initial-letter: normal | ( );

initial-letter chấp nhận các giá trị sau:

  • normal: Không áp dụng hiệu ứng chia tỷ lệ cho chữ cái đầu tiên. Điều này có thể hữu ích để đặt lại giá trị mà một giá trị có thể được kế thừa từ thác.
  • : Ký tự phải chiếm bao nhiêu dòng trong đó giá trị âm không được phép.
  • : Ký tự phải chìm bao nhiêu dòng ở những nơi không cho phép giá trị âm. Điều này rất hữu ích nếu bạn cần đặt chữ cái thấp hơn để giải quyết các vấn đề về khoảng cách phức tạp, nhưng nếu không được chỉ định, nó sẽ nhận giá trị

Ví dụ

Thả giới hạn, nâng giới hạn và giới hạn khối bằng cách sử dụng chữ cái đầu tiên

Tạo kiểu cho chữ cái đầu tiên có thể được sử dụng để đạt được một số phương pháp thiết kế kiểu chữ lạ mắt. Xin lưu ý rằng các ví dụ sau chỉ được hỗ trợ bởi Safari.

Drop Caps có lẽ là trường hợp sử dụng quen thuộc nhất:

Xem chữ cái đầu của Pen: Drop Cap của Geoff Graham (@geoffgraham) trên CodePen.

Raised Caps là một ví dụ khác:

Xem chữ cái đầu của Bút: Raised Cap của Geoff Graham (@geoffgraham) trên CodePen.

Block Caps quay trở lại những câu chuyện cổ tích cũ:

Xem chữ cái đầu của Pen: Block Cap của Geoff Graham (@geoffgraham) trên CodePen.

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
Không Không Không Không TP *

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
Không Không Không 14.0-14.4 *

Có liên quan

  • ::first-letter
  • Thả đoạn mã Caps

Thêm thông tin

  • Mô-đun bố cục nội tuyến CSS cấp 3: Thông số kỹ thuật hoàn chỉnh
  • Jen Simmons Labs: Bản trình diễn và ví dụ về các trường hợp sử dụng
  • Vé Firefox: Mở vé để hỗ trợ tính năng này
  • Vé Internet Explorer: Vé mở để hỗ trợ tính năng này