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

Я хочу использовать один шрифт с именем & quot; Алжирский & quot; по всему моему сайту. Поэтому мне нужно изменить все теги HTML, и я не хочу писать другой код для разных тегов, таких как:

<code>button{font-family:Algerian;}
div{font-family:Algerian;}
</code>

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

<code>div,button,span,strong{font-family:Algerian;}
</code>
 davidcondrey27 дек. 2014 г., 01:09
возможный дубликатHow to Apply global font to whole HTML document
 Mahdi Jazini30 нояб. 2016 г., 07:17
Я предлагаю вам никогда не использовать ответ (Jan Han & # x10D; i & # x10D;), поскольку он применяет ваш шрифт ко всем тегам html, даже к тегу, который вы не хотите менять. например: если вы сделаете тег img внутри тега td и сделаете его text-align: center и vertical-align: middle. используя этот способ, ваш тег img никогда не будет центром TD. лучший способ: проверьте документ и просто примените формат шрифта к тегам, в которых есть текст
 okm11 мая 2012 г., 07:38
Вы можете выбрать ответ от Юкка К. Корпела. Он более ранний, чем текущий выбранный ответ, примерно на один месяц, и в любом случае имеет почти одинаковое содержание.
 user80627306 апр. 2012 г., 11:40
font-family - это унаследованное значение, так почему бы просто не определить его в теле?

Ответы на вопрос(10)

Пожалуйста, поместите это в заголовок вашей Страницы, если & quot; тело & quot; необходимо использовать 1 и тот же шрифт:

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

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

Решение Вопроса

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

body {
  font-family: Algerian;
}

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

 06 апр. 2012 г., 11:55
Элемент наследуетfont-family от своего родителя только тогда, когдаno таблица стилей устанавливает семейство шрифтов для элемента. Таблицы стилей браузера обычно устанавливают семейство шрифтов как минимум дляinput, textarea, code, tt, а такжеpre элементы.
 06 апр. 2012 г., 14:14
Вы правы. Я так долго работал со сбросами CSS, что забыл подобные вещи :)
*{font-family:Algerian;}

Делай как это

 13 июн. 2014 г., 00:47
Разве это не применяет семейство шрифтов к каждому отдельному элементу? Кажется, что это применило бы его к ненужным элементам (таким как & lt; img & gt;) и было бы неэффективно. Я определенно могу ошибаться, но я прочитал, чтобы с осторожностью применять стиль ко всему.
 31 дек. 2012 г., 16:19
Интересно, что это не работает при использовании сброса CSS Эрика Мейера
 24 июн. 2015 г., 16:35
Поскольку универсальное правило не может быть переопределено, вы не сможете использовать второй шрифт на своем сайте.

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

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). или засечек). Первый из списка, который существует в ОС пользователя, будет использован.

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

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

* { font-family: Algerian !important;}

Универсальный селектор* относится ко всем элементам, этот 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" который относится к классу по умолчанию, Вы также можете настроить таргетинг на несколько классов:

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}
 11 мар. 2016 г., 18:07
Этот ответ дает очень необходимые подробности в соответствии с текущим использованием стилей на веб-страницах из-за использования значков из начальной загрузки (глификоны) и удивительного шрифта
 30 нояб. 2016 г., 07:09
обратите внимание, что: (не селектор) это CSS3, который не совместим со всеми браузерами. IE 9+ мы должны подождать не менее 10 лет, чтобы все люди во всем мире покинули семьи IE-9 навсегда: D: & apos; (

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

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

*{font-family:Algerian;}

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

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

* { font-family: Algerian; }

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

в начальной загрузке, веб-инспектор говорит, что заголовки установлены на «наследовать»;

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

div, p {font-family: Algerian}

это в .scss

Ваш ответ на вопрос