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

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