Cara Mendaftar font global ke seluruh dokumen HTML

175

Saya memiliki halaman HTML yang mencakup beberapa teks dan pemformatan. Saya ingin membuatnya memiliki font-family yang sama dan ukuran teks yang sama mengabaikan semua format teks.

Saya ingin mengatur format font global untuk halaman HTML.

Bagaimana saya bisa mencapai ini?

html css font-family

— Pacar
sumber

263

Anda harus dapat menggunakan tanda bintang dan !importantelemen dalam CSS.

html *
{
   font-size: 1em !important;
   color: #000 !important;
   font-family: Arial !important;
}

Tanda bintang cocok dengan semuanya (Anda mungkin bisa pergi tanpa htmlterlalu).

The !importantmemastikan bahwa tidak ada yang dapat menimpa apa yang Anda atur dalam gaya ini (kecuali itu juga penting). (ini untuk membantu kebutuhan Anda bahwa itu harus "mengabaikan pemformatan teks" - yang saya maksudkan adalah bahwa gaya lain tidak dapat menimpa ini)

Sisa gaya dalam kawat gigi sama seperti gaya lainnya dan Anda dapat melakukan apa pun yang Anda inginkan di sana. Saya memilih untuk mengubah ukuran font, warna, dan keluarga sebagai contoh.

— Amadiere
sumber

24

+1 !importantbermanfaat, tetapi bisa sedikit "menjadi monster" jika terlalu sering digunakan.

— StuperUser

2

+1 untuk menyediakan banyak penggunaan !important. Itu harus selalu digunakan sebagai opsi terakhir.

— dShringi

3

Perhatikan penggunaan di !importantsini adalah karena persyaratan poster asli, "memiliki font-family yang sama dan ukuran teks yang sama mengabaikan semua format teks." Jika Anda tidak memiliki persyaratan itu, Anda tidak ingin menggunakannya !important.

— Seth

1

Penggunaan html * {}atau body * {}akan membantu Anda menghindari override melalui body p {}style sheet yang lebih spesifik disertakan. body p {}lebih spesifik daripada body {}, jadi tanda bintang adalah elemen penting di sini.

— YoYo

1

Saya pikir Anda dapat menghilangkan htmldari html *sini

— JonnyRaa

44

Praktik terbaik yang saya pikir adalah mengatur font ke badan:

body {
    font: normal 10px Verdana, Arial, sans-serif;
}

dan jika Anda memutuskan untuk mengubahnya untuk beberapa elemen, itu dapat dengan mudah ditimpa:

h2, h3 {
    font-size: 14px;
}

— Teneff
sumber

jika Anda menggunakan kerangka kerja seperti foundation css ini tidak berfungsi tanpa menambahkan! penting.

— Petros Kyriakou

16

Atur di pemilih tubuh css Anda. Misalnya

body {
    font: 16px Arial, sans-serif;
}

— Petecop
sumber

1

Ini dapat diganti dengan penyeleksi yang lebih spesifik.

— StuperUser

2

Itu tidak akan berlaku untuk semua elemen, misalnya: input type = 'button'

— RRTW

12

Gunakan css berikut:

* {
    font: Verdana, Arial, 'sans-serif' !important;/* <-- fonts */
}

The *-selector berarti setiap / semua elemen, tapi jelas akan berada di bagian bawah rantai makanan ketika datang ke override lebih spesifik penyeleksi.

Perhatikan bahwa !important-flag akan membuat font-gaya untuk *menjadi mutlak, bahkan jika penyeleksi lainnya telah digunakan untuk mengatur teks (misalnya, bodyatau mungkin p).

— karllindmark
sumber

1

Mungkin !importantakan mencegah penyeleksi lain dari mengesampingkan pengaturan.

— Quasdunk

1

Ya, !importantakan mencegah penyeleksi lain mengesampingkan, asalkan mereka juga tidak menggunakannya. Heh. Saya akan mengedit posting saya dan menambahkannya - terima kasih. :-)

— karllindmark

Ya benar. Tidak yakin, tapi saya pikir preferensi juga tergantung di mana Anda menempatkan deklarasi. Jika Anda menempatkannya di bagian paling bawah, saya juga dapat menimpa !importants dari pemilih yang lebih spesifik di atas. Tapi itu bukan intinya di sini kurasa :)

— Quasdunk

Ini adalah satu-satunya jawaban yang benar-benar bekerja untuk saya. Tidak yakin mengapa, tapi ternyata berhasil.

— Peter Gordon

5

Anda seharusnya tidak pernah menggunakan * + !important. Bagaimana jika Anda ingin mengubah font di beberapa bagian dokumen HTML Anda? Anda harus selalu menggunakan tubuh tanpa penting. Gunakan !importanthanya jika tidak ada opsi lain.

— Rakowu
sumber

1

Coba ini:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}

— anglimas
sumber

Halo anglimass, saya memformat kode Anda, jika Anda menggunakan 4 spasi atau {}tombol, Anda dapat menampilkan kode contoh dengan cara ini dalam jawaban Anda.

— StuperUser