Bootstrap как подключить шрифты

Содержание
  1. Шрифты в Bootstrap
  2. Подключение своего шрифта к странице
  3. Оформление заголовков
  4. Классы h1, h2, h3, h4, h5 и h6
  5. Отображение второстепенного контента в заголовках
  6. Классы display для заголовков
  7. Класс page-header для оформления h1
  8. Размер шрифта и высота строки
  9. Изменение размера шрифта
  10. Типографика
  11. Глобальные настройки
  12. Заголовки
  13. Настройка заголовков
  14. «Заголовок дисплея»
  15. Блочные текстовые элементы
  16. Классы текстовых утилит
  17. Сокращения
  18. Цитаты
  19. Наименование источника
  20. Выравнивание
  21. Списки
  22. Без элементов стилизации
  23. Блочные
  24. Описание и выравнивание
  25. Адаптивные размеры шрифта
  26. Bootstrap Текст/шрифт
  27. Настройки по умолчанию Bootstrap
  28. По умолчанию Bootstrap vs. браузер
  29. Пример
  30. h1 Bootstrap heading (36px)
  31. h2 Bootstrap heading (30px)
  32. h3 Bootstrap heading (24px)
  33. h4 Bootstrap heading (18px)
  34. Пример
  35. h1 heading secondary text
  36. h2 heading secondary text
  37. h3 heading secondary text
  38. h4 heading secondary text
  39. Пример
  40. Пример
  41. Пример
  42. Пример
  43. Пример
  44. Пример
  45. Пример
  46. Контекстуальные цвета и фоны
  47. Пример
  48. Пример
  49. Другие классы типографии
  50. Полная ссылка на типографию Bootstrap

В этой статье рассмотрим, как в Bootstrap 3 и 4 осуществляется оформление и работа с текстовой информацией.

Шрифты в Bootstrap

В Bootstrap 3 по умолчанию для основного содержимого используется следующие шрифты:

В Bootstrap 4 стек шрифтов был изменён на следующий:

Это изменение позволило отображать текстовый контент на различных устройствах и операционных системах с помощью «родных» шрифтов.

При желании данный набор шрифтов можно установить и для Bootstrap 3. Для этого необходимо собрать свою сборку (например, на странице Customize and download), в которой в качестве переменной @font-family-sans-serif задать стек шрифтов Bootstrap 4.

Если вариант использование данной возможности и без создания пользовательской сборки, посредством добавления данной инструкции в свой файл CSS.

Подключение своего шрифта к странице

При необходимости вы можете также подключить нестандартный шрифт к странице. Для этого, например можно воспользоваться сервисом Google Font или другим способом (например, использовать какой-то скачанный шрифт).

1. Подключаем шрифт (например, Roboto) с помощью элемента link :

2. Определяем область его использования, т.е. выбираем элементы, внутри которых текстовый контент будет отображаться с помощью этого шрифта. Данный шрифт (например, Roboto) при этом должен стоять в свойстве font-family перед всеми другими шрифтами:

Оформление заголовков

В Bootstrap 3 и 4 HTML-заголовкам

задано уже некоторое оформление по умолчанию (например, размер шрифта, margin отступы снизу и сверху, толщина шрифта и т.д.).

Пример создания HTML заголовков:

READ  Как подключить доп фары на квадроцикл

Стилизация заголовков в Bootstrap

Классы h1, h2, h3, h4, h5 и h6

Отображение второстепенного контента в заголовках

Классы display для заголовков

Класс page-header для оформления h1

Синтаксис данного класса:

Пример использования класса page-header :

Так на Bootstrap 3 выглядит заголовок h1 с page-title

Размер шрифта и высота строки

Но так как в стилях Bootstrap 4 элементу html явно не устанавливается размер шрифта, то данное значение будет браться из браузера.

Например, в десктопной версии браузера Chrome настройка размера шрифтов осуществляется на странице «Настройки» в разделе «Вид страниц». По умолчанию данное значение равно 16px. Если данное значение, например, увеличить до 18px, то 1rem в Bootstrap 4 будет уже равен 18px.

Изменение размера шрифта

Если вы хотите изменить размер шрифта, т.е. сделать его для некоторого блока больше или меньше, то можете воспользоваться CSS. Для этого необходимо открыть свой файл CSS и написать инструкцию (выбрать элементы и указать им свойство font-size с необходимым значением):

Если же вы хотите сделать размер шрифта на разных устройствах разным, то можно воспользоваться медиа запросами:

Эти варианты можно использовать для создания адаптивных заголовков и текста.

