Chrome không hiển thị @ font-face ttf/woff mịn

Question

Tôi đang sử dụng phông chữ biểu tượng phông chữ IconMoon @ cho dự án tôi đang làm việc.

Phông chữ đẹp và mượt mà được hiển thị khi chỉ bao gồm phông .svg và/hoặc .eot hoặc khi duyệt bằng các trình duyệt khác như IE9. Nhưng khi duyệt trang web bằng Chrome và bao gồm định dạng .ttf và/hoặc .woff, các biểu tượng trở nên rất thay đổi và không có tính năng chống răng cưa. Có cách nào để yêu cầu Chrome tải tệp .eot hoặc .svg thay vì .ttf hoặc .woff không?

Answer 1

có thể sở hữu css này giải quyết vấn đề của bạn:

yourSelector { 
    font-smooth: always; 
    -webkit-font-smoothing: antialiased; 
} 

Answer 2

tôi thấy làm việc này cho vấn đề đó. Tôi không nghĩ rằng giải pháp font-smooth thực sự hoạt động.

@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('fonts/montserrat-regular-webfont.eot'); /* IE9 Compat Modes */ 
    src: url('fonts/montserrat-regular-webfont.eot?iefix') format('eot'), 
     url('fonts/montserrat-regular-webfont.ttf') format('truetype'), 
     url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'), 
     url('fonts/montserrat-regular-webfont.woff') format('woff'); 
} 

Firefox sẽ chọn người cuối cùng trong danh sách (WOFF), làm việc hay không, IE sẽ sử dụng EOT, và Chrome sẽ chọn một trong những đầu tiên mà làm việc (svg). WOFF làm việc quá trong chrome, nhưng gây glyphs aliased, vì vậy đặt svg trước WOFF giải quyết đó. *

Giải pháp này hoạt động, nhưng gây ra một yêu cầu bổ sung trong Safari, bạn có thể rời khỏi svg của bạn dưới đây WOFF như bạn đã làm ban đầu và thêm:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
    font-family: 'OpenSansLightItalic'; 
    src: url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); 
    } 
} 

đọc về nó ở đây: http://hollisterdesign.wordpress.com/2014/04/29/note-to-self-always-use-this-fix/

Answer 3

Hãy thử xoay này ít cho phông chữ của bạn, hy vọng nó sẽ giúp bạn.

Ví dụ:

p{ 
    transform: rotate(-0.0000000001deg); 
} 

Answer 4

Đặt url phông chữ svg trước khi tất cả những người khác, Chrome sẽ tải SVG và bạn sẽ nhận được một vẽ đẹp, đặc biệt đối với phông chữ ánh sáng.