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

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

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

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

div,button,span,strong{font-family:Algerian;}
9 73
html css fonts font-face

9 ответов:

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

body {
  font-family: Algerian;
}

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

77
*{font-family:Algerian;}

сделай так

90

универсальный селектор * относится ко всем элементам, этот 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 default, вы также можете настроить таргетинг на несколько классов следующим образом:

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

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

* { font-family: Algerian !important;}
17
* { font-family: Algerian; }

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

16

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

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

body {
    font-family: Algerian !important;
}

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

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

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

2

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

шрифт, который я использую 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

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

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

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

0
*{font-family:Algerian;}

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

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

-1