Bagaimana cara menentukan atribut font untuk semua elemen pada halaman web html?

127

Ketika saya mengatur keluarga font, ukuran font, warna dll. Tampaknya beberapa elemen yang bersarang menimpa ini dengan default browser yang jelek.

Haruskah saya benar-benar menentukan puluhan kali untuk setiap jenis elemen pada halaman saya, atau adakah cara untuk mengaturnya secara global sekali dan selamanya?

Bagaimana cara melakukannya?

css Anggota yang Bangga
sumber
1
Bagaimana tepatnya Anda mengatur keluarga font, ukuran ...?
thecoop

Jawaban:

251 
* {
 font-size: 100%;
 font-family: Arial;
}

Tanda bintang menyiratkan semua elemen.

Bazzz
sumber
15
Ini bekerja, tetapi itu bukan solusi terbaik. Ketika peramban melihat '*', loop atas semua elemen HTML di halaman dan menerapkan CSS ke mereka. Bahkan untuk elemen yang aturannya tidak masuk akal. Bergantung pada ukuran HTML, ini dapat memperlambat rendering halaman.
Cesar Canassa
4
Setuju, tapi itu menerapkan CSS ke SEMUA elemen, seperti yang diminta BugAlert. Jika seseorang ingin mempengaruhi SEMUA elemen, seseorang dapat mengharapkan kinerja berkurang sedikit. :)
Bazzz
1
Anda juga dapat menambahkan! Penting di akhir setiap deklarasi gaya agar aman terhadap deklarasi gaya lainnya melebihi yang ini.
S ..
4
Saya tahu ini sudah 5 tahun, tapi saya terkejut tidak ada yang memperhatikan sampai sekarang: Anda tidak boleh hanya menentukan font Windows di "font-family" (kecuali tentu saja itu webfont) - Arial, helvetica, sans-serif lebih cocok.
rob74
6
html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}*,:before,:after{font-family:inherit;}Warisan font, dan jika Anda benar-benar ingin menghindari penggunaan pengganti: jika Anda harus menggunakan pemilih universal, gunakan warisan.
darcher
18

Jika Anda menggunakan IE, kemungkinan itu akan kembali ke default browser untuk elemen tertentu, seperti tabel. Anda dapat mengatasinya dengan sesuatu seperti CSS berikut:

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

Sunting: Anda mungkin ingin membaca tentang pengaturan ulang CSS; lihat utas seperti ini

Paul
sumber
10

Saya tidak bisa cukup menekankan saran ini: gunakan reset stylesheet, lalu atur semuanya secara eksplisit. Ini akan memotong waktu pengembangan CSS lintas-browser Anda menjadi dua.

Coba reset.css Eric Meyer .

Chris Cox
sumber
Untuk menggunakan reset.css ini, apakah saya hanya menautkan stylesheet ke halaman saya atau apakah saya harus men-tweak itu? Saya pada dasarnya perlu memiliki keluarga font dan ukuran yang sama di semua browser utama. Apakah reset.css membantu saya melakukannya secara default?
Darth Coder
1
Saya cenderung menyalin dan menempelkannya di awal stylesheet saya daripada menautkannya secara terpisah, menyimpan permintaan HTTP. Ini akan membantu Anda mengatur gaya yang konsisten di seluruh browser karena itu nol segalanya: satu-satunya gaya yang akan Anda tulis.
Chris Cox
Terima kasih! Saya sudah mencobanya dan itu telah memecahkan sebagian besar masalah saya. Namun, saya masih dapat melihat perbedaan ukuran font antara Chrome dan Firefox meskipun spesifikasi style sheet saya sama. Ada ide tentang ini? Juga, apakah ini praktik yang baik?
Darth Coder
8

Anda dapat mengaturnya di tag tubuh

body
{
    font-size:xxx;
    font-family:yyyy;
}
jimplode
sumber
13
Ini tidak akurat karena sebagian besar browser tidak akan menerapkan font ini ke beberapa elemen (elemen tidak akan mewarisi gaya font)
travis-146
@ travis-146 browser apa? elemen mana? Anda tahu ada spesifikasi yang harus diikuti oleh semua browser.
Bamieh
@ Bamieh satu contoh spesifik (yang membawaku ke sini, sebenarnya) di Chrome 72 adalah tidak menerapkan font pada teks di dalam tombol atau menu pilih.
Nick Silvestri
2

Jika Anda menentukan atribut CSS untuk bodyelemen Anda, itu harus berlaku untuk apa pun di dalamnya <body></body>selama Anda tidak menimpanya nanti dalam stylesheet.

Tyler Treat
sumber
0

Jika Anda ingin mengatur gaya semua elemen dalam tubuh Anda harus menggunakan kode selanjutnya ^ 

  body{
    color: green;
    }
Stepan Poperechnyi
sumber