Font standar terbaik. Font sistem, koneksi

Salah satu tugas utama desain web adalah memilih yang tepat font standar. Layanan penyematan font seperti Google Web Fonts atau Typekit diciptakan sebagai alternatif dengan tujuan memberikan sesuatu yang baru.

Mereka sangat mudah digunakan. Mari kita ambil Google Web Font sebagai contoh.

Pilih font Open Sans, Droid Serif atau Lato. Tulis kode dan tempelkan ke dalam elemen dokumen HTML. Anda siap mereferensikannya dalam CSS! Seluruh proses memakan waktu tidak lebih dari 60 detik. Dan semuanya sepenuhnya gratis.

Apa yang salah?

Beberapa font mungkin tidak tersedia untuk semua orang. Ini berarti mungkin ada masalah. Anda senang telah memilih font yang indah untuk situs Anda, tetapi pengunjung halaman web malah melihat tulisan jelek.

Ini tidak akan terjadi jika Anda menerapkan opsi pencadangan.

Seberapa pentingkah menggunakan font web yang aman?

Setiap perangkat memiliki kumpulan font pra-instalnya sendiri. Yang mana tergantung sistem operasinya. Masalahnya adalah ada sedikit perbedaan di antara keduanya.

Bagaimana dengan situs web? Seperti yang ini? Font yang Anda lihat mungkin bukan font yang awalnya ditentukan untuk situs tersebut.

Apa artinya? Katakanlah perancang telah memilih beberapa jenis font berbayar untuk situsnya. Jika Anda belum menginstalnya dan tidak disediakan oleh layanan web khusus, maka font yang Anda lihat adalah salah satu opsi standar. Misalnya Times New Roman.

Oleh karena itu, teks di layar Anda mungkin terlihat sangat buruk.

Dan di sini font standar untuk situs tersedia di semua sistem operasi. Ini adalah koleksi kecil yang tersedia di Windows, Mac, Google, serta Unix dan Linux.

Dengan bantuan pilihan ini, desainer serta pemilik website dapat menentukan font mana yang sebaiknya digunakan sebagai font cadangan. Ini memberi Anda kemampuan untuk mengontrol tampilan halaman di perangkat yang berbeda.

Sebagai opsi cadangan, pengembang memilih font yang sangat mirip dengan font aslinya, dan font inilah yang akan ditampilkan kepada pengguna.

Mari kita lihat pilihan yang paling populer font standar HTML.

15 Font Aman Web Terbaik

1. Arial

Dianggap standar dalam banyak kasus. Font paling umum " Sans Serif"atau font sans serif ( yang tidak memiliki serif di akhir hurufnya). Ini sering digunakan di Windows untuk menggantikan karakter lain.

1. Helvetica

Helvetica adalah penyelamat bagi para desainer. Ini font web standar hampir selalu berfungsi ( setidaknya sebagai jaring pengaman untuk font lainnya).

1. Times New Roman

Memiliki peran yang sama untuk font serif seperti halnya Arial untuk font sans serif. Ini adalah salah satu yang paling populer Perangkat Windows. Ini adalah versi terbaru dari font Times lama.

1. Waktu

CSS font standar The Times sudah tidak asing lagi bagi sebagian besar orang. Banyak orang mengingatnya dalam huruf-huruf kecil di kolom-kolom sempit surat kabar bekas. Jenis percetakan paling umum yang sudah menjadi tradisi.

1. Kurir Baru

Mirip dengan Times New Roman dan digunakan sebagai variasi klasik lama. Ini juga dianggap sebagai font monospace. Berbeda dengan font serif dan sans serif, semua karakternya memiliki lebar yang sama.

1. Kurir

Font lama dengan lebar tetap yang digunakan sebagai cadangan di hampir semua perangkat dan sistem operasi.

1. Verdana

Verdana berhak dianggap sebagai font web yang sebenarnya ( font web yang sebenarnya) berkat garis sederhana yang berfungsi sebagai serif, serta ukurannya yang besar. Hurufnya agak memanjang sehingga mudah dibaca di layar.

1. Georgia

