Как изменить вес шрифта в Jumbotron Bootstrap 3
Как изменить толщину шрифта в .jumbotron и абзацев в .jumbotron?
Я не хочу, чтобы мой font-weight был таким большим.
HTML:
<header>
<div class = "container-fluid landing-page">
<div class = "jumbotron vertical-center">
<h1>Embroider<span class = "eze">eze</span></h1>
<p>Branding <span class = "eze">●</span> Promotional Items <span class = "eze">●</span> Reflective Tape <span class = "eze">●</span> Gifts</p>
</div>
</div>
</header>
CSS:
.jumbotron {
color: #dbdbdb;
background-color: transparent;
text-align: center;
margin-top: 300px;
font-weight: 200;
}
Также не работает изменение размера шрифта.
возможно, у меня неправильная ссылка на CSS, плохая проверка. (править) Все еще не работает - CSS правильно связан
@ user2796515 не похоже, что вес шрифта на этих изображениях вообще изменился, изменился только размер шрифта.
Здесь h1 и p изменены: jsfiddle.net/pa07so3e/3 сравните с этим: jsfiddle.net/pa07so3e/4
Ответы 3
По умолчанию в bootstrap есть несколько стилей для h1 и P. Если вы хотите переопределить, попробуйте с этим
.jumbotron h1{
font-weight: 800;
}
.jumbotron p{
font-weight: 800;
}
Кажется, что это работает, но мой текст не меняется в диапазонах, где font-weight составляет от 100 до 500.
@WihanUys попробуйте увеличить размер шрифта
вы можете проверить это:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class = "no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class = "no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class = "no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class = "no-js">
<!--<![endif]-->
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<title></title>
<meta name = "description" content = "">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.jumbotron h1 {
color: #dbdbdb;
background-color: transparent;
text-align: center;
margin-top: 100px;
font-weight: 200;
font-size: 20px;
}
.jumbotron p {
color: #dbdbdb;
background-color: transparent;
text-align: center;
margin-top: 100px;
font-weight: 200;
font-size: 20px;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class = "browsehappy">You are using an <strong>outdated</strong> browser. Please <a href = "#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<div class = "container-fluid landing-page">
<div class = "jumbotron vertical-center">
<h1>Embroider
<span>eze</span>
</h1>
<p>Branding
<span>●</span> Promotional Items
<span>●</span> Reflective Tape
<span>●</span> Gifts</p>
</div>
</div>
</header>
</body>
</html>Обновление для настройки веса шрифта в Jumbotron BootStrap 4:
Аналогичный синтаксис - скажем, вы создаете класс в своем файле css, как показано ниже;
.jumbotron_text { font-weight: 600; }
И примените его к тегу p внутри вашего jumbotron div, как показано ниже;
<div class = "jumbotron">
<p class=jumbotron_text">Some text here </p>
</div>
Обратите внимание, что я использую 600 (диапазон: 100, 200, 300, 400, 500, 600, 700, 800 900).
Большинство шрифтов отображают нормальный на 500 и полужирный на 700.
Другие числа являются приблизительными для браузера, если они не указаны специально в шрифте.
font-weight: 900, чтобы проиллюстрировать его изменения. Эта рабочий пример: jsfiddle.net/pa07so3e/1 показывает меньший шрифт