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

Question 1

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

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

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

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

Question 2

Поместите font-familyобъявление в bodyселектор:

body {
  font-family: Algerian;
}

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

Question 3

*{font-family:Algerian;}

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

Question 4

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

*{
  font-family:Algerian;
}

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

Чтобы избежать этого, вы можете использовать :notселектор, образец значка fontawesome , поэтому просто вы можете использовать:

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

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

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

это применит это семейство ко всем элементам в документе, кроме элементов с классом «fa», который относится к классу по умолчанию fontawesome, вы также можете настроить таргетинг на несколько классов следующим образом:

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

Question 5

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

* { font-family: Algerian !important;}

Question 6

* { font-family: Algerian; }

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

Question 7

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

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, не делайте этого :) Этот шрифт ужасен, за исключением дней рождения ваших детей, где это приветствуется.

Question 8

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

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

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

Question 9

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

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

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

Я хотел, чтобы это применимо ко всему моему веб-сайту, поэтому я поместил его в начало документа 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 были чем-то другим, скажем без сарифа, я бы сделал что-то вроде

h1{
   font-family: Sans-sarif;
}

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

Question 10

в Bootstrap веб-инспектор сообщает, что заголовки настроены на «наследование»

все, что мне нужно, чтобы установить на моей странице новый шрифт, было

div, p {font-family: Algerian}

это в .scss

Question 11

*{font-family:Algerian;}

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

Классно смотрится - спасибо!

Answer 1

92

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

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

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

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

html css fonts font-face Мишель Смит
источник

3

font-family - это унаследованное значение, так почему бы просто не определить его в теле?

Вы можете выбрать ответ от Юкки К. Корпела. Это раньше, чем текущий выбранный ответ, примерно на месяц, и в любом случае имеет почти такое же содержание.

okm

возможный дубликат статьи « Как применить глобальный шрифт ко всему HTML-документу»

Дэвидондрей

Я предлагаю вам никогда не использовать ответ (Яна Ганчича), потому что он применяет ваш шрифт ко всем тегам html, даже к тегу, который вы не хотите изменять. например: если вы сделаете тег img внутри тега td и сделаете его text-align: center и vertical-align: middle. таким образом ваш тег img никогда не будет центром TD. лучший способ: проверьте свой документ и просто примените формат шрифта к тегам, в которых есть текст

Махди Джазини

Answer 2

3

font-family - это унаследованное значение, так почему бы просто не определить его в теле?

Answer 3

Вы можете выбрать ответ от Юкки К. Корпела. Это раньше, чем текущий выбранный ответ, примерно на месяц, и в любом случае имеет почти такое же содержание.

okm

Answer 4

возможный дубликат статьи « Как применить глобальный шрифт ко всему HTML-документу»

Дэвидондрей

Answer 5

Я предлагаю вам никогда не использовать ответ (Яна Ганчича), потому что он применяет ваш шрифт ко всем тегам html, даже к тегу, который вы не хотите изменять. например: если вы сделаете тег img внутри тега td и сделаете его text-align: center и vertical-align: middle. таким образом ваш тег img никогда не будет центром TD. лучший способ: проверьте свой документ и просто примените формат шрифта к тегам, в которых есть текст

Махди Джазини

Answer 6

116

Поместите font-familyобъявление в bodyселектор:

body {
  font-family: Algerian;
}

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

Ян Ганчич
источник

11

Элемент наследует font-familyот своего родителя только тогда , когда нет таблицы стилей не устанавливает семейство шрифтов для элемента. Листы Браузер стилей обычно устанавливается семейство шрифтов , по крайней мере для input, textarea, code, tt, и preэлементов.

Юкка К. Корпела

Ты прав. Я так долго работал с

сбросом

Или еще лучше, объедините два основных ответа ... body, * {font-family: Algerian;}

Джеймс Эйс

Answer 7

11

