CSS: cỡ chữ 100% - 100% là gì?

Có rất nhiều bài viết và câu hỏi về tỷ lệ phần trăm so với các phông chữ có kích thước khác . Tuy nhiên, tôi không thể tìm ra GÌ tham chiếu giá trị phần trăm được cho là gì. Tôi hiểu đây là "cùng kích thước trong tất cả các trình duyệt". Tôi cũng đọc nó, ví dụ:

Phần trăm (%): Đơn vị phần trăm rất giống với đơn vị Emem, tiết kiệm cho một vài khác biệt cơ bản. Đầu tiên và quan trọng nhất, kích thước phông chữ hiện tại bằng 100% (tức là 12pt = 100%). Trong khi sử dụng đơn vị phần trăm, văn bản của bạn vẫn có thể mở rộng hoàn toàn cho thiết bị di động và khả năng truy cập.

Nguồn: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Nhưng nếu bạn nói "tức là 12 pt = 100%", thì điều đó có nghĩa là trước tiên bạn phải xác định font-size: 12pt. nó vận hành như vậy sao? Trước tiên, bạn xác định kích thước theo số đo tuyệt đối, sau đó gọi đây là '100%'? Không có nhiều ý nghĩa, vì nhiều mẫu cho biết rất hữu ích khi đặt:

body {
  font-size: 100%;
}

Vì vậy, bằng cách này, GÌ là kích thước phông chữ liên quan đến? Tôi nhận thấy rằng kích thước tôi thấy trên màn hình của tôi khác nhau cho mỗi phông chữ. Arial trông lớn hơn Times New Roman chẳng hạn. Ngoài ra, nếu tôi chỉ làm điều này, kích thước cơ thể = 100%, điều đó có nghĩa là nó sẽ giống nhau trên tất cả các trình duyệt? Hoặc chỉ khi tôi lần đầu tiên xác định một giá trị tuyệt đối?

CẬP NHẬT, SAT THÁNG 7

Tôi đang đến đó, nhưng xin vui lòng chịu đựng với tôi.

Vì vậy, giá trị% liên quan đến kích thước phông chữ trình duyệt mặc định, nếu tôi hiểu chính xác. Chà, thật tuyệt nhưng lại cho tôi một vài câu hỏi khác:

1. Là kích thước tiêu chuẩn này luôn giống nhau cho mọi phiên bản trình duyệt, hoặc chúng khác nhau giữa các phiên bản?
2. TÔI ! đã tìm thấy (xem hình ảnh bên dưới) các cài đặt cho Google Chrome (chưa bao giờ nhìn vào điều này trước đây!) và tôi thấy các cài đặt "serif", "sans-serif" và "monospace" tiêu chuẩn. Nhưng làm thế nào để tôi giải thích điều này cho các phông chữ khác? Nói tôi xác định font: 100% Georgia;, trình duyệt sẽ có kích thước bao nhiêu? Nó sẽ tìm kích thước chuẩn cho serif hay phông chữ "Georgia" có kích thước chuẩn cho trình duyệt
3. Trên một số trang web tôi đọc những thứ như Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today. Nhưng từ những gì tôi đang học bây giờ tôi tin rằng bạn thực sự nên chọn giữa văn bản có thể thay đổi kích thước (sử dụng% hoặc em, như những gì họ đề xuất trong trích dẫn này) hoặc có 'kích thước phông chữ chính xác, nhất quán trên các trình duyệt' (bằng cách sử dụng px hoặc pt làm cơ sở). Điều này có đúng không?

Cài đặt Google:

Đây là cách tôi nghĩ mọi thứ có thể trông như thế nào nếu bạn không xác định kích thước trong các giá trị tuyệt đối.

Trình duyệt mặc định giống như 16pt cho Firefox, Bạn có thể kiểm tra bằng cách vào tùy chọn Firefox, nhấp vào tab Nội dung và kiểm tra kích thước phông chữ. Bạn cũng có thể làm tương tự cho các trình duyệt khác.

