Применение одного шрифта ко всему веб-сайту с помощью CSS

Я хочу использовать один шрифт с именем "алжирский" на всем моем веб-сайте. Итак, мне нужно изменить все теги HTML, и я не хочу писать другой код для разных тегов, таких как:

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

метод, написанный ниже, также очень не рекомендуется:

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

9 ответов


поставить font-family декларации body селектор:

body {
  font-family: Algerian;
}

все элементы на Вашей странице унаследуют это семейство шрифтов (если, конечно, вы не переопределите его позже).


*{font-family:Algerian;}

сделайте так


универсальный селектор * относится ко всем элементам, этот css сделает это за вас:

*{
  font-family:Algerian;
}

но, к сожалению, если вы используете FontAwesome значки или любые значки, которые требуют своего собственного семейства шрифтов, это просто уничтожит значки, и они не будут показывать необходимый вид.

чтобы избежать этого вы можете использовать :not селектор, образец fontawesome значок <i class="fa fa-bluetooth"></i>, вот так просто вы можете использовать:

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

это коснется это семейство для всех элементов в документе, кроме элементов с именем тега <i>, вы также можете сделать это для класса:

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

это применит это семейство ко всем элементам в документе, кроме элементов с классом "fa", который ссылается на класс FontAwesome по умолчанию, вы также можете нацелить более одного класса, как это:

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

убедитесь, что мобильные устройства не изменят шрифт со своим шрифтом по умолчанию, используя important вместе с универсальным селектором *:

* { font-family: Algerian !important;}

* { font-family: Algerian; }

универсальный селектор * относится к любому элементу.


поскольку другой шрифт, вероятно, уже определен браузером для элементов формы, вот 2 способа использовать этот шрифт везде:

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

body {
    font-family: Algerian !important;
}

на таких элементах, как pre/code, kbd и т. д., по-прежнему будет использоваться моноширинный шрифт, но, если вы используете эти элементы, вам лучше использовать моноширинный шрифт.

важное примечание: если очень немногие люди установили этот шрифт в своей ОС, то будет использоваться второй шрифт в списке. Здесь вы не определили второй шрифт, поэтому будет использоваться шрифт с засечками по умолчанию, и это будет Times, Times New Roman, за исключением, возможно, Linux.
Два варианта: используйте @font-face, если ваш шрифт свободен от использования в качестве загружаемого шрифта или добавьте резервные копии: второй, третий и т. д. И, наконец, семейство по умолчанию(sans-serif, cursive ( * ), monospace или serif). Будет использоваться первый из списка, который существует в ОС пользователя.

(*) курсивом по умолчанию в Windows является Comic Sans. Кроме того, если вы хотите троллить пользователей Windows, не делай этого :) Этот шрифт ужасен, за исключением дней рождения ваших детей, где он приветствуется.


хорошо, поэтому у меня была эта проблема, когда я попробовал несколько разных вариантов.

шрифт, который я использую, - Ubuntu-LI, я создал папку шрифтов в своем рабочем каталоге. в папке Fonts

я смог применить его... в конце концов, вот мой рабочий код

Я хотел, чтобы это применялось ко всему моему сайту, поэтому я поместил его в верхней части документа css. над всеми тегами Div (не то, чтобы это имело значение, просто знайте, что любые отдельные шрифты, которые вы назначаете, публикуют ваш скрипт будет иметь преимущество)

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

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

Если бы я тогда хотел, чтобы все мои теги H1 были чем-то другим, скажем, без sarif, я бы сделал что-то вроде

h1{
   font-family: Sans-sarif;
}

в этом случае только мои теги H1 будут шрифтом sans-sarif, а остальная часть моей страницы будет шрифтом Ubuntu-LI


пожалуйста, поместите это в голове вашей страницы(ов), если "тело" нуждается в использовании 1 и того же шрифта:

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

все между тегами <body> и </body>будет иметь тот же шрифт


*{font-family:Algerian;}

этот HTML работал для меня. Добавлено в настройки холста в wordpress.

выглядит круто - спасибо !