Bagaimana cara membuat font render dengan cara yang sama di berbagai browser web?

Saya sedang membangun situs web untuk klien, dan kami berharap dapat menggunakan teks biasa, bukan gambar di bilah navigasi. Font yang kami gunakan adalah Century Gothic (saya percaya bahwa font ini tersedia di sebagian besar PC dan Mac) Masalahnya adalah, bahwa pada browser yang berbeda font membuat perbedaan signifikan. Di Chrome kami membuatnya seperti yang kami inginkan, tetapi di firefox teksnya lebih kecil dan lebih tebal.

Selain menulis javascript khusus peramban untuk mengubah properti font, apakah ada opsi lain untuk menstandarisasi cara font tersebut diberikan lintas-browser. Mungkin beberapa perpustakaan atau API? Mungkin ini masalah lebih spesifik dalam mendeklarasikan properti font? Jujur saya macet dan butuh bantuan.

website-design fonts cross-browser

— Zach Lysobey
sumber

Jawaban:

Anda tidak akan mendapatkan font, dan beberapa hal lainnya, untuk di-render secara identik di seluruh browser. Penanganan font adalah contoh sempurna. Saya tahu Safari di Windows suka membuat teks tebal untuk beberapa alasan. Sayangnya ini adalah cara kerja web. Variasi browser, OS, monitor, prosesor grafis, dll, di luar sana berarti ada ribuan atau puluhan ribu cara berbeda yang bisa dilakukan seseorang untuk melihat halaman web. Jadi ketika membangun untuk Anda harus melakukannya mengetahui dan berharap bahwa situs Anda tidak akan menjadi pixel yang sempurna untuk semua orang. Ini bukan cetak. Ini web liar liar.

— John Conde
sumber

Ya, sepertinya ini adalah kenyataan yang tidak menguntungkan. Namun tampaknya bahwa mungkin bagi seseorang untuk menulis sepotong javaScript yang akan membuat hal-hal sedikit lebih dekat dengan normalisasi.

— Zach Lysobey

Sayangnya ini bukan masalah kode tetapi masalah perangkat lunak dan perangkat keras. Begitulah cara browser dikembangkan dan dengan akselerasi perangkat keras yang datang itu akan menjadi lebih buruk (walaupun font Anda akan terlihat lebih halus bagi mereka yang telah mengaktifkannya).

— John Conde

Artikel ini (dan yang lainnya dalam seri yang sama) menjelaskan masalah dengan sangat rinci, jika Anda penasaran. blog.typekit.com/2010/12/17/…

— paulmorriss

Pilih jawaban Anda sebagai yang terbaik. Anda mengatakan ini bukan masalah kode, tetapi tentu saja seseorang dapat menulis kode sehingga satu baris teks direntangkan ke lebar minimum dalam piksel. Itu sendiri akan sangat memperbaiki situasi ini. Itu bisa menguji lebar <p> yang diberikan dan meningkatkan jarak huruf yang sesuai. Mungkin?

— Zach Lysobey

@ Zak - Anda dapat mengatasi banyak kendala dengan perencanaan dan pengkodean yang cerdas. Tetapi pada akhirnya kita dapat memiliki begitu banyak kendali. Pada dasarnya jika Anda dapat menerima masalah seperti Safari di Windows dan kode di sekitar yang lain Anda juga harus.

— John Conde

Sebenarnya ada metode menanamkan font di CSS Anda. Sangat mudah. Rujuk ke http://randsco.com/index.php/2009/07/04/p680 untuk informasi lebih lanjut tentang cara melakukan ini. Kelemahan dari ini adalah browser yang lebih lama (pre ei 7 dan ff 3 saya pikir ...) tidak mendukung ini. Tetapi jumlah orang yang menggunakan browser lama ini berkurang dengan cepat dan masih memungkinkan untuk menentukan fonta alternatif yang akan berfungsi dan biasanya pada sebagian besar komputer untuk berjaga-jaga.

Pendekatan lain yang belum saya gunakan melibatkan menggunakan flash. Saya tidak punya banyak informasi tentang ini selain yang saya tahu.

— Kenneth
sumber

Pada catatan css pastikan untuk hanya menggunakan font yang Anda tidak akan melanggar hak cipta jika font tersebut diambil oleh orang lain seperti ketika Anda menggunakan metode css file font tersedia untuk semua orang yang dapat mengakses situs web Anda.

— Kenneth

Metode Flash itu disebut sIFR . Ini memiliki pro dan kontra juga.

— John Conde

Seperti yang disebutkan pada jawaban lain walaupun menggunakan pendekatan ini akan ada sedikit perbedaan antara browser dan sistem tetapi ada hal-hal yang dapat Anda lakukan dengan sisa desain situs Anda yang dapat mengkompensasi dan membuat situs merender dengan baik di semua konfigurasi yang berbeda. Satu hal utama adalah memiliki beberapa browser dan lebih baik sistem operasi untuk menguji situs Anda.

— Kenneth

Seperti yang telah dicatat oleh orang lain, kami tidak memiliki kontrol total. Tetapi saya pikir perlu menyebutkan beberapa hal yang menurut saya membantu dalam membuat browser membuat hal yang sama secara keseluruhan. Keduanya adalah "kembali ke dasar" hal-hal yang banyak dari Anda sudah lakukan, tetapi saya pikir mereka layak disebutkan karena fondasi yang Anda bangun sering membuat Anda sukses atau gagal ...

Reset CSS. Konsepnya sederhana, Anda menetapkan default tag HTML dalam stylesheet untuk menetapkan titik awal yang umum untuk rendering HTML. Berikut ini adalah artikel dan contoh: http://meyerweb.com/eric/tools/css/reset/

Deklarasi Doctype. http://htmlhelp.com/tools/validator/doctype.html

— ph33nyx
sumber