Cá nhân tôi thích kiểm soát kích thước phông chữ mặc định của các trang web của mình, vì vậy, trong tệp CSS có trong mỗi trang, tôi sẽ đặt mặc định BODY, như vậy:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

Bây giờ kích thước phông chữ của tất cả các thẻ HTML của tôi sẽ kế thừa kích thước phông chữ là 14px.

Nói rằng tôi muốn tất cả các div có kích thước phông chữ lớn hơn 10% so với cơ thể, tôi chỉ cần làm:

div {
    font-size: 110%
}

Bây giờ, bất kỳ trình duyệt nào xem các trang của tôi sẽ tự động làm cho tất cả các div lớn hơn 10% so với cơ thể, tương đương với 15,4px.

Nếu tôi muốn kích thước phông chữ của tất cả các div nhỏ hơn 10%, tôi sẽ:

div {
    font-size: 90%
}

Điều này sẽ làm cho tất cả các div có kích thước phông chữ là 12,6px.

Ngoài ra, bạn nên biết rằng vì kích thước phông chữ được kế thừa, nên mỗi div lồng nhau sẽ giảm 10% kích thước phông chữ, vì vậy:

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

Div bên trong sẽ có kích thước phông chữ là 11,34px (90% của 12,6px), có thể không được dự định.

Điều này có thể giúp giải thích: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

Hiểu biết của tôi là khi phông chữ được đặt như sau

body {
  font-size: 100%;
}

trình duyệt sẽ hiển thị phông chữ theo cài đặt người dùng cho trình duyệt đó.

Thông số kỹ thuật nói rằng% được hiển thị

liên quan đến kích thước phông chữ của phần tử cha

http://www.w3.org/TR/CSS1/#font-size

Trong trường hợp này, tôi cho rằng điều đó có nghĩa là trình duyệt được đặt thành gì.

Tỷ lệ phần trăm trong giá trị của thuộc font-sizetính có liên quan đến kích thước phông chữ của phần tử cha . CSS 2.1 nói điều này một cách khó hiểu và khó hiểu (đề cập đến kích thước phông chữ được thừa hưởng của Wap), nhưng Văn bản CSS3 nói rất rõ ràng.

Cha mẹ của bodyphần tử là phần tử gốc, tức là htmlphần tử. Trừ khi được đặt trong một biểu định kiểu, kích thước phông chữ của phần tử gốc phụ thuộc vào việc triển khai. Nó thường phụ thuộc vào cài đặt người dùng.

Cài đặt font-size: 100%là vô nghĩa trong nhiều trường hợp, vì một phần tử kế thừa kích thước phông chữ của cha mẹ (dẫn đến cùng một kết quả), nếu không có biểu định kiểu nào đặt kích thước phông chữ của riêng nó. Tuy nhiên, có thể hữu ích khi ghi đè cài đặt trong các biểu định kiểu khác (bao gồm các biểu định kiểu mặc định của trình duyệt).

Ví dụ: một inputphần tử thường có cài đặt trong biểu định kiểu trình duyệt, làm cho kích thước phông chữ mặc định của nó nhỏ hơn so với văn bản sao chép. Nếu bạn muốn làm cho kích thước phông chữ giống nhau, bạn có thể đặt

đầu vào {cỡ chữ: 100%}

Đối với bodyphần tử, cài đặt dự phòng logic font-size: 100%được sử dụng khá thường xuyên, vì nó được cho là giúp chống lại một số lỗi trình duyệt (trong các trình duyệt có thể đã mất tầm quan trọng của chúng bây giờ).

Nó liên quan đến kích thước phông chữ trình duyệt mặc định trừ khi bạn ghi đè lên nó bằng một giá trị bằng pt hoặc px.

