Wajah font yang dimuat di Windows terlihat sangat buruk. Font mana yang Anda gunakan agar lebih baik?

27

EDIT : Masalahnya adalah saya tidak mengaktifkan "Cleartype" di pengaturan saya di Vista. Pertanyaan ini mungkin tidak memiliki banyak arti jika Anda telah menginstal Cleartype / diaktifkan pada OS Windows.

Angin tipografi baru telah tiba di web, dengan properti font-face dari CSS3 dapat memuat font selain dari OS / set sistem. Mac saya membuat banyak dengan sempurna sementara mesin Windows saya tidak. Kumpulan font apa yang harus saya gunakan yang akan membuat lebih baik di Windows?

Ini mirip dengan pertanyaan tentang Stack Overflow.

Dan di sini contoh situs web yang terlihat buruk ditampilkan di PC dengan Myriad Pro: http://css-tricks.com/

CATATAN: Saya tidak berbicara tentang perbedaan antialiasing antara versi browser (seperti antara IE9 dan IE6).

Saya mengharapkan jawaban dari tes Anda, daftar font plus ukuran (silakan gunakan px) yang terlihat baik, atau setidaknya dengan cara yang dapat digunakan untuk teks pendek atau judul kecil.

Misalnya, saat ini "League Gothic, 30px" terlihat seperti berikut:

masukkan deskripsi gambar di sini

font-face  subpixel-rendering 
— Littlemad
sumber
Bisakah Anda memberikan detail lebih lanjut: Pada browser apa browser itu tidak berfungsi dengan baik? Bisakah Anda menunjukkan beberapa contoh tangkapan layar? Mungkin ada masalah mendasar yang mendasari rendering di sini daripada masalah font
— Pekka mendukung GoFundMonica
2
Ini bukan hanya masalah browser, tetapi Sistem Operatif. Windows memiliki rendering font yang berbeda sehubungan dengan yang Mac Os. Saya tidak punya mac dengan saya (hanya Ipod Touch) saat ini, dan saya tidak dapat menunjukkan perbedaannya, tetapi bahkan pada browser yang diterjemahkan dengan baik untuk antialiasing, font wajah tidak diimplementasikan dengan baik untuk font OS bukan standar. Saya bertanya-tanya (karena saya memiliki serangkaian font), yang digunakan orang yang tidak terlalu jelek di PC.
— Littlemad
@Yi Jiang: Tepat karena jumlah font sangat besar, dan tidak mungkin untuk menguji semuanya, atau untuk memiliki semuanya, bahwa saya bertanya apa, dari pengalaman semua orang, apa "font dan ukuran yang aman" menggunakan. Saya dapat melihat bahwa tidak ada yang memposting apa pun, dan saya tidak tahu apakah ada orang yang memposting sesuatu (atau memang mencoba menganalisis render font pada PC), jadi saya lebih sedih karena tidak mendapat umpan balik.
— Littlemad
"jenis yang layak" adalah murni subjektif.
— DA01

Jawaban:

18

Ini harus menjadi komentar (maka membuat CW ini), tapi saya pikir ada beberapa kesalahpahaman dan asumsi yang salah dalam pertanyaan. Karena Anda jelas ingin agar pertanyaan ini dijawab (Anda telah menawarkan hadiah), inilah dua sen saya.

Dari tangkapan layar Anda, menurut saya Anda telah mengatur Windows Anda untuk me-render font secara teratur (tidak seperti rendering subpixel) dan mungkin browser Anda tidak melakukan antialiasing (mungkin, tetapi kemudian hilang dengan kompresi JPG).

Contoh-contoh berikut yang berhubungan dengan windows adalah dari XP Pro SP 3, jadi cukup aman untuk mengasumsikan situasinya setidaknya dalam level yang sama di Vista & 7.

Windows memiliki (dalam XP) opsi untuk menggunakan ClearType atau tidak. Tanpa ClearType font akan ditampilkan seperti pada tangkapan layar Anda. Ini adalah gambar yang sangat diperbesar dari dialog Windows tanpa CT:

bukti 1

Anda melihatnya adalah operasi biner: piksel berwarna hitam atau transparan. Sekarang dengan beberapa browser modern bahkan tanpa CT, mereka melakukan beberapa anti-aliasing. Ini dari css-tricks.com dengan Windows XP & Chrome 8 dan CT tidak aktif (seperti pada gambar sebelumnya):

bukti 2

Lihat apa yang terjadi? Mungkin Anda sudah melakukannya, seperti yang Anda nyatakan dalam pertanyaan Anda.

CATATAN: Saya tidak berbicara tentang perbedaan antialiasing yang ada antara browser baru dan yang lama (seperti antara IE9 dan IE6).

Sekarang, ClearType !

Berikut adalah teks yang sama persis dari dialog Windows, kali ini dengan CT: bukti 3

