Mặt chữ được tải trên Windows trông rất tệ. Những phông chữ nào bạn đang sử dụng mà kết xuất tốt hơn?

27

EDIT : Vấn đề là tôi không bật "Cleartype" trong cài đặt của mình trên Vista. Câu hỏi này có thể không có nhiều ý nghĩa nếu bạn đã cài đặt / bật Cleartype trên HĐH Windows.

Một cơn gió kiểu chữ mới đã xuất hiện trên web, với thuộc tính mặt chữ của CSS3 có thể tải các phông chữ khác với bộ hệ điều hành / hệ thống. Máy Mac của tôi kết xuất hoàn hảo trong khi máy Windows của tôi thì không. Tôi nên sử dụng bộ phông chữ nào sẽ hiển thị tốt hơn trên Windows?

Điều này tương tự như một câu hỏi trên Stack Overflow.

Và đây là một ví dụ về một trang web trông rất tệ trên PC với Myriad Pro: http://css-tricks.com/

LƯU Ý: Tôi không nói về sự khác biệt trong khử răng cưa giữa các phiên bản trình duyệt (như giữa IE9 và IE6).

Tôi đang chờ đợi câu trả lời của các bài kiểm tra của bạn, một danh sách các phông chữ cộng với kích thước (vui lòng sử dụng px) mà chúng trông đẹp hoặc ít nhất là theo cách chúng có thể được sử dụng cho văn bản ngắn hoặc tiêu đề nhỏ.

Ví dụ: tại thời điểm "League Gothic, 30px" trông giống như sau:

nhập mô tả hình ảnh ở đây

font-face  subpixel-rendering 
— Littlemad
nguồn
Bạn có thể cung cấp thêm chi tiết: Trên trình duyệt nào nó không hiển thị tốt? Bạn có thể hiển thị một số ảnh chụp màn hình ví dụ? Có thể có một vấn đề cơ bản tiềm ẩn với kết xuất ở đây thay vì vấn đề về phông chữ
— Pekka hỗ trợ GoFundMonica
2
Đây không chỉ là vấn đề của trình duyệt, mà còn của Hệ thống hoạt động. Windows có kết xuất các phông chữ khác với Mac Os. Hiện tại tôi không có máy mac (chỉ có Ipod Touch) và tôi không thể hiển thị sự khác biệt, nhưng ngay cả trên trình duyệt được hiển thị tốt để khử răng cưa, phông chữ khuôn mặt cũng không được triển khai tốt cho phông chữ hệ điều hành không chuẩn. Tôi đã tự hỏi (vì tôi có một bộ phông chữ hạn chế), mà một người đang sử dụng không được hiển thị xấu trên PC.
— Littlemad
@Yi Jiang: Chính xác bởi vì số lượng phông chữ rất lớn và không thể kiểm tra tất cả, hoặc có tất cả, tôi đang hỏi, từ kinh nghiệm của mọi người, "phông chữ an toàn và kích thước" là gì để sử dụng. Tôi có thể thấy rằng không ai đã đăng bất cứ điều gì và tôi không biết liệu có ai sẽ đăng bất cứ điều gì không (hoặc đã cố gắng phân tích các phông chữ hiển thị trên PC), vì vậy tôi buồn hơn khi không có bất kỳ phản hồi nào.
— Littlemad
"Loại đàng hoàng" hoàn toàn chủ quan.
— DA01

Câu trả lời:

18

Đây phải là một nhận xét (do đó thực hiện CW này), nhưng tôi nghĩ rằng có một số hiểu lầm và giả định sai trong câu hỏi. Vì rõ ràng bạn muốn câu hỏi này được trả lời (rốt cuộc bạn đã đưa ra một khoản tiền thưởng), đây là hai xu của tôi.

Từ ảnh chụp màn hình của bạn, có vẻ như tôi đã thiết lập Windows của mình để hiển thị phông chữ thường xuyên (trái ngược với kết xuất pixel phụ) và có lẽ trình duyệt của bạn không thực hiện bất kỳ khử răng cưa nào (có thể, nhưng sau đó nó đã bị nén JPG).

