Các letter-spacingtài sản kiểm soát khoảng cách giữa mỗi chữ cái trong một nguyên tố hay khối văn bản. Các giá trị được hỗ trợ letter-spacingbao gồm giá trị phông chữ-tương đối (em, rem), giá trị tương đối gốc (phần trăm), giá trị tuyệt đối (px) và thuộc normaltính, đặt lại về mặc định của phông chữ.
Nên sử dụng các giá trị phông chữ-tương đối để letter-spacingtăng hoặc giảm thích hợp khi kích thước phông chữ được thay đổi, theo thiết kế hoặc theo hành vi của người dùng.
p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )Điểm quan trọng nhất cần lưu ý khi sử dụng letter-spacinglà giá trị được chỉ định không thay đổi giá trị mặc định, nó được thêm vào khoảng cách mặc định mà trình duyệt áp dụng (dựa trên số liệu phông chữ). letter-spacingcũng hỗ trợ các giá trị âm, điều này sẽ thắt chặt sự xuất hiện của văn bản hơn là nới lỏng nó.
Điểm quan tâm
- Giá trị subpixel: trong hầu hết các trình duyệt, việc chỉ định một giá trị có giá trị nhỏ hơn
1pxsẽ khôngletter-spacingđược áp dụng. Hiện tại Firefox 14+ và IE 10 hỗ trợ bố cục subpixel; Opera và WebKit thì không. Bản vá đã cập bến, vì vậy WebKit hiện hỗ trợ khoảng cách giữa các ký tự subpixel. - Các
letter-spacingtài sản là animatable với CSS Transitions. - Một trong những cách để chống lại khoảng trống giữa các phần tử khối nội tuyến là đặt
letter-spacing: -4px;trên vùng chứa mẹ của các phần tử khối nội tuyến. Sau đó, bạn sẽ cần phải thiết lập lạiletter-spacing: normal;các phần tử con. - Hiếm khi nếu có bao giờ là một ý tưởng tốt để viết các chữ thường khoảng trắng.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Làm | Làm | Làm | Phần lớn | Làm | Làm | Làm |
Một lưu ý về hỗ trợ trình duyệt di động: một số phiên bản của Opera Mobile, triển khai WebKit không chuẩn và trình duyệt NetFront không hỗ trợ letter-spacing. Các chi tiết cụ thể được trình bày chi tiết trong liên kết QuirksMode ở trên.