Кроме этого, бывают ситуации, когда вы задаёте блоку фиксированную высоту, а контент, который содержит данный блок, в него не помещается.

Контент не помещается в блок фиксированной высоты

Но можно поступить и по-другому, а именно показать пользователю, что это не весь контент, добавив после него три точки.

Для этого можно скачать js-плагин dotdotdot. Подключить его к странице и назначить необходимым элементам.

Варианты обрезки контента, который не помещается в блок фиксированной высоты

Расположение контента в одну строку

Возможен, конечно, и другой вариант решения данной проблемы в зависимости от задачи. Можно, например, сделать не скрытие контента, а дать возможность его прокрутки.

Отображение контента с прокрутками

Источник

Типографика

Документация и примеры типографии Bootstrap, включая глобальные настройки, заголовки, текст документа, списки и т.д.

Глобальные настройки

Bootstrap предустанавливает глобальные стили отображения, типографии и ссылок. Когда нужно настроить больше элементов, проверьте наши классы текстовых утилит.

Заголовки

) доступны в BS4.

h6. Заголовок bootstrap

h1. Заголовок bootstrap

h2. Заголовок bootstrap

h3. Заголовок bootstrap

h4. Заголовок bootstrap

h5. Заголовок bootstrap

h6. Заголовок bootstrap

Настройка заголовков

Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.

READ  Как подключить шланги на кун на мтз

«Заголовок дисплея»

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Блочные текстовые элементы

Стили для обычных блочных элементов HTML5.

тег-выделитель для подсветки текста.

Мелкий шрифт (типа нижний индекс).

Жирный текст.

Также, свободно пользуйтесь тегами и в HTML5. создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а выделяет цитаты, прямую речь, термины и т.д.

Классы текстовых утилит

Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.

Сокращения

Цитаты

Для цитат с другого источника в вашем документе. Оберните любой элемент в

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Наименование источника

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то знаменитый в Название источника

Выравнивание

Используйте текстовые утилиты, если необходимо изменить выравнивание блока цитат.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то знаменитый в Название источника

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то знаменитый в Название источника

Списки

Без элементов стилизации

Удаляет свойство по умолчанию list-style и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.

Блочные

Описание и выравнивание

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta Etiam porta sem malesuada magna mollis euismod. Truncated term is truncated Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Вложенность Список вложенных определений Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Адаптивные размеры шрифта

font-size в медиа-запросах. Bootstrap не делает этого по умолчанию, но вы можете легко сделать это сами.

Вот пример. Выбирайте какие угодно font-size и медиа-запросы.

Источник

Bootstrap Текст/шрифт

Настройки по умолчанию Bootstrap

Глобальный размер шрифта по умолчанию Bootstrap — 14px, с высотой строки 1,428.

Это применяется к элементу и ко всем абзацам (

READ  Как подключить посудомоечную машину икеа

элементы имеют нижнее поле, равное половине вычисленной высоты линии (10px по умолчанию).

По умолчанию Bootstrap vs. браузер

В этой главе мы рассмотрим некоторые элементы HTML, которые будут стилизованы немного по-другому по сравнению с браузером по умолчанию.

По умолчанию Bootstrap будет стиль заголовки HTML (

) следующим образом:

Пример

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

В Bootstrap элемент HTML используется для создания более светлого, вторичного текста в любом заголовке:

Пример

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

Bootstrap будет стиль HTML элемент следующим образом:

Пример

Use the mark element to highlight text.

Пример

Bootstrap будет стиль HTML

Пример

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Пример

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Bootstrap будет стиль HTML элемент следующим образом:

Пример

Bootstrap будет стиль HTML элемент следующим образом:

Пример

Bootstrap будет стиль HTML элемент следующим образом:

Пример

Use ctrl + p to open the Print dialog box.

Контекстуальные цвета и фоны

Bootstrap также имеет некоторые контекстные классы, которые можно использовать для предоставления «смысла через цвета».

Пример

Этот текст отключен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет предупреждение.

Этот текст представляет опасность.

Пример

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Другие классы типографии

Следующие классы начальной загрузки можно добавить в HTML-элементы стиля.

элемент прокручиваемым

Полная ссылка на типографию Bootstrap

Для полной справки всех элементов типографии/классов, перейдите к нашей полной Справочник по типографии Bootstrap.

Также смотрите наши вспомогательные классы Bootstrap для получения дополнительной информации о контекстных классах.

Источник

Поделиться с друзьями
Как подключить и установить...
Adblock
detector