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

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;
Thuở học sinh thích lướt web, chơi game. Ứng thi vào ĐH Công Nghiệp... đậu trường Nông Nghiệp, học CNTT. Sau làm Marketing, chán... Tiếp cận, học PHP từ Joomla, sau làm Wordpress. Và hiện tại đang làm CodeIgniter, Laravel... Tối về viết Blog... và luôn cố gắng cập nhật những công nghệ mới mỗi ngày.