Jika Anda tertarik pada apa ini didasarkan, lihat artikel Wikipedia tentang rendering subpixel . Dan apakah mengaktifkan ClearType mempengaruhi rendering browser? Teks "lain" yang sama dengan Windows XP & Chrome 8 dan ClearType AKTIF: bukti 4

Itu benar! Dan sementara kita melakukannya, saya mungkin menambahkan bahwa (setidaknya) IE 8 menggunakan rendering ClearType bahkan jika itu dinonaktifkan di tingkat Windows.

Membandingkan teks antialiased dan ClearTyped dalam 100% tidak seradikal membandingkan teks ClearTyped dengan non-antialiased. Itu jelas lebih berani, meskipun:

aa: bukti 5CT:bukti 6

Untuk melihat seperti apa tanpa antialiasing, lihat saja screenshot littlemad .

Dan untuk perbandingan inilah "yang lain" yang sama dalam rendering default OS X: bukti 7 bahkan lebih berani daripada ClearType.

Untuk menjawab pertanyaan Anda: font apa saja . Jika sistem operasi Anda membuat font berbeda mungkin karena Anda telah mengatur sistem operasi Anda untuk membuat font demikian . ATAU mungkin saja browser Anda tidak mampu antialiasing atau ClearType.

Pertanyaan lain adalah mengapa beberapa font ditampilkan dengan benar dan sebagian tidak - jika ini masalahnya (tapi saya tidak melihat masalah di situs yang Anda sebutkan di Windows). Atau apakah Anda meminta font yang terlihat memadai tanpa rendering apa pun?

Dan ini juga jawaban untuk pertanyaan yang sering diajukan: "Ya, saya tahu semua itu - mengapa ClearType terlihat berbeda dari rendering OS X ?!"

Karena mereka berbeda. Render subpixel bukanlah hal yang ringan untuk diterapkan. ClearType adalah merek dagang terdaftar Microsoft dan dilindungi dengan 10 paten (+1 menunggu; lihat wikipedia ). Mereka tidak bisa sama.

— koiyu
sumber
Ini adalah CW, jadi edit saja jika saya salah; atau tambahkan detail jika Anda tahu.
— Jari Keinänen
2
Penjelasan bagus koiyu, itu seperti yang saya duga, tetapi tidak bisa memastikan sampai dia memposting tangkapan layar
— JamesHenare
Posting Anda membuat saya ragu. Saya memeriksa pengaturan saya, dan saya ingat ketika saya menginstal OS Vista, saya mengurangi semua efek untuk meningkatkan kinerja. Dan coba tebak? Cleartype dinonaktifkan. Saya orang yang bodoh, maaf atas ketidaknyamanan ini. Sekarang font terlihat jauh lebih baik, pasti bisa dibaca. Jadi tahu pertanyaan saya lebih: dari mana OS Cleartype tidak diinstal pada windows?
— Littlemad
@Littlemad tidak masalah :) Itu berguna bagi saya juga untuk memeriksa sumber sehingga saya bisa memberikan semacam jawaban, bukan pendapat belaka .
— Jari Keinänen
1
@Littlemad, cleartype pertama kali diperkenalkan di Windows XP, meskipun dimatikan secara default. Dari Windows Vista sekarang diaktifkan secara default. Juga di Internet Explorer 7 dan seterusnya diaktifkan meskipun tidak diaktifkan di seluruh OS. Sumber: en.wikipedia.org/wiki/ClearType
— JamesHenare
2

Jika masalahnya sama dengan pertanyaan Stackoverflow yang Anda referensi, bukankah jawabannya juga sama ?

Itu masalah petunjuk .

Saat Anda membuat kit font-face Anda (seperti di FontSquirrel), Anda perlu menentukan Petunjuk pada opsi Expert.

Pilih Pakar, dan di bawah Rendering, pilih:

Terapkan Petunjuk - Tingkatkan rendering Win.

