phông chữ Jagged trên Windows - Chrome & Safari

Question

Tôi đang sử dụng phông chữ tùy chỉnh trên trang web của tôi bằng cách sử dụng đoạn mã sau:

@font-face { 
    font-family: 'HelveticaNeueBold'; 
    src: url('fonts/HelveticaNeueBold.eot'); 
    src: url('fonts/HelveticaNeueBold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/HelveticaNeueBold.woff') format('woff'), 
     url('fonts/HelveticaNeueBold.ttf') format('truetype'), 
     url('fonts/HelveticaNeueBold.svg#HelveticaNeueBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

này hoạt động tốt trên tất cả các trình duyệt trên Mac nhưng nhìn vào nó trên máy tính trên Chrome và Safari nó xuất hiện lởm chởm. Có bất kỳ bản sửa lỗi nào tôi có thể sử dụng để làm cho tất cả trông giống nhau không? Dưới đây cho thấy sự khác biệt (Mac bên trái, PC ở bên phải - cả trên Chrome).

Answer 1

@ phông chữ phông chữ trên PC thường trông hơi ropey hơn một chút, nhưng 'Gợi ý' các phông chữ sẽ cải thiện khả năng đọc.

Thử chạy phông chữ của bạn thông qua trình chuyển đổi sóc phông chữ, có thể xử lý gợi ý như một phần của chuyển đổi.

http://www.fontsquirrel.com/fontface/generator

Là một lưu ý phụ Tôi cũng chỉ là không sử dụng @ font-face cho Helvetica, và chỉ dựa vào người có phông chữ được cài đặt, té ngửa ra Arial. Không phải là trận đấu gần nhất, nhưng nó sẽ cho bạn kết quả tốt nhất.

Answer 2

Có. Sử dụng một cách thay thế như cufon để có phông chữ mượt mà.

Answer 3

Tôi không chắc chắn bạn đang sử dụng hệ điều hành nào, nhưng bạn có thể cần phải bật ClearType cho phông chữ màn hình.

Trong XP: hãy chuyển đến bảng điều khiển Hiển thị và chọn tab Giao diện. Từ đó, hãy nhấp vào Hiệu ứng. Chọn Sử dụng phương pháp sau để làm mịn các cạnh của phông chữ màn hình và sau đó chọn ClearType trong danh sách.

Điều đó đã giải quyết được sự cố cho tôi trong quá khứ.

Answer 4

Đây là sự khác biệt cơ bản giữa cách Windows và OS X xử lý hiển thị phông chữ, vì vậy, bạn có thể thực hiện rất ít việc này. Một bản sửa lỗi cho Chrome là thêm một bóng thả gần như vô hình (text-shadow: rgba(0, 0, 0, .01) 0 0 1px) buộc nó chống răng cưa văn bản. Các dịch vụ như Typekit đang nỗ lực khắc phục sự cố, chẳng hạn như serving fonts as Postscript outlines, nhưng điều đó không giúp ích cho bạn nhiều.

Answer 5

Bạn có thể thử:

-webkit-transform: rotate(-0.0000000001deg); 

này quay nguyên tố này chỉ đủ để làm cho trình duyệt làm cho nó anti-aliased. Không biết nó hoạt động như thế nào, nhưng tôi không nhận thấy bất kỳ sự khác biệt nào trong việc dựng hình.

Giải pháp tìm thấy ở đây: https://twitter.com/#!/komejo/statuses/117241707522818048

Answer 6

Có vẻ Chrome không thích SVG được gọi là cuối cùng trong CSS @ font-face khai. Thêm này sau @ của bạn font-face {...} trong CSS của bạn:

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

Truy vấn @media nhắm trình duyệt webkit và nói với họ để chỉ sử dụng các tập tin .svg. Theo kinh nghiệm của tôi, cải thiện hiển thị trên Windows Chrome.

THẬN TRỌNG: Bản sửa lỗi này có thể gây ra sự cố khác trong Chrome trên Windows 7 hoặc 8 mà tôi gặp phải trong một số trường hợp: Sử dụng bản sửa lỗi này đôi khi ngăn không cho gói từ trong Chrome trên Windows. Một hành vi rất lạ thường chỉ xảy ra đôi khi và tôi đã không tìm thấy một giải pháp cho. Một câu hỏi về vấn đề này đã được đăng ở đây:

Strange word length issue when using font-face in Chrome

Answer 7

Điều này dường như làm các trick:

html { 
    -webkit-text-stroke-width: .10px; 
}