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

Question 1

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;}

Question 2

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).

Question 3

*{font-family:Algerian;}

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

Question 4

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 , 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 , 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;
}

Question 5

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;}

Question 6

* { font-family: Algerian; }

Selektor uniwersalny *odnosi się do dowolnego elementu.

Question 7

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.

Question 8

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ę

Question 9

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

Question 10

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

Question 11

*{font-family:Algerian;}

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

Wygląda świetnie - dzięki!

Answer 1

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;}

html css fonts font-face 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,

Answer 2

3

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

Answer 3

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

Answer 4

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

davidcondrey

Answer 5

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,

Answer 6

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

Answer 7

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

Answer 8

Masz rację. Pracuję z

resetami

Answer 9

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

james ace

Answer 10

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

Answer 11

3

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

ianbeks

Answer 12

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,

Answer 13

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

Julian F. Weinert

Answer 14

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

Terje Solem

Answer 15

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

james ace

Answer 16

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 , 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 , 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;
}

Answer 17

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

Answer 18

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,

Answer 19

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

Answer 20

18

* { font-family: Algerian; }

Selektor uniwersalny *odnosi się do dowolnego elementu.

Jukka K. Korpela
źródło

Answer 21

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.

Answer 22

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ę

Answer 23

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

Answer 24

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

Answer 25

-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

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

Odpowiedzi: