Применение одного шрифта ко всему сайту с помощью CSS
Я хочу использовать один шрифт с именем & quot; Алжирский & quot; по всему моему сайту. Поэтому мне нужно изменить все теги HTML, и я не хочу писать другой код для разных тегов, таких как:
<code>button{font-family:Algerian;}
div{font-family:Algerian;}
</code>
Метод, написанный ниже, также крайне не рекомендуется:
<code>div,button,span,strong{font-family:Algerian;}
</code>Ответы на вопрос(10)
Пожалуйста, поместите это в заголовок вашей Страницы, если & quot; тело & quot; необходимо использовать 1 и тот же шрифт:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Все между тегами<body> а также</body>будет иметь тот же шрифт
Положитьfont-family объявление вbody селектор:
body {
font-family: Algerian;
}
Все элементы на вашей странице будут наследовать это семейство шрифтов (если, конечно, вы не переопределите его позже).
font-family от своего родителя только тогда, когдаno таблица стилей устанавливает семейство шрифтов для элемента. Таблицы стилей браузера обычно устанавливают семейство шрифтов как минимум дляinput, textarea, code, tt, а такжеpre элементы.Поскольку другой шрифт, вероятно, уже определен браузером для элементов формы, есть два способа повсеместно использовать этот шрифт:
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;
}
Итак, у меня возникла эта проблема, когда я попробовал несколько разных вариантов.
Я использую шрифт 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.