Các font-sizebất động sản quy định các kích thước, hoặc chiều cao, của phông chữ. font-sizekhông chỉ ảnh hưởng đến phông chữ mà nó được áp dụng mà còn được sử dụng để tính giá trị của các đơn vị độ dài em, rem và ex.
p ( font-size: 20px; )font-sizecó thể chấp nhận các từ khóa, đơn vị độ dài hoặc tỷ lệ phần trăm làm giá trị. Tuy nhiên, điều quan trọng cần lưu ý là khi nó được khai báo là một phần của thuộc tính tốc fontký, font-sizelà một giá trị bắt buộc. Nếu nó không được bao gồm trong tốc ký, toàn bộ dòng sẽ bị bỏ qua.
Các giá trị độ dài (ví dụ: px, em, rem, ex, v.v.) được áp dụng cho font-sizekhông được âm.
Từ khóa và giá trị tuyệt đối
.element ( font-size: small; )Nó chấp nhận các giá trị từ khóa tuyệt đối sau:
xx-smallx-smallsmallmediumlargex-largexx-large
Các giá trị tuyệt đối này được ánh xạ tới các kích thước phông chữ cụ thể do trình duyệt tính toán. Nhưng bạn cũng có thể sử dụng hai giá trị từ khóa có liên quan đến kích thước phông chữ của phần tử mẹ.
Các giá trị tuyệt đối khác bao gồm mm(milimét), cm(cm), in(inch), pt(điểm) và pc(picas). Một điểm bằng 1/72 inch trong khi một pica bằng 12 điểm - những giá trị này thường được sử dụng cho các tài liệu in.
Từ khóa tương đối
.element ( font-size: larger; )largersmaller
Ví dụ: nếu phần tử mẹ có kích thước phông chữ là small, một phần tử con có kích thước tương đối xác định là largersẽ làm cho kích thước phông chữ bằng với mediumphần tử con.
Giá trị phần trăm
.element ( font-size: 110%; )Giá trị phần trăm, chẳng hạn như đặt kích thước phông chữ là 110%, cũng có liên quan đến kích thước phông chữ của phần tử mẹ như được hiển thị trong bản trình diễn bên dưới:
Xem Pen qdbELL của CSS-Tricks (@ css-trick) trên CodePen.
Đơn vị em
.element ( font-size: 2em; )Đơn vị em là một đơn vị tương đối dựa trên giá trị được tính toán của kích thước phông chữ của phần tử mẹ. Điều này có nghĩa là các phần tử con luôn phụ thuộc vào cha mẹ của chúng để thiết lập kích thước phông chữ của chúng. Ví dụ:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Trong ví dụ trên, đoạn văn sẽ có kích thước phông chữ là 16px vì 1 x 16 = 16px trong khi tiêu đề sẽ là 32px vì 2 x 16 = 32px. Có rất nhiều lợi thế khi mở rộng kiểu tùy thuộc vào kích thước phông chữ của phần tử mẹ, cụ thể là chúng ta có thể bọc các phần tử trong một vùng chứa và biết rằng tất cả các phần tử con sẽ luôn tương đối với nhau:
Xem Pen Tìm hiểu cách thức hoạt động của đơn vị em bằng CSS-Tricks (@ css-trick) trên CodePen.
Đơn vị còn lại
Tuy nhiên, trong trường hợp đơn vị rem, kích thước phông chữ phụ thuộc vào giá trị của phần tử gốc (hoặc htmlphần tử).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Trong ví dụ trên, đơn vị rem bằng 16px (vì nó được kế thừa từ htmlphần tử / root) và do đó kích thước phông chữ cho tất cả các phần tử đoạn sẽ tính thành 24px (1,5 x 16 = 24). Không giống như các đơn vị em, đoạn văn sẽ bỏ qua kiểu dáng của tất cả các cha mẹ của nó ngoài gốc.
Đơn vị này được hỗ trợ bởi các trình duyệt sau:
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Làm | Làm | Làm | Làm | 10+ | Làm | Làm |
Đơn vị cũ
.element ( font-size: 20ex; )Đối với các đơn vị cũ, 1ex sẽ bằng chiều cao tính toán của chữ cái thường x của phần tử gốc. Vì vậy, trong ví dụ bên dưới, htmlphần tử được đặt thành 20pxvà tất cả các kích thước phông chữ khác được xác định bởi chiều cao x của phông chữ cụ thể đó.
Xem Bút Tìm hiểu cách hoạt động của đơn vị cũ bằng CSS-Tricks (@ css-trick) trên CodePen.
Thử nghiệm với các bản demo trên thay thế của tôi font-familytrên htmlyếu tố để xem cách khác font-kích thước thay đổi.
Viewport đơn vị
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Các đơn vị khung nhìn , chẳng hạn như vwvà vh, đặt kích thước phông chữ của một phần tử so với kích thước của khung nhìn:
- 1vw = 1% chiều rộng khung nhìn
- 1vh = 1% chiều cao khung nhìn
Vì vậy, nếu chúng ta lấy ví dụ sau:
.element ( font-size: 100vh; )Sau đó, điều này sẽ nói rằng kích thước phông chữ của phần tử phải luôn bằng 100% chiều cao của khung nhìn (50vh sẽ là 50%, 15vh sẽ là 15%, v.v.). Trong bản trình diễn bên dưới, hãy thử thay đổi kích thước chiều cao của ví dụ để xem loại kéo dài:
Xem loại Kích thước bút với đơn vị vh bằng CSS-Tricks (@ css-trick) trên CodePen.
vw đơn vị khác nhau ở chỗ nó đặt chiều cao của các dạng chữ bằng chiều rộng của khung nhìn, vì vậy trong bản trình diễn bên dưới, bạn sẽ cần phải thay đổi kích thước cửa sổ trình duyệt theo chiều ngang để xem những thay đổi này:
Xem loại Kích thước bút với đơn vị vw bằng CSS-Tricks (@ css-trick) trên CodePen.
Các đơn vị này được hỗ trợ bởi các trình duyệt sau:
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Điều quan trọng cần lưu ý là có hai đơn vị khung nhìn khác: vminvà vmax. Đầu tiên sẽ tìm các giá trị của vhvà vwvà đặt kích thước phông chữ là nhỏ nhất trong vmaxhai giá trị trong khi đặt kích thước phông chữ thành lớn nhất trong hai giá trị này.
Đơn vị ch
.element ( font-size: 24ch; )Các chđơn vị tương tự như các exđơn vị ở chỗ nó sẽ thiết lập font-size của một phần tử liên quan đến độ rộng của 0 (zero) Glyph của phông chữ:
Xem loại Kích thước bút với đơn vị ch bằng CSS-Tricks (@ css-trick) trên CodePen.
Đơn vị này được hỗ trợ bởi:
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Làm | 10+ | Làm | 9+ | Làm | Làm |