Cải thiện kết xuất hiển thị phông chữ với CSS

22/06 Tin tức 631 lượt xem

Hầu hết những người làm front-end đều nhận thấy rằng các phông chữ trong trình duyệt đặc biệt là các tiêu đề trông khác với những gì nó hiển thị trong photoshop mặc dù chúng ta đã chọn cùng phông chữ. Trong file thiết kế photoshop, ta thấy nó hiển thị đẹp hơn (mỏng và mượt mà).

Chúng ta có thể thực hiện để việc hiển thị phông chữ này trên trình duyệt tốt hơn bằng cách sử dụng một thủ thuật đơn giản của CSS để đạt được chất lượng như photoshop.

Với Webkit (Chrome), ta sử dụng một thuộc tính làm mịn là -webkit-font-smoothing

Firefox cũng có thuộc tính tương tự kể từ phiên bản 25: -moz-osx-font-smoothing

Hãy thử thêm thuộc tính này và thẻ tiêu đề hoặc toàn bộ với thẻ body của website và cảm nhận sự khác biệt nhé

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;