Hiển thị phông chữ kém cho QuickSand (phông chữ Google) trong Chrome và IE

Question

Tôi đã cố gắng để có được phông chữ nhất quán và đẹp mắt trên tất cả các trình duyệt bằng phông chữ Google QuickSand. Chrome và IE hiển thị các cạnh có răng cưa và có răng cưa, đặc biệt là ở các kích thước phông chữ nhỏ hơn. Thu phóng trình duyệt sẽ thường làm cho các đồ tạo tác biến mất.

Dưới đây là một so sánh ảnh chụp màn hình của vấn đề với trình duyệt Firefox, Chrome, & Internet Explorer: https://dl.dropboxusercontent.com/u/29865983/imagehost/jsfiddle/QuickSandFont.png

Đây là một jsfiddle tái tạo vấn đề cho thí nghiệm:

http://jsfiddle.net/vXd2F/

#main-nav ul li a, #main-nav ul li a:link, #main-nav ul li a:active { 
color: white; 
display: inline-block; 
padding: 19px 10px; 
font: 400 12px/14px 'Quicksand', Helvetica, Arial, sans-serif; 
text-transform: uppercase;} 

Answer 1

Sự cố là do Google Fonts không triển khai tất cả các loại tệp phông chữ. Giải pháp là sử dụng trình tạo phông chữ phông chữ web squirrel để tạo ra các loại tệp bị thiếu và lưu trữ chúng.

Answer 2

Bạn không thể làm quá nhiều với việc hiển thị phông chữ trên trình duyệt. Bạn có thể thử với phông chữ nếu điều đó có thể làm cho nó tốt hơn, nhưng nếu không nó không thể thay đổi được.

Đối webkit (Chrome, Safari), bạn có thể thêm:

-webkit-text-stroke: 1px black; 

Để che dấu vấn đề một chút nhưng nội dung sẽ trở thành ticker.