Các ví dụ sau đây liên quan đến windows là từ XP Pro SP 3, vì vậy khá an toàn khi giả sử tình huống ít nhất là ở cùng cấp độ trong Vista & 7.

Windows có các tùy chọn (trong XP) để sử dụng ClearType hoặc không. Không có ClearType, các phông chữ hiển thị như trong ảnh chụp màn hình của bạn. Đây là hình ảnh được phóng to rất nhiều từ hộp thoại của Windows mà không có CT:

bằng chứng 1

Bạn thấy đó là một hoạt động nhị phân: pixel là màu đen hoặc trong suốt. Bây giờ với một số trình duyệt hiện đại ngay cả khi không có CT, chúng thực hiện một số khử răng cưa. Đây là từ css-tricks.com với Windows XP & Chrome 8 và CT TẮT (như trong hình trước):

bằng chứng 2

Xem những gì đã xảy ra? Có lẽ bạn đã làm, như bạn đã nêu trong câu hỏi của bạn.

LƯU Ý: Tôi không nói về sự khác biệt khử răng cưa giữa các trình duyệt mới và các trình duyệt cũ (như giữa IE9 và IE6).

Bây giờ, ClearType !

Đây là cùng một văn bản từ hộp thoại Windows, lần này với CT: bằng chứng 3

Nếu bạn quan tâm đến những gì nó dựa trên, hãy xem bài viết Wikipedia về kết xuất pixel phụ . Và việc bật ClearType có ảnh hưởng đến kết xuất trình duyệt không? Văn bản "khác" tương tự với Windows XP & Chrome 8 và ClearType được BẬT: bằng chứng 4

Nó làm! Và trong khi chúng ta đang ở đó, tôi có thể thêm rằng (ít nhất) IE 8 sử dụng kết xuất ClearType ngay cả khi nó bị tắt ở cấp độ Windows.

So sánh văn bản khử răng cưa và văn bản ClearTyped trong 100% không triệt để bằng việc so sánh văn bản ClearTyped với văn bản không khử răng cưa. Nó đáng chú ý hơn, mặc dù:

aa: bằng chứng 5CT:bằng chứng 6

Để xem những gì trông giống như mà không khử răng cưa, chỉ cần nhìn vào ảnh chụp màn hình của littlemad .

Và để so sánh ở đây, cùng một "khác" trong kết xuất mặc định của OS X: bằng chứng 7 thậm chí còn táo bạo hơn ClearType.

Để trả lời câu hỏi của bạn: bất kỳ phông chữ . Nếu hệ điều hành của bạn hiển thị phông chữ khác nhau thì đó có thể là do bạn đã đặt hệ điều hành của mình để hiển thị phông chữ như vậy . HOẶC có thể là trình duyệt của bạn không có khả năng khử răng cưa hoặc ClearType.

Một câu hỏi khác là tại sao một số phông chữ hiển thị chính xác và một số không - nếu điều này thậm chí là trường hợp (nhưng tôi không thấy bất kỳ vấn đề nào trên trang web mà bạn đã đề cập trên Windows). Hoặc bạn đang yêu cầu các phông chữ sẽ trông đầy đủ mà không có bất kỳ kết xuất nào?

Và đây cũng là câu trả lời cho câu hỏi thường gặp: "Vâng, tôi biết tất cả những điều đó - tại sao ClearType trông khác với kết xuất của OS X?!"

Vì chúng khác nhau. Kết xuất Subpixel không phải là một điều nhẹ để thực hiện. ClearType là nhãn hiệu đã đăng ký của Microsoft và được bảo vệ với 10 bằng sáng chế (+ 1 đang chờ xử lý; xem wikipedia ). Họ không thể giống nhau.

— koiyu
nguồn
Đây là một CW, vì vậy chỉ cần chỉnh sửa nó nếu tôi sai; hoặc thêm chi tiết nếu bạn biết một số.
— Jari Keinänen
2
Giải thích tuyệt vời koiyu, đó là như tôi nghi ngờ, nhưng không thể chắc chắn cho đến khi anh ấy đăng một ảnh chụp màn hình
— JamesHenare
Bài viết của bạn làm tôi nghi ngờ. Tôi đã kiểm tra cài đặt của mình và tôi đã nhớ rằng khi tôi cài đặt OS Vista, tôi đã giảm đến mức tối thiểu tất cả các hiệu ứng để cải thiện hiệu suất. Và đoán xem? Cleartype đã bị vô hiệu hóa. Tôi là một người ngu ngốc, xin lỗi vì sự bất tiện. Bây giờ phông chữ trông tốt hơn nhiều, chắc chắn có thể đọc được. Vì vậy, biết câu hỏi của tôi là nhiều hơn: từ đó OS Cleartype không được cài đặt trên windows?
— Littlemad
@Littlemad không có vấn đề gì :) Tôi cũng rất hữu ích khi kiểm tra các nguồn để tôi có thể cung cấp một số câu trả lời thay vì một ý kiến đơn thuần .
— Jari Keinänen
1
@Littlemad, Cleartype được giới thiệu lần đầu tiên trong Windows XP, mặc dù đã tắt theo mặc định. Từ Windows Vista, nó được bật theo mặc định. Ngoài ra, trong Internet Explorer 7 trở đi, nó được bật ngay cả khi nó không được bật trong toàn bộ HĐH. Nguồn: en.wikipedia.org/wiki/ClearType
— JamesHenare
2

Nếu vấn đề giống như câu hỏi Stackoverflow mà bạn tham khảo thì đó cũng không phải là câu trả lời sao?

Đó là một vấn đề Gợi ý .

Khi bạn tạo bộ khuôn mặt phông chữ của mình (như trong FontSquirrel), bạn cần chỉ định Gợi ý trên các tùy chọn Chuyên gia.

Chọn Chuyên gia và trong Kết xuất, chọn:

Áp dụng Gợi ý - Cải thiện kết xuất Win.

— JamesHenare
nguồn
1
Không, nó không giống nhau, Gợi ý không giải quyết được vấn đề. Tôi đã sử dụng giải pháp được công bố trên web về Mặt chữ mà Fontsquirell đang sử dụng. Những gì tôi đang tìm kiếm là: ngay cả khi không được hiển thị tốt một số phông chữ, cái nào trông đủ tốt để sử dụng trên máy tính? và cỡ chữ nào? Tôi đang tìm kiếm một danh sách các phông chữ an toàn ở kích thước an toàn. Một loại tài liệu tham khảo "thực hành tốt nhất".
— Littlemad
Một thực hành tốt nhất là không sử dụng BẤT K font phông chữ web nhúng nào cho kích thước văn bản. Họ không được tối ưu hóa cho điều đó. Để lại cho họ tiêu đề và tiêu đề.
— DA01
1
@ DA01: Tôi là một nhà thiết kế web, tôi muốn thiết kế và sử dụng kiểu chữ tốt, tôi không thể bỏ qua các phông chữ, tôi muốn tìm hiểu những gì được chấp nhận để có thể sử dụng.
— Littlemad
@Littlemad Tôi cũng là một nhà thiết kế web muốn thiết kế và sử dụng kiểu chữ tốt. Tôi biết rằng việc nhúng khuôn mặt phông chữ, ít nhất là bây giờ, sử dụng hầu hết các kiểu chữ không được tối ưu hóa cho kích thước văn bản nhỏ trên màn hình. Họ thường thiếu gợi ý và số liệu của họ có thể thay đổi rất nhiều sự tàn phá nếu khuôn mặt nhúng không có sẵn cho một người dùng cụ thể. Sử dụng phông chữ hệ thống được tối ưu hóa cho kích thước văn bản trên màn hình đang sử dụng kiểu chữ tốt.
— DA01
1
@ DAO1: Vâng, tôi cũng không phải là một fan hâm mộ lớn của mô hình đó, nhưng tôi đã cố gắng chỉ ra rằng đó là vấn đề phông chữ tốt so với phông chữ xấu, không phải là phông chữ nhúng vốn đã xấu.
— Russell Leggett
1

ttfautohint có thể được sử dụng để xây dựng lại mã byte gợi ý của phông chữ; cài đặt mặc định (tương thích GDI) sẽ giúp các cửa sổ hiển thị phông chữ.

— Tobu
nguồn
0

Điều này không liên quan gì đến trình duyệt, nhưng chính windows.

Các hệ thống * nix (unix / linux và OSX được bao gồm trong này vì nó có cơ sở Unix) có tùy chọn kiểm soát chính xác cách hiển thị văn bản và thường được đặt thành hiển thị subpixel (có giải thích kỹ thuật hơn nhiều so với những gì tôi Tôi sẽ cung cấp cho bạn, nhưng về cơ bản, nó sử dụng các pixel con (các phần màu đỏ, xanh lục và xanh lam của các pixel màn hình của bạn) để hiển thị văn bản) trong đó Windows sử dụng Cleartype, đây là loại kết xuất mà tôi là một chút mờ trên cơ học.

Khá nhiều thứ chỉ là Windows không subpixel render, nó không phải là phông chữ hay tệp, mà là hệ điều hành hiển thị các phông chữ và tệp đó.

— dkuntz2
nguồn
Thx cho lời giải thích, nhưng tôi biết rằng vấn đề là Windows, nhưng tôi hỏi thêm: bạn đã kiểm tra hoặc sử dụng loại phông chữ nào trên trang web / trang web của khách hàng mà bạn đang sử dụng và vẫn trông "khá" trên windows?
— Littlemad
Trên thực tế, nó thay đổi tùy theo trình duyệt. Firefox và IE sẽ hiển thị cùng một phông chữ khác nhau, nếu chỉ vì một người sử dụng EOT và người kia sử dụng OTF / TTF / WOFF. Và ClearType cũng sử dụng kết xuất pixel phụ. Nhiều người chỉ thích khử răng cưa phông chữ của OS X trên các tùy chọn của Windows.
— Calvin Huang
@Littlemad, ý của bạn là "khá đàng hoàng", ý tôi là tôi đã tự cho mình biết thực tế là nó không hoàn hảo. Đây là Windows 8.
— dkuntz2
@Calvin Huang: vâng tôi biết về sự khác biệt của trình duyệt, nhưng nó không phải là vấn đề chính. Nó có liên quan đến hệ điều hành. Ngày nay trình duyệt hiển thị chính xác các răng cưa của phông chữ. Windows vẫn chưa. @DKuntz: Ý bạn là gì khi nói "Windows 8"? Tôi thấy nhiều người sử dụng trong trang web quan trọng khuôn mặt phông chữ, và thật sự rất xấu khi thấy nhà thiết kế giỏi làm điều đó. Vì vậy, tôi đang tìm kiếm một giải pháp xấu ít hơn, vẫn còn tệ, nhưng ít nhất là đủ tốt để không trông giống như một loại văn bản thứ 16. Nếu không, tôi phải sử dụng giải pháp js để kiểm tra trình duyệt của bạn và vượt qua kiểu css nếu bạn là mac hoặc pc
— Littlemad
4
Giải thích này không chính xác, hoặc ít nhất là không đầy đủ. Windows thực hiện khử răng cưa subpixel - đó là những gì Cleartype đang có, và đã có ở đó kể từ XP. So với OS X Windows không thực hiện kết xuất phông chữ không chính xác , nó lại khác biệt - sự khác biệt là chủ quan và bạn sẽ tìm thấy những người thích cách hiển thị phông chữ trên Windows. Ngoài ra, các trình duyệt trên Windows cũng sử dụng các phương thức kết xuất khác nhau - ví dụ: tất cả các phông chữ ở kích thước lớn trên Firefox lên tới 3.6 trên Windows sẽ hiển thị các răng cưa có thể nhìn thấy. Điều này được giải quyết trong phiên bản 4 bằng cách chuyển sang API DirectWrite.
— Yi Jiang
0

Sử dụng mã dưới đây trong CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

Nó có thể giúp bạn

— nhà thiết kế web tự do hyderab
nguồn
2
Xin vui lòng bạn có thể hiển thị một đoạn mã để cho người đọc thấy ý của bạn là gì?
— Mensch 17/03/13
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.