Stosowanie jednej czcionki do całej witryny za pomocą CSS

92

Chcę używać jednej czcionki o nazwie „Algerian” w całej mojej witrynie. Dlatego muszę zmienić wszystkie tagi HTML i nie chcę pisać innego kodu dla różnych tagów, takich jak:

button{font-family:Algerian;}
div{font-family:Algerian;}

Opisana poniżej metoda również jest wysoce odradzana:

div,button,span,strong{font-family:Algerian;}

— Michelle Smith
źródło

3

rodzina czcionek jest wartością dziedziczoną, więc dlaczego nie zdefiniować jej po prostu w treści?

Możesz wybrać odpowiedź od Jukka K. Korpela. Jest wcześniejsza niż aktualnie wybrana odpowiedź, przez około miesiąc, a mimo to ma prawie taką samą treść.

— okm

możliwy duplikat Jak zastosować globalną czcionkę do całego dokumentu HTML

— davidcondrey

Sugeruję, abyś nigdy nie używał odpowiedzi (Jan Hančič), ponieważ stosuje ona twoją czcionkę do wszystkich tagów HTML, nawet tych, których nie chcesz zmieniać. na przykład: jeśli umieścisz znacznik img wewnątrz znacznika td i ustawisz go w wyrównaniu do tekstu: do środka i do wyrównania w pionie: do środka. używając w ten sposób znacznik img nigdy nie będzie środkiem TD. najlepszy sposób: sprawdź dokument i po prostu zastosuj format czcionki do tagów, które zawierają tekst

— Mahdi Jazini,

116

Umieść font-familydeklarację w bodyselektorze:

body {
  font-family: Algerian;
}

Wszystkie elementy na twojej stronie odziedziczą wtedy tę rodzinę czcionek (chyba że oczywiście zmienisz to później).

— Jan Hančič
źródło

11

Element dziedziczy font-familypo swoim rodzicu tylko wtedy, gdy żaden arkusz stylów nie ustawia rodziny czcionek dla elementu. Arkusze stylów przeglądarka zazwyczaj zestaw czcionek rodziny przynajmniej na input, textarea, code, tt, i preelementów.

— Jukka K. Korpela

Masz rację. Pracuję z

— resetami

Albo jeszcze lepiej, połącz dwie najważniejsze odpowiedzi ... body, * {font-family: Algerian;}

— james ace

106

*{font-family:Algerian;}

lepsze rozwiązanie poniżej Stosowanie jednej czcionki do całej witryny za pomocą CSS

— Salam El-Banna
źródło

3

Co ciekawe, to nie działa, gdy używasz resetowania CSS Erica Meyera

— ianbeks

Czy to nie dotyczy rodziny czcionek do każdego elementu? Wydaje się, że zastosowałoby to do niepotrzebnych elementów (takich jak <img>) i byłoby nieefektywne. Zdecydowanie mogę się mylić, ale czytałem, aby zachować ostrożność przy stosowaniu stylu do wszystkiego.

— Max Strater,

Ponieważ uniwersalnej reguły nie można zastąpić, nie będzie można użyć drugiej czcionki w witrynie.

— Julian F. Weinert

Ponieważ nikt o tym nie wspomniał, uniwersalny selektor jest powolny. więcej na ten temat tutaj: clairecodes.com/blog/…

— Terje Solem

Albo jeszcze lepiej, połącz dwie najważniejsze odpowiedzi ... body, * {font-family: Algerian;}

— james ace

49

Uniwersalny selektor *odnosi się do wszystkich elementów, ten css zrobi to za Ciebie:

*{
  font-family:Algerian;
}

Ale niestety, jeśli używasz ikon FontAwesome lub jakichkolwiek ikon, które wymagają własnej rodziny czcionek, spowoduje to po prostu zniszczenie ikon i nie będą one pokazywać wymaganego widoku.

Aby tego uniknąć, możesz użyć :notselektora, przykładowa niesamowita ikona <i class="fa fa-bluetooth"></i>, więc po prostu możesz użyć:

*:not(i){
  font-family:Algerian;
}

spowoduje to zastosowanie tej rodziny do wszystkich elementów w dokumencie z wyjątkiem elementów z nazwą znacznika <i>, możesz to również zrobić dla klas:

*:not(.fa){
  font-family:Algerian;
}

