Font adalah bagian integral dan sangat penting dari desain situs web, menekankan individualitasnya. Artikel ini akan berbicara tentang menghubungkan font standar ke halaman web, mereka juga disebut font sistem.
Sistem, font standar, aman
Peramban apa pun hanya menampilkan font yang ada di sistem operasi komputer. Oleh karena itu, mereka disebut sistem dan diinstal secara default bersama dengan sistem operasi.
Dan mereka disebut font aman, karena kemungkinan besar mereka akan ditampilkan di browser sebagian besar pengunjung situs.
Tetapi seluruh masalah terletak pada kenyataan bahwa kumpulan font yang berbeda diinstal pada sistem operasi yang berbeda. Anda dapat melihat kumpulan font yang disediakan bersama dengan sistem operasi di halaman resmi Windows, Mac OS. Dan di Unix/Linux tidak ada standar sama sekali.
Agar halaman web dapat ditampilkan sesuai dengan ide perancang, properti font yang disebut font-family diatur dalam CSS.
properti font font-family
Properti font-family - keluarga font dikelompokkan berdasarkan kriteria 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 demikian, font serupa dari sistem operasi yang berbeda dipilih dan dihubungkan ke halaman web yang dipisahkan dengan koma.
Ini contohnya, hanya untuk persepsi visual. Kami akan kembali ke contoh ini ketika kami mempertimbangkan menghubungkan font secara langsung.
Ikuti saja logikanya dan semuanya akan menjadi sangat jelas.
Tubuh ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
- OC Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- Keluarga generik adalah sans-serif.
Disebut font aman
Berdasarkan OC Windows, daftar beberapa font aman telah disusun.
- Arial
- Arial Black
- Komik Sans MS
- Kurir Baru
- Georgia
- Dampak
- zaman Romawi Baru
- Trebuchet MS
- beranda
Semua font ini diinstal di Mac OS X, Windows, dan banyak pengguna Unix/Linux yang menginstal font Core untuk paket Web.
Untuk pengguna lain, tabel korespondensi disediakan. Itu mengambil font serupa milik keluarga tertentu.
Tabel korespondensi dan font milik keluarga tertentu:
| Windows | MacOS | Unix/Linux | keluarga generik |
|---|---|---|---|
| Arial Black | Helvetica CY | Nimbus Sans L | Sans Serif |
| Arial | Helvetica CY | Nimbus Sans L | Sans Serif |
| Komik Sans MS | Monako CY | * (Lihat di bawah) | kursif |
| Kurir Baru | * (Lihat di bawah) | Nimbus Mono L | Monoruang |
| Georgia | * (Lihat di bawah) | Century Schoolbook L | Serif |
| Dampak | Arang CY | * (Lihat di bawah) | Sans Serif |
| zaman Romawi Baru | Kali CY | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica CY | * (Lihat di bawah) | Sans Serif |
| beranda | Jenewa CY | DejaVu Sans | Sans Serif |
* Saat menghubungkan font, Anda dapat mengandalkannya dengan aman. Tabel mendukung karakter Cyrillic, alfabet Rusia.
Menghubungkan font sistem ke situs
Jika Anda perlu terhubung font utama untuk seluruh dokumen, Anda hanya perlu menambahkan kode berikut ke lembar gaya CSS:
Body ( /* menghubungkan font ke seluruh dokumen */ font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* juga mengatur ukuran font */ font-size: 16px; / * atur font bobot, atau alih-alih 400, atur nilainya - normal */ font-weight: 400; )
Dan inilah cara font sistem terhubung dalam kerangka kerja Bootstrap 4: Font terhubung dengan harapan perangkat seluler.
Body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; )
Tetapkan font untuk judul
H1, H2, H3, H4, H5, H6 - ini mirip, hanya kita atur nilai boldness untuk menyorot heading:
h1, h2, h3, h4, h5, h6 ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* menghubungkan font ke judul */ font-weight: 600; /* set ketebalan font, atau alih-alih 600, atur nilainya - tebal */ )
Tetapkan font hanya untuk paragraf:
p ( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; ) Baris demi baris terlihat seperti ini:- Kami menghubungkan font ke paragraf, itu dapat diterapkan ke daftar li, blok div, formulir formulir, dan elemen lainnya;
- Atur ketebalan font, atau alih-alih 600, atur nilainya - tebal ;
- Selain itu, atur ukuran font untuk paragraf.
Ke tetapkan font hanya untuk paragraf tertentu, atau blokir, Anda harus terlebih dahulu menetapkan kelas ke blok ini dalam dokumen HTML:
Ini paragraf dengan font yang disertakan
Dan di tabel CSS tulis 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, normal (400), tebal, dan berukuran 16px.
Demikian pula, Anda dapat menetapkan font yang berbeda ke daftar li, tabel tabel, seluruh blok div, kata individual, atau frasa.
Termasuk font langsung dalam dokumen HTML
Langsung dalam dokumen HTML, font terhubung dengan cara yang sama seperti file CSS, perbedaannya hanya pada sintaks. Anda dapat menyertakan font dalam judul dokumen - di antara tag
(mirip dengan file CSS), atau sebaris - menetapkan properti langsung ke tag html.Menambahkan font ke header, di antara tag
. Untuk melakukannya, tambahkan kode berikut ke dokumen html:
Semuanya mirip dengan menghubungkan dalam file CSS.
Menghubungkan font sebaris
Langsung ke elemen situs. Berikut beberapa contohnya:
Menghubungkan font ke paragraf
Ini adalah paragraf dengan teks
Sorot satu kata dengan huruf tebal dan tetapkan font yang terpisah dari yang utamaIni paragraf dengan teks, dan ini kata untuk disorot dalam huruf tebal
Kami menyorot tautan dengan huruf tebal dan menetapkan font yang terpisah dari yang utamaIni adalah teks biasa Di sini tautan juga merupakan teks biasa
Demikian pula, kami menetapkan font ke tag html apa pun.
Catatan - Font Sistem di Bootstrap 4
Pengembang Bootstrap 4 Framework yang terkenal menyertakan font dengan cara berikut sehingga hampir semua perangkat menggunakan font sistem standarnya.
Body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )
Daftar ini berisi font yang umum untuk semua sistem operasi Windows saat ini (sebenarnya dimulai dengan Windows 98) dan yang setara dengan Mac OS. Font semacam itu terkadang disebut sebagai "font aman browser" ( font aman browser). Ini adalah buku referensi kecil yang saya gunakan ketika saya membuat halaman Web dan saya pikir ini akan berguna juga untuk Anda.Jika Anda baru mengenal desain web, Anda mungkin berpikir, “Mengapa saya harus membatasi diri pada pilihan font yang begitu sedikit? Saya punya banyak koleksi font cantik!” Faktanya adalah browser pengunjung hanya dapat menampilkan font yang diinstal dalam miliknya sistem operasi ( kira-kira Penerjemah: saat ini sudah memungkinkan untuk menerapkan hampir semua font dalam desain halaman menggunakan CSS 3 dan properti barunya @font-wajah; namun, belum semua browser mendukung fungsi ini), yang artinya setiap pengunjung halaman Anda harus menjadi pemilik font yang Anda pilih. Oleh karena itu, Anda hanya boleh menggunakan font yang tersedia di setiap sistem operasi. Untungnya, CSS memiliki properti @ font-keluarga, yang membuat tugas ini lebih mudah.
Daftar
| Arti dari @font-family | Windows | Mac | Keluarga |
|---|---|---|---|
| Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | Sans Serif |
| "Arial Black", Gadget, sans-serif | Arial Black | Gadget Hitam Arial | Sans Serif |
| Komik Sans MS kursif | Komik Sans MS | Komik Sans MS 5 | kursif |
| "Kurir Baru", Kurir, monospace | Kurir Baru | Kurir Baru, Kurir 6 | monospace |
| Georgia, Serif | Georgia 1 | Georgia | serif |
| Dampak, Arang, sans-serif | Dampak | Dampak 5, Arang 6 | Sans Serif |
| "Konsol Lucida", Monako, monospace | Konsol Lucida | Monako 5 | monospace |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lucida Sans Unicode | Lucida Grande | Sans Serif |
| "Palatino Linotype", "Book Antiqua", Palatino, serif | Palatino Linotype, Buku Antiqua 3 | Palatin 6 | serif |
| Tahoma, Jenewa, sans-serif | Tahoma | Jenewa | Sans Serif |
| "Times New Roman", Times, serif | zaman Romawi Baru | Waktu | serif |
| "Trebuchet MS", Helvetica, sans-serif | Trebuchet MS1 | Helvetica | Sans Serif |
| Verdana, Jenewa, sans-serif | beranda | Verdana, Jenewa | Sans Serif |
| simbol | Simbol 2 | Simbol 2 | - |
| webdings | Jaringan 2 | Jaringan 2 | - |
| Wingdings, "Zapf Dingbats" | Sayap 2 | Zapf Dingbat 2 | - |
| "MS Sans Serif", Jenewa, sans-serif | MS Sans Serif 4 | Jenewa | Sans Serif |
| "MS Serif", "New York", serif | MS Serif 4 | New York 6 | serif |
1 Font Georgia dan Trebuchet MS dikirimkan dengan Windows 2000/XP dan termasuk dalam paket font IE (dan memang disertakan dengan banyak aplikasi Microsoft), sehingga diinstal pada banyak komputer Windows 98.
2 Font simbol hanya ditampilkan di Internet Explorer, di browser lain biasanya diganti dengan font standar (walaupun, misalnya, font Simbol ditampilkan di Opera, dan Webdings - di Safari).
3 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 (font ini dirancang untuk ditampilkan pada 8, 10, 12, 14, 18 dan 24 pt pada 96 DPI).
5 Font ini hanya berfungsi dalam font standar di Safari, tetapi tidak berfungsi dalam huruf tebal atau miring. Comic Sans MS juga berfungsi dalam huruf tebal tetapi tidak dalam huruf miring. Browser Mac lainnya tampaknya baik-baik saja meniru properti font yang hilang sendiri (terima kasih kepada Christian Fecteau untuk tipnya).
6 Font ini hanya diinstal di Mac selama penginstalan 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)
Salah satu tugas utama desain web adalah pemilihan yang tepat font standar. Layanan penyematan font seperti Google Web Fonts atau Typekit telah dibuat sebagai alternatif untuk memberikan sesuatu yang baru.
Mereka sangat mudah digunakan. Mari kita ambil layanan Google Web Fonts sebagai contoh.
Pilih font Open Sans , Droid Serif atau Lato. Tulis kode dan tempelkan ke elemen dokumen HTML. Semuanya siap untuk direferensikan dalam CSS! Seluruh proses memakan waktu tidak lebih dari 60 detik. Dan semuanya benar-benar gratis.
Apa yang salah?
Beberapa font mungkin tidak tersedia untuk semua orang. Dan itu berarti mungkin ada masalah. Anda senang bahwa Anda memilih font yang bagus untuk situs tersebut, dan pengunjung halaman web malah melihat coretan yang jelek.
Ini tidak akan terjadi jika Anda menerapkan opsi pencadangan.
Seberapa penting penggunaan font web yang aman?
Setiap perangkat memiliki kumpulan font prainstalnya sendiri. Yang mana tergantung sistem operasinya. Masalahnya adalah ada sedikit perbedaan di antara mereka.
Bagaimana dengan situs? Misalnya, 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 situs tersebut. Jika Anda belum menginstalnya dan tidak disediakan oleh layanan web khusus, font yang Anda lihat adalah salah satu opsi standar. Misalnya Times New Roman.
Oleh karena itu, di layar Anda, teks mungkin terlihat mengerikan.
Dan di sini font standar untuk situs tersedia di semua sistem operasi. Ini adalah koleksi kecil yang tersedia di Windows, Mac, Google, dan Unix dan Linux.
Dengan pemilihan ini, desainer serta pemilik situs dapat menentukan font mana yang harus digunakan sebagai cadangan. Dengan demikian, menjadi mungkin untuk mengontrol tampilan halaman pada perangkat yang berbeda.
Sebagai cadangan, pengembang memilih font yang sangat mirip dengan aslinya, dan akan ditampilkan kepada pengguna.
Mari kita lihat pilihan yang paling populer font standar HTML.
15 Font Web Aman Terbaik
Arial
Itu dianggap standar dalam banyak kasus. Jenis huruf yang paling umum Sans Serif» atau font sans-serif ( yang tidak memiliki serif di ujung huruf). Ini sering digunakan di Windows untuk mengganti karakter lain.
Helvetica
Helvetica adalah penyelamat bagi para desainer. Ini font web standar hampir selalu berhasil setidaknya sebagai jaring pengaman untuk font lain).
zaman Romawi Baru
Melayani peran yang sama untuk font serif seperti yang dilakukan Arial untuk font sans-serif. Ini adalah salah satu yang paling populer perangkat Windows. Ini adalah versi terbaru dari font Times lama.
Waktu
css font standar The Times akrab bagi kebanyakan orang. Bagi banyak orang, dia dikenang dengan surat-surat kecil di kolom sempit koran bekas. Jenis percetakan paling umum yang sudah menjadi tradisi.
Kurir Baru
Mirip dengan Times New Roman dan digunakan sebagai variasi klasik lama. Itu juga dianggap sebagai font monospace. Tidak seperti font serif dan sans-serif, semua karakternya memiliki lebar yang sama.
Kurir
Font lama dengan lebar tetap yang digunakan sebagai cadangan di hampir semua perangkat dan sistem operasi.
beranda
Verdana berhak dianggap sebagai font web yang sebenarnya ( font web yang benar) berkat garis sederhana yang berfungsi sebagai serif, serta ukurannya yang besar. Hurufnya agak memanjang, sehingga mudah dibaca di layar.
Georgia
Font web standar Georgia memiliki bentuk dan ukuran yang mirip dengan font Verdana. Karakternya lebih besar dari font lain dengan ukuran yang sama. Tetapi lebih baik tidak menggunakannya bersamaan dengan yang lain. Times New Roman yang sama, dibandingkan dengannya terlihat seperti kurcaci.
Palatino
Palatino milik Renaissance. Tidak ada lelucon. Ini adalah font besar lainnya yang sempurna untuk web. Ini biasanya digunakan dalam berita utama dan iklan.
Garamond
Jenis huruf lama lainnya yang muncul pada abad ke-16 di Paris. Versi baru dan lebih baik adalah standar pada sebagian besar perangkat Windows. Belakangan, font ini diadopsi oleh sistem operasi lain.
Sarjana
Bukuman ( atau Bookman Old Style) - satu dari font standar terbaik untuk header. Ciri khasnya adalah keterbacaan meski menggunakan ukuran kecil.
Komik Sans MS
Comic Sans MS adalah alternatif yang menyenangkan untuk font serif.
Trebuchet MS
Ini adalah font bertema abad pertengahan yang awalnya dikembangkan oleh Microsoft Corporation pada pertengahan tahun sembilan puluhan. Itu digunakan di Windows XP. Hari ini, dengan bantuannya, mereka membuat teks utama.
Font situs standar adalah font yang diinstal secara default di komputer pengguna yang menjelajahi situs.Peramban apa pun secara default tidak mengunduh atau memasang font dari sumber pihak ketiga. Itu sebabnya masalah font "non-standar" sering muncul. Katakanlah webmaster memutuskan untuk membuat beberapa font yang indah di situs, menunjukkannya dalam kode, dan sebagian besar pengguna situs tidak menginstal font ini di sistem operasi.
Browser, tentu saja, akan mencoba mengganti font ini dengan salah satu yang diinstal, tetapi situs tidak akan ditampilkan sama sekali seperti yang dimaksudkan semula. Tentu saja, ada teknologi yang memungkinkan Anda mengatasi batasan ini, tetapi lebih baik melakukannya dalam kasus ekstrim, bila tidak mungkin dilakukan tanpa font pihak ketiga.
Jadi, apa "kumpulan standar" font ini. Di bawah ini adalah daftar font pra-instal untuk sistem operasi (font yang direkomendasikan untuk digunakan di situs web disorot):
| Nama font | jendela 2000 | Windows XP | pemandangan | Windows 7 | Windows 8 |
| Arial | + | + | + | + | + |
| Arial Black | + | + | + | + | + |
| Buku Antik | + | ||||
| Kalibri | + | + | + | ||
| Cambria | + | + | + | ||
| Candara | + | + | + | ||
| Komik Sans MS | + | + | + | + | + |
| Konsol | + | + | + | ||
| Constantia | + | + | + | ||
| Corbel | + | + | + | ||
| Kurir | + | + | + | + | + |
| Kurir Baru | + | + | + | + | + |
| Estrangelo Edessa | + | + | + | + | |
| Franklin Gotik Sedang | + | + | + | + | |
| Gautami | + | + | + | + | |
| Gabriela | + | + | |||
| Georgia | + | + | + | + | + |
| Dampak Miring Georgia | + | ||||
| Dampak | + | + | + | + | + |
| Lata | + | + | + | + | |
| Konsol Lucida | + | + | + | + | + |
| Konsol Lucida Sans | + | + | + | + | |
| Lucida Sans Unicode | + | + | + | + | + |
| Marlett | + | + | + | + | + |
| Modern | + | + | |||
| MS Sans Serif modern | + | ||||
| MS Sans Serif | + | + | + | + | + |
| MS Serif | + | + | + | + | + |
| M.V.Boli | + | + | + | + | |
| Nyala | + | + | + | ||
| Linotipe Palatino | + | + | + | + | + |
| Roma | + | + | + | + | + |
| Naskah | + | + | + | + | + |
| Cetak Segoe | + | + | + | ||
| Skrip Segoe | + | + | + | ||
| Sego UI | + | + | + | ||
| Font Kecil | + | + | |||
| simbol | + | + | + | + | + |
| Tahoma | + | + | + | + | + |
| Tempus Sans ITC | + | ||||
| zaman Romawi Baru | + | + | + | + | + |
| Trebuchet MS | + | + | + | + | + |
| Tunga | + | + | + | + | |
| beranda | + | + | + | + | + |
| webdings | + | + | + | + | + |
| Westminster | + | ||||
| Sayap | + | + | + | + | + |
Seperti apa bentuk font standar?
Windows Vista, Internet Explorer 7, ClearType diaktifkan (klik gambar untuk tampilan ukuran penuh)Windows Vista, Firefox 2.0, ClearType diaktifkan (klik gambar untuk tampilan ukuran penuh)
Mac OS X 10.4.8, Firefox 2.0, ClearType diaktifkan (klik gambar untuk tampilan ukuran penuh)
Windows 2000, IE 6.0 (klik gambar untuk tampilan ukuran penuh)
Pada artikel ini saya akan membagikan solusi saya untuk masalah tampilan font yang salah di Windows 7, yang membutuhkan pulihkan semua font standar diWindows 7. Latar belakang pertanyaannya adalah sebagai berikut: baru-baru ini saya mencari font asli baru untuk digunakan dalam editor grafis, saya mengunduh seluruh gunung, tetapi kemudian saya perhatikan bahwa ketika font baru ditambahkan ke sistem, jika ada cocok, maka font asli diganti dengan yang baru (petunjuk cara install font di windows 7). Sebagai hasil dari aktivitas tersebut, menjadi tidak mungkin untuk bekerja di setengah dari panel sistem dan aplikasi karena fakta bahwa mereka berbicara dalam bahasa yang tidak saya ketahui :).
Google cepat untuk pertanyaan " pulihkan font sistem keWindows 7" Dan " font standar untukWindows 7”, tidak memberikan hasil khusus, solusi yang diusulkan tidak membantu fkb (tentu saja, menginstal ulang sistem tidak cocok untuk saya). Oleh karena itu, saya memutuskan untuk menempuh jalan saya sendiri dan, sebagai permulaan, cukup menyalin font asli dari sistem normal yang dikenal (ingat bahwa font disimpan di direktori %windir%\fonts) dan mengganti font di sistem saya dengan font tersebut. Solusinya hanya membantu sebagian, menjadi mungkin untuk bekerja dalam sistem, karakter Cyrillic yang berasal dari saya muncul, tetapi pengaturan font meninggalkan banyak hal yang diinginkan. Pertama, ukuran beberapa font telah berubah, atau ejaannya tidak lagi sesuai dengan aslinya, atau font menjadi tebal karena suatu alasan.
Namun, saya berhasil menemukan cara untuk mengatasi masalah ini juga. Untuk melakukan ini, Anda perlu mengatur ulang pengaturan font di registri, yang mengunduh file terlampir di bawah ini, yang memungkinkan Anda memulihkan asosiasi untuk font standar di Windows 7. Anda dapat mengunduhnya:
File ini adalah konten yang diekspor dari cabang registri 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 harus hilang!
Itu. Urutan yang membantu saya mengembalikan font sistem default 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 rontok, solusi ini juga akan membantu Anda. Bagaimanapun, jika Anda menemukan teknik alternatif yang membantu dalam situasi khusus Anda, jangan ragu untuk membagikannya di komentar. Secara teori, instruksi ini juga cocok jika font yang diinginkan terhapus secara tidak sengaja, dan setelah ditemukan dan disalin kembali, gangguan 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 arsipnya sekitar 350 MB.