Font web standar Georgia memiliki bentuk dan ukuran yang mirip dengan font Verdana. Karakternya lebih besar dari font lain dengan ukuran yang sama. Tapi lebih baik tidak menggunakannya bersamaan dengan yang lain. Times New Roman yang sama terlihat seperti kurcaci jika dibandingkan.

1. Palatino

Palatino berasal dari era Renaisans. Tidak ada lelucon. Ini adalah font besar lainnya yang sempurna untuk web. Ini biasanya digunakan dalam berita utama dan iklan.

1. Garamond

Font kuno lainnya yang muncul pada abad ke-16 di Paris. Versi baru dan lebih baik menjadi standar pada sebagian besar perangkat Windows. Belakangan, font ini diadopsi oleh sistem operasi lain.

1. Sarjana

Bookman ( atau Bookman Gaya Lama) - satu dari font standar terbaik untuk judul. Ciri khasnya adalah keterbacaan meskipun menggunakan ukuran kecil.

1. Komik Sans MS

Comic Sans MS adalah alternatif menyenangkan untuk font serif.

1. Trebuchet MS

Ini adalah font bertema abad pertengahan yang awalnya dikembangkan oleh Microsoft pada pertengahan tahun sembilan puluhan. Itu digunakan di Windows XP. Saat ini, digunakan untuk menyusun teks utama.

Fitur khusus Runet adalah masalah dengan pengkodean halaman dan dukungan untuk font Cyrillic. Untuk menghindari masalah dengan berbagai pengkodean karakter, orang pintar telah menemukan font yang memungkinkan Anda menggabungkan karakter dari beberapa bahasa dalam satu font. Jadi, untuk halaman berbahasa Rusia, Anda hanya perlu menggunakan font Unicode yang mendukung Cyrillic.

Di bawah ini adalah tabel korespondensi font.

jendela	macOS	Unix/Linux	keluarga leluhur
Arial Hitam	Helvetica C.Y.	Nimbus Sans L	Sans Serif
Arial	Helvetica C.Y.	Nimbus Sans L	Sans Serif
Komik Sans MS	Monako CY	* (Lihat di bawah)	kursif
Kurir Baru	* (Lihat di bawah)	Nimbus Mono L	Ruang tunggal
Georgia	* (Lihat di bawah)	Buku Sekolah Century L	Serif
Dampak	Arang C.Y.	* (Lihat di bawah)	Sans Serif
Times New Roman	Kali C.Y.	Nimbus Romawi No9 L	Serif
Trebuchet MS	Helvetica C.Y.	* (Lihat di bawah)	Sans Serif
Verdana	Jenewa C.Y.	DejaVu Tanpa	Sans Serif

* di kolom di seberang font berarti sistem operasi tidak memiliki font Cyrillic asli yang setara dengan font Windows. Tetapi pada saat yang sama, ada kemungkinan besar bahwa font ini sendiri diinstal langsung di sistem operasi.

Misalnya, jika teks utama tata letaknya adalah Arial, kami menemukan font ini di tabel dan menulis baris yang sesuai dalam CSS:

Badan (keluarga font: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )

Entri ini berarti jika pengguna memiliki font Arial (dan semua pengguna Windows dan semua pengguna Mac OS X memilikinya), maka halaman akan ditampilkan dalam font ini. Jika pengguna tidak memiliki font ini, maka halaman pengguna Mac OS 9 berbahasa Rusia akan ditampilkan secara akurat dalam font sistem standar Helvetica CY, dan untuk pengguna Unix/Linux akan ditampilkan dalam font Nimbus Sans L , yang diinstal pada 90% pengguna Unix/Linux. Jika pengguna Unix/Linux termasuk dalam 10% yang tidak memiliki font ini, maka halaman akan ditampilkan dalam font serif yang diatur secara default untuk melihat halaman Web.

Contoh penggaris seperti itu bisa dilihat misalnya di Dreamweaver.

Perancang tata letak pemula memilih penggaris berdasarkan font pertama tanpa memikirkan apa arti garis panjang ini. Beberapa bahkan menghapus semuanya kecuali font pertama, membuat semua pengguna yang, karena alasan tertentu, tidak menginstal font ini, tidak dapat melihat maksud dari perancangnya.

Tapi sekarang kita tahu apa arti garis ini, bukan? Dan kita sudah bisa menggunakannya dengan benar.

Namun mengapa jalur yang kami buat sangat berbeda dari jalur biasanya di Dreamweaver:

Isi (keluarga font: Arial, Helvetica, sans-serif; )

Selain fakta bahwa tabel tersebut memperhitungkan font Unix/Linux, ada juga beberapa ikon CY yang aneh setelah Helvetica biasa. Mari kita cari tahu apa itu!

Sebelum rilis Mac OS X, baris ini memiliki arti sebagai berikut: untuk pengguna Windows, kami menampilkan halaman dalam Arial, untuk pengguna Mac OS 9, dalam font Helvetica standar, dan selebihnya, kami melihat halaman di sistem font sans-serif, yang dikonfigurasi secara default di browser. Tapi sekali lagi, nuansa penting! Font standar Mac OS 9 Helvetica tidak memiliki Cyrillic! Untuk halaman berbahasa Rusia, ini berarti sebagai berikut: untuk pengguna Windows kami menampilkan halaman Arial, untuk pengguna Mac OS 9 - dalam font Helvetica standar, yang menampilkan informasi yang tidak dapat dibaca, dan sisanya melihat halaman dengan sistem sans-serif font dikonfigurasi secara default di browser.

Untuk menampilkan kumpulan ini dengan benar bagi pengguna Mac OS 9, alih-alih Helvetica non-Cyrillized, masuk akal untuk menentukan font standar Mac OS 9 yang sama Helvetica CY, yang berisi Cyrillic.

Pembacaan penggaris telah berubah sejak dirilisnya Mac OS X. Sekarang ada satu font standar umum yang ditentukan untuk Windows/Mac OS X. Dan jika kita ingin pengguna Mac OS 9 dapat melihat maksud dari perancangnya, kita perlu menyertakan font yang mengandung Cyrillic di baris font.

Jadi, meskipun tidak ada font yang aman, ada jenis font yang aman. Mereka juga dipanggil tumpukan font CSS. Selain font standar Windows/Mac OS X, baris ini juga dapat menyertakan font setara dari kumpulan standar Mac OS 9 (yang tidak berisi font “aman” secara default) dan font Unix/Linux yang umum.

Setiap perancang tata letak cepat atau lambat akan menghadapi momen ketika seorang perancang menggunakan font dalam tata letak yang tidak termasuk dalam daftar font "aman"; Tapi ini belum menjadi alasan untuk membunyikan alarm! Misalnya, desainer sangat sering menggunakan font Tahoma pada tata letaknya, yang tidak termasuk dalam daftar ini. Jajaran font yang dibuat dengan benar membuka kemungkinan untuk menggunakan tidak hanya Tahoma, tetapi juga font lainnya. Semakin banyak desainer yang memanfaatkan peluang ini, dan desainer tata letak yang kompeten harus mengetahui hal ini.

Di bawah ini adalah tabel font tambahan yang tidak termasuk dalam daftar font “aman”, namun dapat digunakan dalam tata letak.

jendela	macOS	keluarga leluhur
Konsol Lucida	Monako	Ruang tunggal
Lucida Tanpa Unicode	Lucida Grande	Sans Serif
Tahoma	Jenewa C.Y.	Sans Serif

Bagaimana jika tidak ada alfabet Sirilik?

Untuk teks berbahasa Inggris, tabel di atas memiliki tampilan yang sedikit berbeda.

jendela	macOS	Unix/Linux	keluarga leluhur
Arial Hitam	Gawai	Nimbus Sans L	Sans Serif
Arial	Helvetica	Nimbus Sans L	Sans Serif
Komik Sans MS	Monako	TSCu_Komik	kursif
Kurir Baru	Kurir	Nimbus Mono L	Ruang tunggal
Georgia	* (Lihat di bawah)	Buku Sekolah Century L	Serif
Dampak	Arang	Rekha	Sans Serif
Times New Roman	Waktu	Nimbus Romawi No9 L	Serif
Trebuchet MS	Helvetica	Garuda	Sans Serif
Verdana	Jenewa	DejaVu Tanpa	Sans Serif

