Игнорирует мой шрифт в CSS и берет шрифт Bootstapp

194
12 апреля 2022, 20:10

Хочу добавить шрифт OpenSans на свой сайт.

Добавил в свой сайт Bootstrap - для адаптивной верстки.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Так же подключаем css от бутстрапа, ссылку на наш шрифт и наш css сверху

 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 <link rel="stylesheet" href="~/css/site2.css" />

И в нашем кастомном css пишем в конце

* {
    font-family: 'Open Sans' !important,  sans-serif; 
    font-style: normal;
    font-weight: 400;
}

Вроде как должен быть везде наш шрифт теперь. Но! Нет, что-то переопределяет мой css и в отладчика я вижу следующее

inherited From Body
_reboot.scss
body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

Этот _reboot.scss - часть бутстрапа, я так понял. Но почему он игнорирует мой css и пользуется бутстрапом? И как это исправить?

Answer 1

.bad * {
  font-family: Arial !important, sans-serif; 
}
.good * {
  font-family: Arial, sans-serif !important; 
}
.bad div, .good div {
  font-family: 'Times New Roman'; 
}
<div class="bad">
  <div>Foo</div>
</div>
<div class="good">
  <div>Foo</div>
</div>

Модификатор !important относится ко всему свойству, а не к одной из частей его значения.

READ ALSO
Получаю ошибку JQuerry Uncaught ReferenceError: admin is not defined at HTMLAnchorElement.onclick
HTML

Получаю ошибку JQuerry Uncaught ReferenceError: admin is not defined at HTMLAnchorElement.onclick

Ошибка происходит в строке <a style='cursor: pointer' onclick 'checkChat(

 203
Тест на PHP.1 вопрос - 2 ответа
HTML

Тест на PHP.1 вопрос - 2 ответа

Есть 2 файла indexphp и result

 191
Как задать доступ к chekbox для js?
HTML

Как задать доступ к chekbox для js?

Нужно посмотреть какие checkbox выбраны, но никак не могу получить к ним доступВ html находится :

 217
Как правильно задать z-index?
HTML

Как правильно задать z-index?

Всем доброго времени сутокЕсть часть вёрстки:

 317