spowoduje to zastosowanie tej rodziny do wszystkich elementów w dokumencie z wyjątkiem elementów z klasą „fa”, która odwołuje się do niesamowitej klasy domyślnej. Możesz także kierować reklamy na więcej niż jedną klasę, na przykład:

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}

— Salam El-Banna
źródło

Ta odpowiedź zawiera bardzo potrzebne szczegóły, zgodnie z obecnym stylem na stronach internetowych ze względu na użycie ikon z bootstrapu (glify) i niesamowitej czcionki

— Lakshman

uwaga niż: (nie selector) to CSS3, który nie jest kompatybilny ze wszystkimi przeglądarkami. IE 9+ musimy poczekać co najmniej 10 lat, aż wszyscy ludzie na całym świecie opuszczą na zawsze rodziny IE-9: D: '(

— Mahdi Jazini,

19

Upewnij się, że urządzenia mobilne nie zmienią czcionki na domyślną, używając ważnych razem z uniwersalnym selektorem *:

* { font-family: Algerian !important;}

— gabitzish
źródło

18

* { font-family: Algerian; }

Selektor uniwersalny *odnosi się do dowolnego elementu.

— Jukka K. Korpela
źródło

3

Ponieważ przeglądarka prawdopodobnie zdefiniowała już inną czcionkę dla elementów formularza, oto dwa sposoby użycia tej czcionki wszędzie:

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

Nadal będzie istniała czcionka o stałej szerokości na elementach, takich jak pre / code, kbd itp., Ale jeśli używasz tych elementów, lepiej użyj tam czcionki o stałej szerokości.

Ważna uwaga: jeśli bardzo niewiele osób ma zainstalowaną tę czcionkę w swoim systemie operacyjnym, zostanie użyta druga czcionka z listy. Tutaj nie zdefiniowałeś drugiej czcionki, więc zostanie użyta domyślna czcionka szeryfowa, i będzie to Times, Times New Roman, z wyjątkiem być może w systemie Linux.
Istnieją dwie opcje: użyj @ font-face, jeśli twoja czcionka nie nadaje się do pobrania lub dodaj zastępcze: drugą, trzecią itd. I wreszcie domyślną rodzinę (bezszeryfowa, kursywna (*), o stałej szerokości lub szeryfowa). Zostanie wykorzystana pierwsza z listy, która istnieje w systemie operacyjnym użytkownika.

(*) domyślną kursywą w systemie Windows jest Comic Sans. Chyba że chcesz trollować użytkowników Windowsa, nie rób tego :) Ta czcionka jest okropna, z wyjątkiem urodzin twoich dzieci, gdzie jest mile widziana.

— FelipeAls
źródło

2

Umieść to w nagłówku swoich stron, jeśli „treść” wymaga użycia 1 i tej samej czcionki:

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

Wszystko między tagami <body>i </body>będzie miało tę samą czcionkę

— PICwebs
źródło

1

Ok, więc miałem ten problem, w którym wypróbowałem kilka różnych opcji.

Czcionka, której używam, to Ubuntu-LI, utworzyłem folder czcionek w moim katalogu roboczym. pod czcionkami folderu

Udało mi się to zastosować ... w końcu oto mój działający kod

Chciałem, aby dotyczyło to całej mojej witryny, więc umieściłem to na początku dokumentu css. przede wszystkim znaczniki DIV (nie ma to znaczenia, po prostu pamiętaj, że wszelkie indywidualne czcionki, które przypiszesz w swoim skrypcie, będą miały pierwszeństwo)

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

Gdybym wtedy chciał, aby wszystkie moje tagi H1 były czymś innym, powiedzmy sans sarif, zrobiłbym coś takiego

h1{
   font-family: Sans-sarif;
}

W takim przypadku tylko moje tagi H1 byłyby czcionką sans-sarif, a reszta mojej strony byłaby czcionką Ubuntu-LI

— Lee Alderman
źródło

0

w Bootstrap inspektor sieci mówi, że nagłówki są ustawione na „dziedziczenie”

wszystko, czego potrzebowałem, aby ustawić nową czcionkę na mojej stronie, to

div, p {font-family: Algerian}

to jest w .scss

— austin
źródło

-1

*{font-family:Algerian;}

ten html działał dla mnie. Dodano do ustawień płótna w Wordpress.

Wygląda świetnie - dzięki!

— intelijenjah
źródło