Я хочу использовать один шрифт под названием "Алжир" на всем моем сайте. Итак, мне нужно изменить все теги HTML, и я не хочу писать другой код для разных тегов, например:
button{font-family:Algerian;}
div{font-family:Algerian;}
Метод, описанный ниже, также сильно обескуражен:
div,button,span,strong{font-family:Algerian;}
Поместите объявление font-family в селектор body:
body {
font-family: Algerian;
}
Все элементы на вашей странице наследуют это семейство шрифтов (если, конечно, вы не отмените его позже).
*{font-family:Algerian;}
ДОПОЛНИТЬ это
Универсальный селектор * относится ко всем элементам,
этот css сделает это за вас:
*{
font-family:Algerian;
}
Но, к сожалению, если вы используете значки FontAwesome или любые значки, требующие собственного семейства шрифтов, это просто уничтожит значки, и они не будут показывать требуемый вид.
Чтобы избежать этого, вы можете использовать селектор :not, образец значка fontoreesome - <i class="fa fa-bluetooth"></i>, поэтому вы можете использовать:
*:not(i){
font-family:Algerian;
}
это применит это семейство ко всем элементам документа, кроме элементов с именем тега <i>, вы также можете сделать это для классов:
*:not(.fa){
font-family:Algerian;
}
это применит это семейство ко всем элементам документа, кроме элементов с классом "fa", который ссылается на fontavesome класс по умолчанию, вы также можете настроить таргетинг более чем на один класс следующим образом:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
* { font-family: Algerian; }
Универсальный селектор * относится к любому элементу.
Убедитесь, что мобильные устройства не изменят шрифт с их шрифтом по умолчанию, используя важные вместе с универсальным селектором *:
* { font-family: Algerian !important;}
Поскольку другой шрифт, скорее всего, уже определен браузером для элементов формы, здесь есть два способа использовать этот шрифт везде:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
У вас все еще будет моноширинный шрифт на таких элементах, как pre/code, kbd и т.д., но, если вы используете эти элементы, вам лучше использовать моноширинный шрифт.
Важное примечание: если очень мало людей установили этот шрифт в своей ОС, тогда будет использоваться второй шрифт в списке. Здесь вы не определили второй шрифт, поэтому будет использоваться шрифт serif по умолчанию, и это будет Times, Times New Roman, за исключением, может быть, Linux.
Два варианта: используйте шрифт @font-face, если ваш шрифт свободен от использования в качестве загружаемого шрифта или добавляет резервные копии: второй, третий и т.д. И, наконец, семейство по умолчанию (без засечек, курсив (*), моноширинный или засечка). Будет использоваться первый из списка, который существует в ОС пользователя.
(*) По умолчанию курсор в Windows - это Comic Sans. Кроме того, если вы хотите троллировать пользователей Windows, не делайте этого:) Этот шрифт ужасен, за исключением дней рождения ваших детей, где он приветствуется.
Итак, у меня была эта проблема, когда я попробовал несколько разных опций.
Шрифт, который я использую, - Ubuntu-LI, я создал папку шрифтов в своем рабочем каталоге. под папкой fonts
Я смог применить его... в конце концов, вот мой рабочий код
Я хотел, чтобы это применимо ко всему моему веб-сайту, поэтому я поставил его наверху документа css. прежде всего тегов Div (не это важно, просто знайте, что любые индивидуальные шрифты, которые вы назначаете, отправляют ваш script).
@font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}
Если бы я тогда хотел, чтобы все мои теги H1 были чем-то другим, скажем, sans sarif, я бы сделал что-то вроде
h1{
font-family: Sans-sarif;
}
В этом случае только мои теги H1 будут шрифтом sans-sarif, а остальная часть моей страницы будет шрифтом Ubuntu-LI
Поместите это в начало вашей страницы, если "телу" необходимо использовать 1 и тот же шрифт:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Все между тегами <body> и </body> будет иметь тот же шрифт
в Bootstrap веб-инспектор говорит, что заголовки настроены на "наследование"
все, что мне нужно, чтобы установить мою страницу в новый шрифт, было
div, p {font-family: Algerian}
что в.scss
*{font-family:Algerian;}
этот html работал у меня. Добавлены настройки холста в wordpress.
Выглядит круто - спасибо!