Tại sao phông chữ Google Web của tôi bị pixel?

Question

Tôi đang cố gắng sử dụng phông chữ google trong một trang web đơn giản. Thẻ mà tôi đang sử dụng là

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' > 

các css là

body { 

    padding: 0; 
    text-align: center; 

    line-height: 180%; 

    background: #1a2426; 
    color: #f7f7f7; 

    font-family: 'Lobster', serif; 

} 

Vấn đề là font trông pixelated khi tôi kéo nó lên trong Chrome. Tôi đã tự hỏi nếu có ai có thể giải thích tại sao?

Ví dụ

Answer 1

Nó không phải là một vấn đề của trình duyệt đó là vấn đề của cửa sổ.

Kiểm tra này https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-font-are-you-using-that-are

Answer 2

Dường như nhóm phát triển Chrome is aware về vấn đề này. Nó được coi là một lỗi mà họ đang làm việc.

Giải pháp tốt nhất mà tôi tìm thấy là không thực hiện bất kỳ gợi ý CSS nào (có bóng thả nhẹ, v.v.) nhưng để sắp xếp lại phông chữ sao cho phiên bản .svg tải trước vì Chrome không hỗ trợ đầy đủ Phông chữ TrueType.

Ví dụ:

@font-face { 
font-family: ‘MyWebFont’; 
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), 
    url(‘webfont.svg#svgFontName’) format(‘svg’), 
    url(‘webfont.woff’) format(‘woff’), 
    url(‘webfont.ttf’) format(‘truetype’); 
} 

Check-out this article để biết thêm.

Bạn có thể sắp xếp thứ tự phông chữ tải. bạn chỉ cần hiểu rằng bằng cách gọi http://fonts.googleapis.com/css?family=Lobster 'rel =' stylesheet 'type =' text/css '> bạn đang đưa vào biểu định kiểu bên ngoài có nội dung:

/* latin */ 
@font-face { 
    font-family: 'Lobster'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v11/G6-OYdAAwU5fSlE7MlBvhVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

vì vậy bằng cách chỉ bao gồm cuộc gọi đó trực tiếp trong bảng định kiểu của bạn, bạn có quyền kiểm soát tải đơn đặt hàng.