@ phông chữ cho phông chữ tùy chỉnh, phông chữ không trơn tru trong Chrome

Question

Tôi có một ứng dụng web đang sử dụng CSS3 @ font-face để nhúng phông chữ tùy chỉnh. Cho đến nay điều này đã hoạt động hoàn hảo trong IE và Firefox.

Với Chrome, tuy nhiên, phông chữ tùy chỉnh xuất hiện pixelated và không trơn tru. Dưới đây là liên kết đến đoạn mã màn hình ví dụ về phông chữ của tôi trong Firefox & IE (trên cùng) và Chrome (dưới): Screenshot comparison

Thật khó để thấy sự khác biệt trong ảnh chụp mẫu nhỏ như vậy, nhưng khi điều này đang xảy ra trên tất cả các trang nó là rất đáng chú ý.

Dưới đây là một ví dụ về cách tôi đang sử dụng @ font-face trong stylesheet của tôi:

@font-face 
{ 
    font-family: 'MyFont'; 
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'), 
     url('../Content/fonts/MyFont.ttf') format('truetype'); 
} 

Một điều có thể đáng nói, là khi tôi kéo lên trang web trong bất kỳ trình duyệt đang chạy trên một máy ảo , các phông chữ là SUPER choppy, tệ hơn nhiều so với ví dụ của Chrome. Điều này xảy ra khi tôi sử dụng bất kỳ máy tính trường học nào của tôi, tất cả đều đang chạy máy tính để bàn Win7 VMWare. Nó cũng xảy ra khi tôi kéo trang web từ một máy ảo Windows 7 chạy trên máy Mac của một người bạn.

Answer 1

Đây là một vấn đề được biết rằng các nhà phát triển Chrome đang sửa chữa:

0.123.

http://code.google.com/p/chromium/issues/detail?id=137692

Để làm việc xung quanh cho đến khi đó đầu tiên thử:

html { 
    text-rendering: optimizeLegibility !important; 
    -webkit-font-smoothing: antialiased !important; 
} 

Nếu điều này không làm việc cho bạn, công việc xung quanh này làm việc cho tôi (trên không khắc phục các cửa sổ Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

nó xuất hiện sắp xếp lại quy tắc CSS phông chữ @ để cho phép svg xuất hiện 'đầu tiên' khắc phục sự cố này.

dụ:

-before-------------- 

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


-after-------------- 

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

Answer 2

Thật không may, tất cả các trình duyệt đều hiển thị phông chữ khác nhau. Và một trong đó trông ok trong một có thể gặp rắc rối trong khác. Nó không phải là dễ dàng để tìm một phông chữ tốt cho font-face ... nếu bạn muốn hoàn hảo điểm ảnh, bạn sẽ phải sử dụng hình ảnh.

Nhưng không phải tất cả bị mất, ở đây được 20 phông chữ miễn phí (! Miễn phí cho mục đích thương mại chẵn) mà làm khá độc đáo (Tôi luôn luôn kết thúc kiểm tra danh sách này): http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

Hãy nhớ rằng bạn không thể lưu trữ trả phông chữ hoặc bạn sẽ phân phối chúng và bạn có thể gặp rắc rối.

Answer 3

Bạn có thể muốn chơi với optimizeLegibility: http://aestheticallyloyal.com/public/optimize-legibility/

Và cũng -webkit-font-làm mịn: http://maxvoltar.com/archive/-webkit-font-smoothing

Nó cũng có thể là giá trị sử dụng font-sóc phát phông chữ để tạo phông chữ web của bạn và css để tải trong các phông chữ: http://www.fontsquirrel.com/fontface/generator (mặc dù tôi không chắc chắn nếu điều đó sẽ khắc phục vấn đề của bạn hay không)

Answer 4

Đối với tôi, làm việc tốt nhất:

@font-face { 
    font-family: MyFont; 
    src: url("MyFont.ttf") format('truetype'); 
} 

h1 { 
    font-family: MyFont; 
    -webkit-text-stroke: 0.5pt; 
    -webkit-font-smoothing: antialiased; 
} 

Answer 5

tôi sẽ đề nghị sử dụng này:

-webkit-text-stroke: 0.3pt; 
-webkit-font-smoothing: antialiased; 

Answer 6

Cố gắng thêm -webkit-transform: translateZ (1px); hoặc biến đổi 3d khác.

giải thích:

Chrome có một lỗi - văn bản mờ khi biến đổi 3d áp dụng, văn bản để thêm tài sản đề nghị sẽ Blur xắt nhỏ và một phần giải quyết vấn đề này. Nó vẫn còn một chút mờ, nhưng trong nhiều trường hợp nó là tốt hơn sau đó cắt nhỏ một.

example1 (issue): chopped text. Tôi đã thêm xoay vòng ở đây để đảm bảo văn bản được cắt nhỏ.
example2 (đã giải quyết): semi-smooth text. Áp dụng chuyển đổi 3d làm cho văn bản mờ, vì vậy văn bản cắt nhỏ có vẻ trơn tru hơn.

Vấn đề nhỏ là có vẻ như chúng tôi không thể chỉ nhắm mục tiêu các phiên bản Chrome của Windows trong CSS, vì vậy chúng tôi phải sử dụng javascript để áp dụng lớp phù hợp.

Answer 7

Vấn đề này sẽ được giải quyết với Chrome 37.

http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html