Применение одного шрифта ко всему веб-сайту с помощью CSS
Я хочу использовать один шрифт с именем "алжирский" на всем моем веб-сайте. Итак, мне нужно изменить все теги HTML, и я не хочу писать другой код для разных тегов, таких как:
button{font-family:Algerian;}
div{font-family:Algerian;}
метод, написанный ниже, также очень не рекомендуется:
div,button,span,strong{font-family:Algerian;}
9 ответов
поставить font-family
декларации body
селектор:
body {
font-family: Algerian;
}
все элементы на Вашей странице унаследуют это семейство шрифтов (если, конечно, вы не переопределите его позже).
универсальный селектор *
относится ко всем элементам,
этот 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;
}
убедитесь, что мобильные устройства не изменят шрифт со своим шрифтом по умолчанию, используя important вместе с универсальным селектором *:
* { font-family: Algerian !important;}
поскольку другой шрифт, вероятно, уже определен браузером для элементов формы, вот 2 способа использовать этот шрифт везде:
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 или serif). Будет использоваться первый из списка, который существует в ОС пользователя.
(*) курсивом по умолчанию в Windows является Comic Sans. Кроме того, если вы хотите троллить пользователей Windows, не делай этого :) Этот шрифт ужасен, за исключением дней рождения ваших детей, где он приветствуется.
хорошо, поэтому у меня была эта проблема, когда я попробовал несколько разных вариантов.
шрифт, который я использую, - Ubuntu-LI, я создал папку шрифтов в своем рабочем каталоге. в папке Fonts
я смог применить его... в конце концов, вот мой рабочий код
Я хотел, чтобы это применялось ко всему моему сайту, поэтому я поместил его в верхней части документа 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 были чем-то другим, скажем, без sarif, я бы сделал что-то вроде
h1{
font-family: Sans-sarif;
}
в этом случае только мои теги H1 будут шрифтом sans-sarif, а остальная часть моей страницы будет шрифтом Ubuntu-LI
пожалуйста, поместите это в голове вашей страницы(ов), если "тело" нуждается в использовании 1 и того же шрифта:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
все между тегами <body>
и </body>
будет иметь тот же шрифт
*{font-family:Algerian;}
этот HTML работал для меня. Добавлено в настройки холста в wordpress.
выглядит круто - спасибо !