— James Henry
sumber
1
Tidak itu tidak sama, Petunjuk tidak menyelesaikan masalah. Saya sudah menggunakan solusi yang diterbitkan di web tentang Font-Face yang digunakan Fontsquirell. Apa yang saya cari adalah: bahkan jika tidak diberikan dengan baik beberapa font, mana yang terlihat cukup layak untuk digunakan pada pc? dan pada ukuran font apa? Saya mencari daftar font yang aman dengan ukuran yang aman. Semacam referensi "praktik terbaik".
— Littlemad
Praktik terbaik adalah tidak menggunakan font web APA SAJA untuk ukuran teks. Mereka tidak dioptimalkan untuk itu. Tinggalkan untuk judul dan tajuk.
— DA01
1
@ DA01: Saya seorang desainer web, saya ingin mendesain dan menggunakan tipografi yang baik, saya tidak bisa mengabaikan font, saya ingin mencari tahu apa yang dapat diterima untuk dapat digunakan.
— Littlemad
@Littlemad Saya juga seorang desainer web yang ingin mendesain dan menggunakan tipografi yang baik. Saya tahu bahwa penyisipan font-face, setidaknya untuk saat ini, menggunakan sebagian besar tipografi yang tidak dioptimalkan untuk ukuran teks kecil di layar. Mereka sering memiliki kekurangan petunjuk dan metrik mereka dapat sangat bervariasi mendatangkan malapetaka jika wajah yang disematkan tidak tersedia untuk pengguna tertentu. Menggunakan font sistem yang dioptimalkan untuk ukuran teks pada layar yang menggunakan tipografi yang baik.
— DA01
1
@ DAO1: Ya, saya juga bukan penggemar berat model itu, tetapi saya mencoba menunjukkan bahwa ini masalah font yang baik vs buruk, bukan bahwa font yang tertanam pada dasarnya buruk.
— Russell Leggett
1

ttfautohint dapat digunakan untuk membangun kembali bytecode yang mengisyaratkan font; pengaturan default (kompatibel GDI) akan membantu windows me-render font.

— Tobu
sumber
0

Ini tidak ada hubungannya dengan browser, tetapi windows itu sendiri.

* sistem nix (unix / linux, dan OSX termasuk dalam ini karena memiliki basis Unix) memiliki opsi untuk mengontrol dengan halus bagaimana teks ditampilkan, dan umumnya diatur ke rendering subpixel (yang memiliki penjelasan teknis yang jauh lebih banyak daripada apa yang saya akan memberi Anda, tetapi pada dasarnya menggunakan subpixels (bagian merah, hijau, dan biru dari piksel layar Anda) untuk membuat teks) di mana Windows menggunakan cleartype, yang merupakan jenis render sendiri yang saya sedikit kabur pada mekanik.

Cukup banyak hanya karena Windows tidak membuat subpixel, itu bukan font atau file, tetapi sistem operasi yang menampilkan font dan file tersebut.

— dkuntz2
sumber
Terima kasih untuk penjelasannya, tetapi saya tahu bahwa masalahnya adalah Windows, tetapi saya bertanya lebih banyak: jenis font apa yang Anda uji atau gunakan di situs web / klien-situs web yang Anda gunakan dan masih terlihat "cukup" layak di windows?
— Littlemad
Sebenarnya, ini bervariasi dari browser ke browser. Firefox dan IE akan membuat font yang sama secara berbeda, jika hanya karena satu menggunakan EOT dan yang lainnya menggunakan OTF / TTF / WOFF. Dan ClearType juga menggunakan rendering subpixel. Banyak orang lebih suka antialiasing font OS X daripada opsi Windows.
— Calvin Huang
@Littlemad apa yang Anda maksud dengan "cukup layak", maksud saya, saya baru saja menyerahkan diri pada kenyataan bahwa itu tidak menghasilkan dengan baik. Ini untuk Windows 8.
— dkuntz2
@ Calvin Huang: ya saya tahu tentang perbedaan rendering browser, tapi itu bukan masalah utama. Ini terkait OS. Browser saat ini membuat aliasing font dengan sopan. Windows masih belum. @ Duntuntz: Apa yang Anda maksud dengan mengatakan "Windows 8"? Saya melihat banyak orang menggunakan situs web penting font-face, dan itu benar-benar jelek untuk melihat bahwa desainer yang baik melakukan itu. Jadi saya mencari solusi jahat yang lebih sedikit, masih jelek, tetapi setidaknya cukup layak untuk tidak terlihat seperti jenis teks Commodore 16. Kalau tidak, saya harus menggunakan solusi js untuk memeriksa browser Anda dan memberikan gaya css jika Anda mac atau pc
— Littlemad
4
Penjelasan ini salah, atau setidaknya tidak lengkap. Windows memang melakukan subpixel anti-aliasing - itulah Cleartype, dan telah ada sejak XP. Dibandingkan dengan OS X Windows tidak melakukan rendering font yang salah , ia melakukannya secara berbeda - perbedaannya paling subjektif, dan Anda akan menemukan orang-orang yang lebih suka bagaimana rendering font pada Windows. Selain itu, browser di Windows juga menggunakan metode rendering yang berbeda - misalnya, semua font dengan ukuran besar di Firefox hingga 3,6 pada Windows akan menampilkan jaggies yang terlihat. Ini diselesaikan dalam versi 4 dengan beralih ke DirectWrite API.
— Yi Jiang
0

Gunakan kode di bawah ini dalam CSS

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

Mungkin membantu Anda

— desainer web freelance hyderab
sumber
2
Tolong bisakah Anda lebih baik menunjukkan sepotong kode untuk menunjukkan kepada pembaca apa yang Anda maksud?
— Mensch
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.