@ font-face cho trọng lượng phông chữ cực lớn và/hoặc chống răng cưa xấu

Question

Tôi tìm thấy một phông chữ mở mà tôi thích (Crete Round) và thiết kế một số màn hình trong Photoshop với nó. Khi đã đến lúc thiết lập CSS, tôi đã thử sử dụng cả "bộ công cụ" có thể tải xuống của Google Fonts và fontsquirrel.com (một tệp zip có bốn loại phông chữ khác nhau và một bản định kiểu sẵn có), nhưng cả hai đều cho tôi kết quả lạ trên Mac .

Photoshop — Những gì tôi muốn nó trông giống như:

Yuck — Chrome (và Safari) trên Mac sử dụng một bộ @ font-face từ fontsquirrel.com:

Chrome (và Safari) trên Mac sử dụng Google Fonts (về cơ bản giống hệt nhau):

TỐT — Chrome trên Windows (fontsquirrel):

TỐT — Hack. Tôi phát hiện ra rằng với bất kỳ độ mờ đục (không văn bản màu alpha) nhỏ hơn 1.0, Chrome đã cho tôi kết quả tốt

Chrome trên máy Mac sử dụng fontsquirrel, với opacity:0.999; (nhưng Safari vẫn còn xấu.):

Có ai có bất kỳ ý tưởng nào về những gì đang diễn ra ở đây hoặc những gì tôi có thể làm sai không?

Answer 1

Tôi không nghĩ bạn đang làm gì sai. Tôi cũng không nghĩ rằng có một cách xung quanh nó, khác hơn là sử dụng hình ảnh thay vì văn bản mà phong cách là hoàn toàn quan trọng.

Tôi đã tìm thấy THIS LINK thảo luận về công cụ hiển thị trên các hệ điều hành khác nhau (cũng xem xét các trình duyệt khác nhau).

Tôi hy vọng điều này sẽ hữu ích!

Answer 2

thử

html { -webkit-font-smoothing: antialiased; }