Kích thước phông chữ trong CSS bằng dấu gạch chéo

132

Dấu gạch chéo có ý nghĩa gì ở đây:

font: 100%/120%;

html css size

— Alex
nguồn

font-sizekhông chấp nhận dấu gạch chéo. Các tài sản chính xác là font.

— BoltClock

những cái này thì sao nền: "rgba (0, 0, 0, 0) không cuộn lặp lại 0% 0% / hộp đệm hộp tự động"

— jerinho.com

195

Điều này thực sự đặt hai thuộc tính và tương đương với:

font-size: 100%;
line-height: 120%;

Để trích dẫn các tài liệu chính thức :

Cú pháp của thuộc tính này dựa trên ký hiệu viết tắt kiểu chữ truyền thống để đặt nhiều thuộc tính liên quan đến phông chữ.

Như David M đã nói trong các bình luận, nó phản ánh truyền thống sắp chữ của việc chỉ định kích thước kiểu chữ là Đá x pt trên y pt Để biểu thị kích thước glyph trên chiều cao của dòng.

Nhưng ví dụ trong câu hỏi của bạn thực sự sai và sẽ bị trình duyệt bỏ qua: bạn chỉ có thể kết hợp hai thuộc tính này trong fontký hiệu tốc ký và bạn phải chỉ định ít nhất cả kích thước phông chữ và họ. Đơn giản chỉ cần viết font: 100%/120%;là không đủ; bạn có thể thêm một tên gia đình chung để làm cho nó hợp lệ, ví dụ:

font: 100%/120% serif;

— Konrad Rudolph
nguồn

Đó là phản ánh cú pháp sắp chữ cũ, trong đó bạn có phông chữ được đặt là, ví dụ "10pt trên 12pt" hoặc "10pt / 12pt".

— David M

Tôi thực sự sử dụng điều này khá một chút. Nhà thiết kế mà tôi làm việc luôn đề cập đến kích thước, ví dụ: "14 trên 22". Một ngày tình cờ tôi đưa nó vào và rất ngạc nhiên khi thấy nó hoạt động.

— Dylan Lukes

một quickie: định dạng này cũng không yêu cầu họ phông chữ được chỉ định? Các trình duyệt của tôi đang bỏ qua thuộc tính này: font: 12px / 16px; nhưng chấp nhận điều này: font: 12px / 16px sans-serif; Hành vi này cũng được ghi lại ở đây

— kumarharsh

@Harsh Có, một gia đình (cùng với kích thước) được yêu cầu tối thiểu cho thuộc tính tốc fontký như bạn có thể thấy trong định nghĩa chính thức .

— Konrad Rudolph

Cảm ơn bạn đã làm rõ. Có lẽ bạn có thể cập nhật câu trả lời (hoặc câu hỏi) vì nó hơi sai lệch ở chỗ một người đọc bình thường có thể cho rằng chỉ có một khai báo SIZE / LINE_HEIGHT sẽ hoạt động.

— kumarharsh

Konrad có cái này, nhưng có rất nhiều thuộc tính tốc ký CSS như thế này mà bạn có thể sử dụng để rút ngắn các biểu định kiểu của mình. Một số trong số chúng trông hơi khó hiểu nếu bạn không biết về chúng.

— Hóa đơn thằn lằn
nguồn

Hầu hết các tốc ký địa chỉ thuộc tính phong cách liên quan, mặc dù (ví dụ border-*). David đã đưa ra một lời giải thích tốt trong các ý kiến cho câu trả lời của tôi. Theo cách viết tắt là khó hiểu: chắc chắn là đúng, nhưng rất hữu ích và khá dễ học.

— Konrad Rudolph