Почему google font weight не работает?
Я пытаюсь изменить h1 на font-weight: 300. За исключением тех случаев, когда я это делал:
.h1{
font-weight: 300;
}
Ничего не случилось!
Таким образом, чтобы проверить вес шрифта на других текстовых элементах, я установил весь инкапсулирующий контейнер,
container-fluid, в font-weight: 200: .container-fluid{
font-family: 'Work Sans', sans-serif;
font-weight: 200;
}
...И только пара элементов изменила их font-weight (см. здесь: JFiddle). Остальные остались прежними.
Почему это происходит? Если бы кто-нибудь мог показать мне, как изменить вес шрифта h1, это было бы очень оценил!
Я использую Chrome, Если это уместно. Но я также запустил свой JFiddle на сафари, и это был тот же результат.
Я импортировал все веса шрифтов, которые мне были нужны в верхней части моего файла CSS :
/*import custom font*/
@import 'http://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';
Я попробовал использовать http:, как предложил этот пост. Ничего не изменилось.
1 ответ:
Свойство
font-weightимеет значение 500 в файле bootstrap css для следующих элементов:.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6Если вы хотите задать вес шрифта элемента, вам нужен селектор, который более специфичен, чем селектор по умолчанию (bootstrap). Если вы, например, напишете более конкретный селектор, такой как
.container-fluid h1 { font-weight: 100; }, вы увидите, что он влияет на элемент. Вы даже можете использовать крайне не рекомендуется!importantПосле правила CSS для переопределения более конкретных правил CSS.Однако это неразумно. перепишите все стили страницы с одинаковым весом шрифта. Обычно, например, заголовки имеют другой вес шрифта, чем обычный текст.
Однако в вашем примере вы можете просто использовать селектор
h1для выбора всех элементов<h1>вместо выбора класса.h1. Ты, наверное, ошибся. Если у вас есть такая же специфика селектора, порядок таблиц стилей CSS имеет значение. Стили bootstrap включаются перед вашими пользовательскими стилями, поэтому ваш пользовательский стили переопределяют стили начальной загрузки.
Comments