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


92

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

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

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

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

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

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


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

Ответы:


116

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

body {
  font-family: Algerian;
}

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


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

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

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

106
*{font-family:Algerian;}

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


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

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

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

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

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

49

Универсальный селектор *относится ко всем элементам, этот 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;
}

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

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

19

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

* { font-family: Algerian !important;}


3

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

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

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

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

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


1

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

Я использую шрифт 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


0

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

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

div, p {font-family: Algerian}

это в .scss


-1
*{font-family:Algerian;}

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.