Untuk font Arial, Courier New dan Times New Roman, saat membuat penggaris, sebaiknya tentukan font Unix/Linux terlebih dahulu, lalu font Mac OS. Hal ini disebabkan oleh beberapa kebengkokan pada kumpulan font inti Linux X11.

Font yang tidak termasuk dalam daftar "aman", tetapi dapat digunakan dalam tata letak, lebih baik ditentukan oleh tumpukan font CSS berdasarkan tabel ini.

jendela	macOS	Unix/Linux	keluarga leluhur
Konsol Lucida	Monako	—	Ruang tunggal
Lucida Tanpa Unicode	Lucida Grande	Garuda	Sans Serif
Linotipe Palatino	Palatino	Garuda**	Sans Serif
Tahoma	Jenewa	Kalimati	Sans Serif

Tanda hubung di kolom Unix/Linux menunjukkan bahwa pengguna sistem operasi ini kemungkinan besar akan melihat font default di halaman.

Font adalah bagian integral dan sangat penting dari desain situs web, yang menekankan individualitasnya. Artikel ini akan membahas tentang menghubungkan font standar ke halaman web, mereka juga disebut font sistem.

Sistem, standar, font aman

Browser apa pun hanya menampilkan font yang ada di sistem operasi komputer. Itu sebabnya mereka disebut sistem dan diinstal secara default bersama dengan sistem operasi.

Dan disebut font aman karena kemungkinan besar akan ditampilkan di browser sebagian besar pengunjung situs web.

Namun masalahnya adalah sistem operasi yang berbeda memiliki kumpulan font yang berbeda. Anda dapat melihat kumpulan font yang disediakan beserta sistem operasinya di halaman resmi Windows dan Mac OS. Dan di Unix/Linux tidak ada standar yang ditetapkan sama sekali.

Agar halaman Internet ditampilkan sesuai dengan ide perancang, properti font bernama font-family dipasang di CSS

properti font-keluarga

Properti font-family adalah keluarga font yang dikelompokkan berdasarkan karakteristik tertentu.

Keluarga generik:

• serif - font dengan serif di ujungnya;
• sans-serif - font sans-serif;
• kursif - font miring;
• fantasi - font dekoratif;
• monospace - font monospace (dengan huruf dengan lebar yang sama).

Dengan cara ini, font serupa dari sistem operasi berbeda cukup dipilih dan dihubungkan ke halaman Internet dengan dipisahkan dengan koma.

Berikut ini contohnya, hanya untuk persepsi visual. Kita akan kembali ke contoh ini nanti ketika kita mempertimbangkan untuk menghubungkan font secara langsung.

Ikuti saja logikanya dan semuanya akan menjadi jelas.

Isi ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; ) Mari kita analisa apa yang tertulis:

• OS Windows - Arial;
• OC Mac OS - Helvetica CY;
• OC Unix/Linux - Nimbus Sans L;
• Keluarga generik - sans-serif.

Yang disebut font aman

Berdasarkan OS Windows, daftar beberapa font aman telah disusun.

1. Arial
2. Arial Hitam
3. Komik Sans MS
4. Kurir Baru
5. Georgia
6. Dampak
7. Times New Roman
8. Trebuchet MS
9. Verdana

Semua font ini diinstal pada Mac OS X, Windows, dan banyak pengguna Unix/Linux yang menginstal font Core untuk paket Web.

Untuk pengguna lain, tabel korespondensi disediakan. Ini berisi font serupa milik keluarga tertentu.

Tabel korespondensi dan kepemilikan font pada keluarga tertentu:

jendela	macOS	Unix/Linux	keluarga leluhur
Arial Hitam	Helvetica C.Y.	Nimbus Sans L	Sans Serif
Arial	Helvetica C.Y.	Nimbus Sans L	Sans Serif
Komik Sans MS	Monako CY	* (Lihat di bawah)	kursif
Kurir Baru	* (Lihat di bawah)	Nimbus Mono L	Ruang tunggal
Georgia	* (Lihat di bawah)	Buku Sekolah Century L	Serif
Dampak	Arang C.Y.	* (Lihat di bawah)	Sans Serif
Times New Roman	Kali C.Y.	Nimbus Romawi No9 L	Serif
Trebuchet MS	Helvetica C.Y.	* (Lihat di bawah)	Sans Serif
Verdana	Jenewa C.Y.	DejaVu Tanpa	Sans Serif

* Saat menghubungkan font, Anda dapat mengandalkannya dengan aman. Tabel ini mendukung karakter Sirilik dan alfabet Rusia.

Menghubungkan font sistem ke situs

Jika Anda perlu terhubung font utama untuk seluruh dokumen, Anda hanya perlu menambahkan kode berikut ke style sheet CSS:

Body ( /* menghubungkan font ke seluruh dokumen */ font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* selain itu atur ukuran font */ font-size: 16px; / * atur font tebal, atau alih-alih 400, atur nilainya - normal */ font-weight: 400; )

Dan inilah cara font sistem dihubungkan dalam kerangka Bootstrap 4: Font disertakan dengan mempertimbangkan perangkat seluler.

Isi ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; )

Menetapkan font untuk judul

H1, H2, H3, H4, H5, H6 - ini sama saja, hanya saja kita atur nilai keberanian untuk menyorot judulnya:

H1, h2, h3, h4, h5, h6 ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* sambungkan font ke judul */ font-weight: 600; / * tetapkan bobot font, atau alih-alih 600, tetapkan nilainya menjadi tebal */ )

Kami menetapkan font hanya untuk paragraf:

p ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; ) Baris demi baris tampilannya seperti ini:

1. Kami menghubungkan font ke paragraf, itu dapat diterapkan ke daftar li, blok div, formulir, dan elemen lainnya;
2. Tetapkan berat font, atau alih-alih 600, atur nilainya menjadi tebal;
3. Selain itu, kami mengatur ukuran font untuk paragraf.

Ke tetapkan font hanya untuk paragraf tertentu, atau blok, Anda harus terlebih dahulu menetapkan kelas ke blok ini di dokumen HTML:

Berikut adalah paragraf dengan font plugin

Dan pada tabel CSS tuliskan kode berikut:

Font utama ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; )

Sekarang, setiap tag - elemen html dengan kelas .font (sebut saja sesuka Anda) akan diberi font Arial, dengan normal (400), tebal, dan ukuran 16 piksel.
Demikian pula, Anda dapat menetapkan font yang berbeda ke daftar li, tabel, seluruh blok div, kata individual, atau frasa.

Menghubungkan font secara langsung dalam dokumen HTML

Font dimasukkan langsung ke dalam dokumen HTML dengan cara yang sama seperti file CSS, perbedaannya hanya pada sintaksisnya. Anda dapat menyertakan font di header dokumen - di antara tag (mirip dengan file CSS), atau inline - menugaskan properti langsung ke tag html.

Termasuk font di header, di antara tag . Untuk melakukannya, tambahkan kode berikut ke dokumen html:

Semuanya mirip dengan koneksi di file CSS.

Menghubungkan font sebaris

Langsung ke elemen situs. Izinkan saya memberi Anda beberapa contoh:

Menghubungkan font ke paragraf

Ini adalah paragraf dengan teks

Kami menyorot satu kata dalam huruf tebal dan menetapkan font terpisah dari font utama

Ini paragraf dengan teks, dan ini kata, yang harus disorot dalam huruf tebal

Kami menyorot tautan dalam huruf tebal dan menetapkan font terpisah dari font utama

Ini teks sederhana. Di sini tautannya juga teks sederhana.

Demikian pula, kami menetapkan font ke tag html apa pun.

Catatan - Font sistem di Bootstrap 4

Pengembang Framework Bootstrap 4 yang terkenal menghubungkan font dengan cara berikut sehingga hampir semua perangkat dapat menggunakan font sistem standarnya.

Isi ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )

Pada artikel ini saya akan membagikan solusi saya untuk masalah tampilan font yang salah di Windows 7 yang memerlukan pemulihan semua font standar diWindows 7. Latar belakang pertanyaannya adalah ini: Saya baru-baru ini mencari font asli baru untuk digunakan dalam editor grafis, saya mengunduh banyak sekali font tersebut, tetapi kemudian saya perhatikan bahwa ketika font baru ditambahkan ke sistem, jika ada cocok, font asli diganti dengan yang baru (petunjuk cara install font di windows 7). Sebagai akibat dari aktivitas ini, menjadi tidak mungkin untuk bekerja di separuh panel sistem dan aplikasi karena mereka berbicara dalam bahasa yang tidak saya kenal :).

Pencarian Google cepat untuk " memulihkan font sistem keWindows 7" Dan " font standar untukWindows 7", tidak memberikan banyak hasil, solusi yang diusulkan tidak membantu fkb (tentu saja, menginstal ulang sistem tidak cocok untuk saya). Oleh karena itu, saya memutuskan untuk mengambil jalan saya sendiri dan, sebagai permulaan, cukup menyalin font asli dari sistem normal yang dikenal (izinkan saya mengingatkan Anda bahwa font disimpan di direktori %windir%\fonts) dan mengganti font di sistem saya dengan font tersebut. Solusinya hanya membantu sebagian, menjadi mungkin untuk bekerja di sistem, karakter Sirilik asli saya muncul, tetapi parameter font masih jauh dari yang diinginkan. Pertama, ukuran beberapa font telah berubah, atau tulisannya tidak lagi sesuai dengan aslinya, atau karena alasan tertentu font tersebut menjadi tebal.

Namun, saya berhasil menemukan cara mengatasi masalah ini. Untuk melakukan ini, Anda perlu mengatur ulang pengaturan font di registri, lalu mengunduh file terlampir di bawah ini, yang memungkinkan Anda memulihkan asosiasi untuk font standar di Windows 7. Anda dapat mengunduhnya:

File ini mewakili konten kumpulan registri yang diekspor HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts di Win 7. Setelah menerapkan file .reg ini, sistem perlu di-boot ulang, lihatlah! Masalah dengan font akan hilang!

Itu. Urutan yang membantu saya memulihkan font sistem standar di Windows 7 adalah ini:

• mengganti font di direktori %windir%\fonts dengan font dari sistem "bersih".
• ekspor cabang registri HLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts

Saya harap jika font Anda juga rusak, solusi ini akan membantu Anda juga. Bagaimanapun, jika Anda menemukan metode alternatif yang membantu situasi Anda, jangan ragu untuk berbagi di komentar. Secara teori, instruksi ini juga cocok jika font yang diinginkan terhapus secara tidak sengaja, dan setelah ditemukan dan disalin kembali, gangguannya tidak hilang.

PS. Jika Anda tidak memiliki Windows 7 yang bersih, Anda dapat mengunduh arsip dengan font standar di sini: http://narod.ru/disk/52061075001.99f42303cf1a0ac70dc978dd20406657/original_fonts.zip.html, ukuran arsip sekitar 350 MB.

Daftar ini berisi font yang umum untuk semua sistem operasi Windows saat ini (sebenarnya, sejak Windows 98), dan padanannya di Mac OS. Font seperti itu terkadang disebut "font yang aman untuk browser" ( font yang aman untuk browser). Ini adalah buku referensi kecil yang saya gunakan ketika saya membuat halaman Web dan saya rasa ini akan berguna bagi Anda juga.

Jika Anda baru mengenal desain web, Anda mungkin berpikir seperti: “Mengapa saya harus dibatasi pada kumpulan font yang begitu kecil? Saya memiliki banyak koleksi font yang indah!” Faktanya adalah browser pengunjung hanya dapat menampilkan font-font yang diinstal dalam miliknya sistem operasi ( kira-kira. Penerjemah: Saat ini, hampir semua font sudah dapat digunakan saat mendesain halaman menggunakan CSS 3 dan properti barunya @ font-wajah; namun, belum semua browser mendukung fungsi ini), artinya setiap pengunjung halaman Anda harus pemilik font yang Anda pilih. Oleh karena itu, sebaiknya gunakan font saja yang tersedia pada masing-masing sistem operasi. Untungnya, CSS memiliki properti @font-keluarga, yang membuat tugas ini lebih mudah.

Daftar

@ arti font-keluarga	jendela	Mac	Keluarga
Arial, Helvetica, sans-serif	Arial	Arial, Helvetica	Sans Serif
"Arial Hitam", Gadget, sans-serif	Arial Hitam	Arial Hitam, Gadget	Sans Serif
"Comic Sans MS", kursif	Komik Sans MS	Komik Sans MS5	kursif
"Kurir Baru", Kurir, monospace	Kurir Baru	Kurir Baru, Kurir 6	ruang tunggal
Georgia, Serif	Georgia 1	Georgia	serif
Dampak, Arang, sans-serif	Dampak	Dampak 5, Arang 6	Sans Serif
"Konsol Lucida", Monaco, monospace	Konsol Lucida	Monako 5	ruang tunggal
"Lucida Sans Unicode", "Lucida Grande", sans-serif	Lucida Tanpa Unicode	Lucida Grande	Sans Serif
"Palatino Linotype", "Buku Antiqua", Palatino, serif	Palatino Linotype, Buku Antiqua 3	Palatino 6	serif
Tahoma, Jenewa, sans-serif	Tahoma	Jenewa	Sans Serif
"Times New Roman", Times, serif	Times New Roman	Waktu	serif
"Trebuchet MS", Helvetica, sans-serif	Trebuchet MS 1	Helvetica	Sans Serif
Verdana, Jenewa, sans-serif	Verdana	Verdana, Jenewa	Sans Serif
Simbol	Simbol 2	Simbol 2	-
anyaman	anyaman 2	anyaman 2	-
Sayap, "Zapf Dingbats"	Sayap 2	Zapf Dingbats 2	-
"MS Sans Serif", Jenewa, sans-serif	MS Sans Serif 4	Jenewa	Sans Serif
"MS Serif", "New York", serif	MS Serif 4	New York6	serif

1 Font Georgia dan Trebuchet MS dikirimkan bersama Windows 2000/XP dan disertakan dalam paket font IE (dan memang disertakan dengan banyak aplikasi Microsoft), sehingga font tersebut diinstal pada banyak komputer Windows 98.

2 Font simbol hanya ditampilkan di Internet Explorer; di browser lain biasanya font tersebut diganti dengan font standar (walaupun, misalnya, font Simbol ditampilkan di Opera, dan Webdings di Safari).

3 Font Book Antiqua hampir identik dengan Palatino Linotype; Palatino Linotype hadir dengan Windows 2000/XP, dan Book Antiqua hadir dengan Windows 98.

4 Harap dicatat bahwa font ini bukan TrueType, tetapi bitmap, sehingga mungkin terlihat buruk pada beberapa ukuran (dirancang untuk ditampilkan pada 8, 10, 12, 14, 18 dan 24 pt pada 96 DPI).

5 Font ini hanya berfungsi di Safari dalam gaya standar, namun tidak berfungsi dalam huruf tebal atau miring. Comic Sans MS juga berfungsi dalam huruf tebal, tetapi tidak miring. Peramban Mac lainnya tampaknya dapat meniru properti font yang hilang dengan baik (terima kasih kepada Christian Fecteau atas tipnya).

6 Font ini diinstal pada Mac hanya dengan instalasi Klasik

Tangkapan layar

• Mac OS X 10.4.8, Firefox 2.0, ClearType diaktifkan (terima kasih kepada Juris Vecvanags untuk tangkapan layarnya)
• Mac OS X 10.4.4, Firefox 1.5, ClearType diaktifkan
• Mac OS X 10.4.11, Safari 3.0.4, ClearType diaktifkan (terima kasih kepada Nolan Gladius untuk tangkapan layarnya)
• Mac OS X 10.4.4, Safari 2.0.3, ClearType diaktifkan (terima kasih kepada Eric Zavesky untuk tangkapan layarnya)
• Windows Vista, Internet Explorer 7, ClearType diaktifkan
• Windows Vista, Firefox 2.0, ClearType diaktifkan (terima kasih kepada Michiel Bijl untuk tangkapan layarnya)