Tại sao chrome hiển thị phông chữ được hiển thị khác với họ phông chữ được tính toán?

Question

Tôi muốn biết Chrome chọn phông chữ để hiển thị như thế nào? Tôi hỏi điều này vì sử dụng Công cụ dành cho nhà phát triển Chrome Tôi có thể thấy rằng họ phông chữ được tính khác với gia đình phông chữ được hiển thị và điều này gây nhầm lẫn. Các câu hỏi tương tự trên Stackoverflow không có nhiều trợ giúp trong trường hợp cụ thể này.

máy tính phông chữ Gia đình tôi trông giống như:

font-family: museo-sans, sans-serif, Futura; 

phông chữ rendered trông giống như:

Helvetica—473 glyphs 

Trong article này, nó được đề cập rằng chrome bản đồ một phông chữ render một font tính được liệt kê. Điều này có nghĩa là chính xác và tại sao nó làm điều đó? Có cách nào để kiểm soát phông chữ nào được hiển thị không?

Answer 1

Giống như bất kỳ trình duyệt nào khác: nếu không tìm thấy phông chữ đầu tiên, nó sẽ thử phông chữ tiếp theo, v.v. cho đến khi hết quy tắc. Nếu không có phông chữ nào phù hợp, thì phông chữ được thừa kế từ phần tử gốc, tất cả các con đường đến cấp tài liệu, nơi nó sẽ chỉ chọn phông chữ mặc định của trình duyệt.

Trong trường hợp này, mọi thứ hơi lạ, vì thứ tự bạn đang hiển thị là "phông chữ thực", tiếp theo là "lớp CSS chung luôn phân giải, nhưng không đảm bảo về phông chữ nào, chỉ cần nó sẽ là một phông chữ sans-serif ", theo sau là phông chữ thực" futura ".

Vì vậy, Chrome sẽ thử dùng museo, sẽ không tìm thấy nó, thấy "sans-serif" chung chung và chỉ chọn phông chữ sans-serif đã biết cho bạn. Thông thường đó là một cái gì đó như Arial hoặc Helvetica, nhưng đặc tả CSS không nói bất cứ điều gì về font nào nó phải được, cụ thể. Nó chỉ cần là phông chữ sans-serif.

Phần lạ ở đây là thứ tự bạn chọn có nghĩa là "futura" ở cuối sẽ không bao giờ được chọn. Trình duyệt sẽ always find a suitable font khi nó chạm serif, sans-serif, cursive, fantasy, hoặc monospace