Jak zastosować globalną czcionkę do całego dokumentu HTML

175

Mam stronę HTML, która zawiera tekst i formatowanie. Chcę, aby miał tę samą rodzinę czcionek i ten sam rozmiar tekstu, ignorując całe wewnętrzne formatowanie tekstu.

Chcę ustawić globalny format czcionki dla strony HTML.

Jak mogę to osiągnąć?

html css font-family Kochanie
źródło

Odpowiedzi:

263

Powinieneś być w stanie wykorzystać gwiazdkę i !importantelementy w CSS.

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

Gwiazdka pasuje do wszystkiego (prawdopodobnie bez niej możesz uciec html).

W !importantzapewnia, że nic nie może zastąpić co masz ustawione w tym stylu (chyba, że jest to również ważne). (ma to pomóc w spełnieniu Twojego wymagania, aby „ignorować wewnętrzne formatowanie tekstu” - co, jak uznałem, oznacza, że ​​inne style nie mogą ich zastąpić)

Reszta stylu w nawiasach klamrowych jest taka sama, jak każda inna stylizacja i możesz tam robić, co chcesz. Jako przykład wybrałem zmianę rozmiaru, koloru i rodziny czcionki.

Amadiere
źródło
24
+1 !importantjest przydatne, ale może przydać się potworom, jeśli zostanie nadużyte.
StuperUser
2
+1 za doskonałe wykorzystanie !important. Musi być zawsze używana jako ostatnia opcja.
dShringi
3
Zauważ, że użycie !importanttutaj jest spowodowane wymaganiem oryginalnego plakatu, „mają tę samą rodzinę czcionek i ten sam rozmiar tekstu, ignorując całe wewnętrzne formatowanie tekstu”. Jeśli nie masz tego wymagania, nie chcesz używać !important.
Seth
1
Użycie html * {}lub body * {}pomoże uniknąć zastąpienia przez bardziej szczegółowe body p {}arkusze stylów. body p {}jest bardziej szczegółowe niż body {}, więc gwiazdka jest tutaj ważnym elementem.
YoYo
1
Myślę, że można pominąć htmlz html *tutaj
JonnyRaa
44

Myślę, że najlepszą praktyką jest ustawienie czcionki na body:

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

a jeśli zdecydujesz się zmienić go dla jakiegoś elementu, można go łatwo nadpisać:

h2, h3 {
    font-size: 14px;
}
Teneff
źródło
Jeśli używasz frameworka takiego jak Foundation CSS, nie działa to bez dodania! Important.
Petros Kyriakou
16

Ustaw go w selektorze treści swojego css. Na przykład

body {
    font: 16px Arial, sans-serif;
}
Petecoop
źródło
1
Można to zmienić za pomocą bardziej szczegółowych selektorów.
StuperUser
2
Nie dotyczy to wszystkich elementów, na przykład: typ wejścia = 'przycisk'
RRTW
12

Użyj następującego CSS:

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

*-Selector oznacza jakiekolwiek / wszystkie elementy, ale będzie oczywiście na dole łańcucha pokarmowego, jeśli chodzi o nadrzędne bardziej konkretne selektorów.

Zauważ, że !important-flag sprawi, że fontstyl-for *będzie bezwzględny, nawet jeśli do ustawienia tekstu użyto innych selektorów (na przykład, bodya może a p).

karllindmark
źródło
1
Może !importantuniemożliwiłoby to innym selektorom zastąpienie ustawień.
Quasdunk
1
Cóż, tak, !importantuniemożliwiłoby to zastąpienie innych selektorów, o ile również ich nie używają. Heh. Zmienię swój post i dodam - dzięki. :-)
karllindmark
Tak, zgadza się. Nie do końca jestem pewien, ale myślę, że preferencje zależą również od tego, gdzie umieścisz deklarację. Jeśli umieścisz go na samym dole, mogę również zastąpić !importants z bardziej szczegółowych selektorów powyżej. Ale chyba nie do końca o to chodzi :)
Quasdunk
To jedyna odpowiedź, która faktycznie mi pomogła. Nie wiem dlaczego, ale tak się stało.
Peter Gordon
5

Nigdy nie powinieneś używać * + !important. A co jeśli chcesz zmienić czcionkę w niektórych częściach dokumentu HTML? Zawsze powinieneś używać ciała bez ważnych. Używaj !importanttylko wtedy, gdy nie ma innej opcji.

Rakowu
źródło
1

Spróbuj tego:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}
anglimasS
źródło
Cześć anglimass, sformatowałem Twój kod, jeśli używasz 4 spacji lub {}przycisku, możesz wyświetlić przykładowy kod w ten sposób w swoich odpowiedziach.
StuperUser