Элемент наследует font-familyот своего родителя только тогда , когда нет таблицы стилей не устанавливает семейство шрифтов для элемента. Листы Браузер стилей обычно устанавливается семейство шрифтов , по крайней мере для input, textarea, code, tt, и preэлементов.

Юкка К. Корпела

Answer 8

Ты прав. Я так долго работал с

сбросом

Answer 9

Или еще лучше, объедините два основных ответа ... body, * {font-family: Algerian;}

Джеймс Эйс

Answer 10

106

*{font-family:Algerian;}

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

Салам Эль-Банна
источник

3

Интересно, что это не работает при использовании сброса CSS Эрика Мейера

ianbeks

Разве это не применимо к каждому элементу семейства шрифтов? Похоже, это применит его к ненужным элементам (например, <img>) и будет неэффективным. Я определенно мог ошибаться, но я прочитал, чтобы проявлять осторожность при применении стиля ко всему.

Max Strater

Поскольку универсальное правило не отменяется, вы не сможете использовать второй шрифт на своем сайте.

Джулиан Ф. Вайнерт,

Поскольку noboy упомянул об этом, универсальный селектор, как известно, работает медленно. подробнее об этом здесь: clairecodes.com/blog/…

Terje Solem

Или еще лучше, объедините два основных ответа ... body, * {font-family: Algerian;}

Джеймс Эйс

Answer 11

3

Интересно, что это не работает при использовании сброса CSS Эрика Мейера

ianbeks

Answer 12

Разве это не применимо к каждому элементу семейства шрифтов? Похоже, это применит его к ненужным элементам (например, <img>) и будет неэффективным. Я определенно мог ошибаться, но я прочитал, чтобы проявлять осторожность при применении стиля ко всему.

Max Strater

Answer 13

Поскольку универсальное правило не отменяется, вы не сможете использовать второй шрифт на своем сайте.

Джулиан Ф. Вайнерт,

Answer 14

Поскольку noboy упомянул об этом, универсальный селектор, как известно, работает медленно. подробнее об этом здесь: clairecodes.com/blog/…

Terje Solem

Answer 15

Или еще лучше, объедините два основных ответа ... body, * {font-family: Algerian;}

Джеймс Эйс

Answer 16

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

*{
  font-family:Algerian;
}

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

Чтобы избежать этого, вы можете использовать :notселектор, образец значка fontawesome , поэтому просто вы можете использовать:

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

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

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

это применит это семейство ко всем элементам в документе, кроме элементов с классом «fa», который относится к классу по умолчанию fontawesome, вы также можете настроить таргетинг на несколько классов следующим образом:

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

Answer 17

Этот ответ дает столь необходимые детали в соответствии с текущим использованием стилей на веб-страницах из-за использования значков из начальной загрузки (глификонов) и потрясающего шрифта

Лакшман

Answer 18

обратите внимание, что: (не селектор) - это CSS3, который не совместим со всеми браузерами. IE 9+, мы должны подождать как минимум 10 лет, пока все люди во всем мире навсегда оставят семьи IE -9: D: '(

Махди Джазини

Answer 19

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

* { font-family: Algerian !important;}

Answer 20

18

* { font-family: Algerian; }

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

Юкка К. Корпела
источник

Answer 21

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

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, не делайте этого :) Этот шрифт ужасен, за исключением дней рождения ваших детей, где это приветствуется.

Answer 22

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

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

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

Answer 23

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

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

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

Я хотел, чтобы это применимо ко всему моему веб-сайту, поэтому я поместил его в начало документа 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 были чем-то другим, скажем без сарифа, я бы сделал что-то вроде

h1{
   font-family: Sans-sarif;
}

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

Answer 24

в Bootstrap веб-инспектор сообщает, что заголовки настроены на «наследование»

все, что мне нужно, чтобы установить на моей странице новый шрифт, было

div, p {font-family: Algerian}

это в .scss

Answer 25

*{font-family:Algerian;}

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

Классно смотрится - спасибо!

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

Ответы: