Chrome không tôn trọng trọng lượng phông chữ?

Question

Tôi đã có Arial làm phông chữ cơ bản và tôi đang cố gắng sử dụng nhiều loại phông chữ khác nhau cho các phần khác nhau của trang (bình thường, đậm/700 và 900)

Điều này dường như hoạt động tốt cả Firefox và Internet Explorer, nhưng trong Google chrome có vẻ như hoàn toàn không có sự khác biệt giữa bold/700 và 900 !?

See fiddle

(trong trường hợp liên kết ở trên được chia/không hợp lệ)

HTML:

<p id="one">Testing</p> 
<p id="two">Testing</p> 
<p id="three">Testing</p> 

CSS:

p { font-family: arial; font-size: 40px; margin: 0; } 

#one { font-weight: normal; } 
#two { font-weight: 700; } 
#three { font-weight: 900; } 

tôi đã googled một chút và tìm thấy một similar question cung cấp một câu trả lời bán hữu ích:

giải quyết với:

font-weight: 900; họ phông chữ: "Arial Black", Arial, sans-serif;

Nhưng bằng cách sử dụng đơn giản trên làm tất cả mọi thứ giả định một font-weight 900 trong Chrome (ngay cả khi có quy định khác)

Đối với một ví dụ về see here này (trong Chrome rõ ràng)

Đây có phải là một lỗi trong Chrome? Hay tôi đang làm gì sai ở đây?

Answer 1

Arial (ít nhất là phiên bản chuẩn) chỉ có hai trọng số: normal và bold. Nếu bạn chỉ định trọng số không phải là một trong hai thứ đó, thì trình duyệt sẽ chọn trọng lượng có sẵn gần nhất. (Xem: font-weight:900 only working in Firefox)

Arial Black là phông chữ riêng biệt từ Arial, đó là lý do tại sao câu trả lời bán hữu ích mà bạn cung cấp hoạt động.

Nếu bạn muốn làm việc với Arial, hãy thử:

#one { font-weight: normal; } 
#two { font-weight: bold; } 
#three { font-family: "Arial Black", Arial, sans-serif; } 

Các thay thế khác là sử dụng một dịch vụ webfont như Typekit hoặc Webink, và chọn một phông chữ với trọng lượng có sẵn hơn.

Answer 2

Sự cố là "Arial Black". Đối với một số lý do Chrome và IE (bằng cách này) bỏ qua trọng lượng phông chữ với phông chữ đó. Loại bỏ nó và CSS của bạn được áp dụng như mong đợi.

p { font-family: Arial, sans-serif; font-size: 40px; margin: 0; }

P.S. Bây giờ tôi kiểm tra lại 700 và 900 không khác biệt. 600/900 là mặc dù. jeradg là đúng.

http://jsfiddle.net/ZjHEn/1/

Answer 3

Tôi nghĩ rằng đó không phải là lỗi của Google chrome. Nó có thể là phông chữ không có trọng lượng, 900. Không chỉ trong Chrome mà còn nó không hoạt động trong Opera và Safari nữa.

Mọi thứ bình thường của Arial Black, 700 và 900 đều giống nhau trong Safari.

Answer 4

Nếu phần tử có trọng số phông gốc không phải là bình thường (chẳng hạn như b, mạnh, th), hãy thêm thuộc tính trọng số phông chữ được đặt thành bình thường sẽ sửa phông chữ mờ. Đây là bản sửa lỗi tạm thời cho những gì tôi tin rằng đây là lỗi của Chrome.

Answer 5

Tôi đã tìm thấy giải pháp.

Nhờ LinkedIn.

-webkit-font-smoothing: antialiased;