Xin lỗi nếu tôi đến bữa tiệc muộn, nhưng trong phần chỉnh sửa của bạn, bạn nhận xét về font: 100% Georgiađiều mà các câu trả lời khác chưa phản hồi.

Có một sự khác biệt giữa font: 100% Georgiavà font-size:100%; font-family:'Georgia'. Nếu đó là tất cả các phương pháp tốc ký đã làm, phần kích thước phông chữ sẽ là vô nghĩa. Nhưng nó cũng đặt rất nhiều thuộc tính cho các giá trị mặc định của chúng: chiều cao của dòng trở thành normal(hoặc khoảng 1,2), ditto cho kiểu (không in nghiêng) và trọng số (không đậm).

Đó là tất cả. Các câu trả lời khác đã đề cập đến mọi thứ khác đã được đề cập.

Như bạn đã thể hiện một cách thuyết phục, font-size: 100%;sẽ không hiển thị giống nhau trong tất cả các trình duyệt. Tuy nhiên, bạn sẽ đặt mặt phông chữ của mình trong tệp CSS, vì vậy đây sẽ giống (hoặc dự phòng) trong tất cả các trình duyệt.

Tôi tin rằng font-size: 100%;có thể rất hữu ích khi kết hợp nó với emthiết kế dựa trên. Như bài viết này cho thấy, điều này sẽ tạo ra một trang web rất linh hoạt.

Khi nào nó hữu ích? Khi trang web của bạn cần thích ứng với mong muốn của khách truy cập. Lấy ví dụ một người đàn ông lớn tuổi đặt kích thước phông chữ mặc định của mình ở mức 24 px. Hoặc ai đó có màn hình nhỏ với độ phân giải lớn làm tăng kích thước phông chữ mặc định của anh ta vì anh ta phải nheo mắt. Hầu hết các trang web sẽ phá vỡ, nhưng các trang web dựa trên em có thể đối phó với các tình huống này.

Liên quan đến kích thước mặc định được xác định cho phông chữ đó.

Nếu ai đó mở trang của bạn trên trình duyệt web, sẽ có phông chữ và cỡ chữ mặc định mà nó sử dụng.

Theo hiểu biết của tôi, nó giúp nội dung của bạn điều chỉnh với các giá trị khác nhau về họ phông chữ và kích thước phông chữ. Vì vậy, làm cho nội dung của bạn có thể mở rộng. Đối với vấn đề hít phải kích thước phông chữ, chúng ta luôn có thể ghi đè bằng cách đưa ra một kích thước phông chữ cụ thể cho thành phần.

Theo TẤT CẢ CÁC THÔNG SỐ ĐỔI TRỞ LẠI ĐẾN NĂM 1996 , các giá trị phần trăm trên font-sizetham chiếu kích thước phông chữ (được tính) của phần tử cha .

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

Nó là dễ dàng.

Điều gì sẽ xảy ra nếu divkhai báo một kích thước phông chữ tương đối, như ems, hoặc thậm chí tệ hơn, một tỷ lệ phần trăm khác ?? Xem trên máy tính tính toán ở trên. Dù đơn vị tuyệt đối, đơn vị tương đối chuyển đổi thành.

Câu hỏi duy nhất còn lại là điều gì xảy ra khi bạn sử dụng giá trị phần trăm trên phần tử gốc không có cha mẹ:

html {
  font-size: 62.5%; /* 62.5% of what? */
}

Trong trường hợp đó, hãy xem bản sao trùng lặp của câu hỏi này. TLDR: tỷ lệ phần trăm trên phần tử gốc đề cập đến kích thước phông chữ mặc định của trình duyệt, có thể khác nhau cho mỗi người dùng.

Người giới thiệu:

• Thông số CSS 1 (1996)
• Thông số CSS 2.1 (2011)
• Phông chữ CSS Cấp 3 spec (2013)
• Bản thảo trình soạn thảo CSS Fonts cấp 3 (2017)