Google Webfonts và Anti-aliasing

Question

Tôi thích sử dụng Google Webfonts trên các tác phẩm thương mại của mình, nhưng chúng hiển thị hơi lởm chởm, mặc dù trong bản xem trước do Google cung cấp, chúng hiển thị rất mượt mà.

Kiểm tra này ra: http://www.google.com/fonts/specimen/Oxygen

Các preview lớn nhất có vẻ rất đẹp và mịn nhưng khi tôi nhập nó trên trang của mình và sử dụng nó, nó dường như bị bóp méo trên các cạnh, rất lởm chởm. Google có sử dụng thư viện bổ sung để đạt được tính năng chống răng cưa này không hay tôi có đang làm gì sai không?

Answer 1

Nếu bạn gỡ cài đặt phông chữ khỏi hệ thống (thư mục windows/fonts), bạn sẽ có thể thấy nó trơn tru. Để khắc phục điều này. Không sử dụng @import hoặc liên kết trực tiếp từ google. Thay vì tải xuống gói từ www.fontsquirrel.com (toàn bộ bộ phông chữ trên web) và sử dụng @ font-face trong css của bạn để có phông chữ mượt mà.

Answer 2

Fonts render khác nhau dựa trên:

• độ phân giải màn hình/Monitor
• Trình duyệt
• Hệ điều hành
• Kích sử dụng và gợi ý

Dựa trên thực tế là phông chữ của bạn trông tồi tệ hơn trong Chrome và Firefox là điều duy nhất bạn có thể làm để thử và làm cho các trình duyệt đó hiển thị chúng tốt hơn. Nếu không nhìn thấy mã của bạn những điều duy nhất tôi có thể đề nghị là:

• Đảm bảo bạn đang sử dụng khá reset css (một cái gì đó như thế này: http://meyerweb.com/eric/tools/css/reset/).

• Hãy thử thêm font-weight: normal; vào phông chữ để xem điều này có tạo nên sự khác biệt hay không; đôi khi các trình duyệt và khung công tác thử thêm một chữ in hoa giả vào mọi thứ.

• Đảm bảo bạn đang sử dụng các phiên bản phông chữ thực tế chứ không chỉ áp dụng kiểu CSS.

• Nếu vẫn thất bại, hãy thử tăng kích thước phông chữ lên/xuống một lượng nhỏ và xem phông chữ có gợi ý tốt hơn ở các kích thước này không.

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

Answer 3

Tôi không biết chi tiết kỹ thuật đầy đủ, nhưng Chrome có thể hiển thị phông chữ khác với các trình duyệt khác.

Những gì bạn có thể thử là chỉ định quy tắc font-smoothing trong tệp CSS của mình.

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

Quy tắc này thường được sử dụng.Đôi khi, người ta áp dụng nó cho mọi selectors (với *):

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

Ba giá trị có thể cho thuộc tính này là:

-webkit-font-smoothing: none; 
-webkit-font-smoothing: subpixel-antialiased; 
-webkit-font-smoothing: antialiased; 

Thật không may, tôi không thể tái tạo các vấn đề làm mịn ngay bây giờ (tôi không biết tại sao, máy tính của tôi không thay đổi việc làm mịn và mọi thứ hoàn toàn có thể đọc được, có thể là bản sửa lỗi Chrome gần đây nhưng tôi không thể tìm thấy bất kỳ điều gì về điều đó).

Tiếp tục đọc trên:

• về ClearType & Chrome: trên Google forums
• -webkit-font-smoothing demo trên Codepen.

Hy vọng tôi có thể trợ giúp. :)