2012-01-04 20 views
9

W3C duy trì một page of advice on how to size your fonts in CSS - cập nhật vào tháng năm 2010. Theo trang này, cách tốt nhất để tạo kiểu phông chữ là sử dụng "tuyệt đối" font-kích thước cuối cùng:Tôi có nên sử dụng kích thước phông chữ tuyệt đối (nhỏ, trung bình, lớn và cộng sự) không?

thậm chí tốt hơn, nếu một cơ sở in- kích thước được đặt cho tài liệu, sử dụng kích thước tuyệt đối ([xx-small | x-small | small | medium | lớn | x-large | xx-large]) hoặc kích thước tương đối ([lớn hơn | nhỏ hơn]) khi xác định kích thước phông chữ cho một phần tử cụ thể trong tài liệu.

Thông số sau đó defines these font-sizes trong bảng. Theo như tôi hiểu bảng này, small phải là 2/3 (66%) kích thước của mediumlarge phải là 4/3 (133%).

Nếu tôi kiểm tra điều này, tôi nhận được rather different results từ việc diễn giải các tỷ lệ được chỉ định bởi W3C. Các kết quả nhất quán trên các phiên bản mới nhất của Chrome, Firefox và IE, nhưng không kiểm tra với khuyến cáo của W3C. small81.25% thay vì 66%large112.5% thay vì 133%.

Điều này có nghĩa là các trình duyệt hiện đại không hỗ trợ các tiêu chuẩn này từ W3C? Có một tiêu chuẩn mới thay thế cho cái này mà tôi không biết? Hay tôi đã hiểu lầm ý nghĩa của bảng đó từ W3C?

Vào cuối ngày, câu hỏi của tôi là: Thực tiễn tốt nhất để sử dụng kích thước phông chữ tuyệt đối trong CSS là gì? Nó có hoạt động nhất quán trên các trình duyệt không? Và lý tưởng nhất là tôi muốn biết những gì các trình duyệt hiện đại tiêu chuẩn đang theo dõi.

+1

Tôi tin rằng cách tốt nhất để sử dụng là sử dụng kích thước phông chữ tương đối: 'em' và phần trăm. Lưu ý rằng html cũng là một thẻ khiến mọi thứ trở nên khó hiểu hơn, lợi ích duy nhất theo thông số html5 là điều này có thể hữu ích về mặt ngữ nghĩa. Nhưng tôi tự hỏi những gì người khác phải ở lại về phong cách css x-lớn là tốt! – c4urself

Trả lời

4

Bạn hiểu sai bảng mà bạn liên kết đến. Trung bình là kích thước phông chữ HTML 3, nhỏ là kích thước phông chữ HTML 2, đề cập đến thẻ phông chữ không dùng nữa và kích thước phông chữ 1..7 của nó.

Dù sao, nếu bạn muốn tôn trọng tùy chọn kích thước phông chữ của người dùng, không sử dụng kích thước phông chữ như 10px và các loại tương tự. Phương tiện có nghĩa là sở thích của người dùng. (Mặc dù đa số người dùng lại kích thước ưa thích của họ trên mặc định ban đầu, bởi vì họ không biết làm thế nào để thay đổi nó.)

@MrLister nói trong ý kiến ​​:

[tỷ lệ giữa kích cỡ phông chữ tuyệt đối ] khác nhau giữa các trình duyệt ... Theo W3C, nó thậm chí có thể khác nhau giữa các phông chữ. Theo kinh nghiệm cá nhân của tôi, trong một số trình duyệt cũng có sự khác biệt giữa chế độ nghiêm ngặt và chế độ quirks. Vì vậy, nếu bạn muốn nhất quán, không sử dụng nó. Thiết lập kích thước cho cơ thể (kích thước bạn muốn hoặc để nó cho người dùng) và sau đó làm việc với tỷ lệ phần trăm hoặc ems cho các yếu tố khác nhau

+0

Và trên thực tế, ngoài việc giải thích sai bảng, trang cụ thể nói rằng bảng được tính khác nhau theo các UA khác nhau và thậm chí cho các phông chữ khác nhau ... – Chris

+0

Ah tốt! Có, tôi không thể tìm ra ý nghĩa của "kích thước phông chữ HTML". Họ có định nghĩa ở đâu đó không? Hoặc nếu họ không, và đặc biệt là trái lên đến UA (như @ Chris chỉ ra) là có một bảng đáng tin cậy của mặc định trình duyệt? Chỉ vì nếu tôi cần mã một số CSS dựa trên một hướng dẫn phong cách hoặc một thiết kế PNG tôi cần phải biết những gì tôi đang xử lý kích thước. –

+0

Chỉ cần thêm - tôi nhận thấy rằng họ có khả năng thay đổi và vì vậy nếu tôi muốn kích thước pixel phông chữ cụ thể, tôi không nên dựa vào 'nhỏ',' phương tiện', v.v ... Nhưng tôi muốn viết mã theo thực tiễn tốt nhất (và như vậy kích thước phông chữ có thể thay đổi và trang web vẫn có thể sử dụng được) nhưng vẫn có giao diện với các bên liên quan như thiết kế được chỉ định. –

0

"Medium" chuyển thành 1em.

Là kích thước phông chữ cơ bản cho tài liệu, 1em (hoặc 100%) tương đương với đặt kích thước phông chữ theo sở thích của người dùng.

+6

Không không không, 1em không giống như phương tiện. 1em có nghĩa là "cùng kích thước phông chữ với bố cục". Nếu không có kích thước phông chữ được chỉ định, THEN 1em cũng giống như phương tiện trong cơ thể. Trong ví dụ h1, 1em có nghĩa là cùng kích thước với h1, trong khi phương tiện sẽ là tùy chọn mặc định của người dùng. –

+0

Tôi nghĩ rằng bạn hiểu lầm câu hỏi của tôi. Thực tế cụ thể này, trong khi thường đúng, không phải là vấn đề. –

+0

"Vẫn còn cách tốt nhất để sử dụng kích thước phông chữ tuyệt đối trong CSS?" - tuyệt đối như trong "10pt" hoặc tuyệt đối như trong "nhỏ" ("nhỏ" tham chiếu đến giá trị của thẻ 'font' cho kích thước). Những gì tôi đã cố gắng để nói là phương tiện "font' kích thước thẻ" vừa "sẽ dịch sang kích thước phông chữ cơ bản 1em, nghĩa là nó bị ràng buộc là browserpecific, nhưng nên được coi là" trung bình ". Theo như thực hành tốt nhất, xác định kích thước phông chữ cơ bản của bạn là 1em và trì hoãn từ đó cho tất cả các yếu tố khác sẽ là bỏ phiếu cá nhân của tôi - không chắc chắn nếu bạn muốn gọi "tuyệt đối" hoặc "tương đối". – kontur

Các vấn đề liên quan