- Trang chủ
- Tham khảo
- CSS
- Thuộc tính letter-spacing
Định nghĩa và sử dụngThuộc tính letter-spacing tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text.
Cấu trúctag {
letter-spacing: giá trị;
}Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|
| letter-spacing
| normal
| letter-spacing: normal;
| Không tăng khoảng cách giữa các ký tự cho chữ.
| | đơn vị
| letter-spacing: 2px;
| Tăng hoặc giảm khoảng cách giữa các ký tự.
| | inherit
| letter-spacing: inherit;
| Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
|
Ví dụHTML viết:<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html> Hiển thị trình duyệt khi chưa có CSS:CSS viết:p {
letter-spacing: 5px;
}Hiển thị trình duyệt khi có CSS:Trình duyệt hỗ trợThuộc tính letter-spacing được hỗ trợ trong đa số các trình duyệt. Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. Syntax/* Keyword value */
letter-spacing: normal;
/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;
Valuesnormal
The normal letter spacing for the current font. Unlike a value of 0, this keyword allows the user agent to alter the space between characters in order to justify text. <length>Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text. Accessibility concernsA large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large
negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable. Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility. - MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
Internationalization concernsSome written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually
connected, as in the following example. Applying letter spacing will lead the text to look broken. شسيبتنمك
letter-spacing =
normal |
<length> Setting letter spacingHTML<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
CSS.normal { letter-spacing: normal; }
.em-wide { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide { letter-spacing: 6px; }
ResultSpecifications
| Specification |
|---|
CSS Text Module Level 3
# letter-spacing-property
|
Browser compatibilityBCD tables only load in the browser
| 
