Html адаптивный размер шрифта: Как сделать адаптивный текст

Без труда читаемый адаптивный текст с помощью единиц измерения на основе окна просмотра

От автора: с тех пор как я создал BigText более семи лет назад, я был немного одержим красивым большим текстом. К сожалению, в моем собственном блоге заголовки были, если честно, не совсем выразительными. Я хотел немного подправить их и перейти от фиксированных размеров текста к динамическому — сделать адаптивный текст, который увеличивается с увеличением окна просмотра. Я видел много вариантов этого подхода с использованием обработчиков resize в JavaScript.

BigText, который использует JavaScript для автоматического поиска нужного размера текста (это немного затратно и медленно).

FitText.js (от Дейва Рупперта) использует заданный разработчиком коэффициент масштабирования для линейного изменения размера текста (быстрый, но требует настройки).

Версия FitText.js без jQuery от Джереми Кита

Еще одним популярным вариантом является FlowType. JS — очень похожая концепция.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Были и другие реализации этого подхода к изменению размера текста в JavaScript. Но, насколько я могу судить, нам представилась возможность обойтись без них, когда в 2012 году единицы измерения на основании окна просмотра получили нормальную поддержку браузеров! Если CSS может сделать эту работу, пусть он ее и делает. Удалите ненужные JavaScripts — все!

Я уже могу представить первое возражение в комментариях к посту: плагины JavaScript могут изменять размер в зависимости от размеров элемента, а не только окна просмотра! Хорошо — действительно это так, но это просто еще один довод в пользу запросов контейнера. Мы можем справиться с этим с помощью CSS — это просто требует дополнительной, кропотливой работы, связанной с поддержанием кода для пределов, при которых наш текст должен изменяться, и когда он должен быть фиксированным. Но это все же лучше, чем обработчик события resize JavaScript (по моему скромному мнению). Если мы знаем, где размещаются в макете элементы, мы можем просто скорректировать значения единиц окна просмотра, чтобы имитировать что-то подобное на единицы контейнера.

Пример

Текущие спецификации макета для постов в моем собственном блоге следующие:

Базовый размер — 100% гибкой ширины.

Контент имеет максимальную ширину: 589px (31em при размере шрифта: 19px) и поддерживает эту максимальную ширину даже при добавлении правого блока.

(Эта спецификация макета напоминает мне sizes от srcset с адаптивными изображениями, хм …)

Это довольно простой пример. У нас есть два предела: контрольная точка, с которой мы будем переключаться на использование единиц окна просмотра, и верхний предел, когда мы достигаем максимальной ширины контента (589 пикселей).

Вы можете настроить контрольные точки и минимальный размер шрифта для своего случая:

#demo-1 {
/* Минимальный размер шрифта */
font-size: 20px;
}
/* Произвольная минимальная контрольная точка */
/* Переход от минимального размера шрифта в 20px к vw с использованием этой формулы: */
@media (min-width: 320px) {
#demo-1 {
/* ( Минимальный размер шрифта / Контрольную точку ) ✕ 100 */
/* ( 20px / 320px ) ✕ 100 = 6. 25vw */
font-size: 6.25vw;
}
}
/* Контрольная точка максимальной ширины контента */
/* Переход от vw максимальному размеру шрифта с использованием этой формулы: */
@media (min-width: 589px) {
#demo-1 {
/* Контрольная точка ✕ ( Единицы окна просмотра / 100 ) */
/* 589px ✕ ( 6.25vw / 100 ) = 36.8125px */
font-size: 36.8125px;
}
}

Предостережение. Я использую пиксели в нескольких местах, где я обычно использую эмы или ремы, чтобы упростить чтение кода примера.

Формулы

Переход от фиксированного минимального размера шрифта к единицам окна просмотра. Эта формула используется в приведенном выше примере с контрольной точки 320px.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Единицы окна просмотра = ( размер шрифта (px) / контрольная точка (px) ) ✕ 100

Переход от единиц окна просмотра к фиксированным максимальным размерам шрифта. Эта формула используется в приведенном выше примере с контрольной точки 589px.

Размер шрифта (px) = контрольная точка (px) ✕ (единицы окна просмотра / 100 )

После того, как вы получили пиксели, вы, конечно, можете конвертировать их в rem или em.

Неравномерное масштабирование

Если вы хотите, чтобы текст увеличивался или уменьшался с уменьшенной скоростью, вы можете использовать calc для суммирования элемента vw с фиксированным блоком CSS (например, px или em), — но в таком случае выравнивание для различных пределов осуществляется немного сложнее, и это уже выходит за рамки данной статьи.

Альтернативное решение

#demo-1 {
/* Минимальный размер шрифта */
font-size: 20px;
font-size: 6.25vw;
}

Я видел, что некоторые разработчики предлагают отказаться от минимального медиа-запроса вообще, как в приведенном выше коде. Это, наверное, хорошо, но мне не очень нравится, что неограниченный минимальный размер шрифта может быстро стать нечитаемым на супер маленьких контрольных точках. Например на smart watch.

В ожидании новых единиц

Мне интересно, как запросы контейнера (или подобные) могут работать с единицами окна просмотра. Теперь я начинаю понимать, что добавление в будущем единиц контейнера может помочь упростить код наподобие этого:

#demo-2 {
font-size: 20px;
}
@media (min-width: 320px) {
#demo-2 {
/* Будьте оснорожны: `cw` — это не реальная единица */
font-size: 6.25cw;
}
}

Это позволит обойтись без второй контрольной точки, поскольку размер шрифта будет определяться размером произвольного контейнера, который уже имеет верхний предел max-width.

В любом случае

Все вышесказанное было сказано для того, чтобы донести до вас мысль — я сделал все свои заголовки в блоге огромными, и это действительно делает меня счастливым. Я использую единицы окна просмотра только с минимальным пределом. Если ваш экран достаточно широкий (скажем, 3440 пикселей), вы сможете, вероятно, прочитать их из космоса:

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

Автор: Zach Leatherman

Источник: //www.zachleat.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

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

В реальном оригинальном Sass (не scss) вы можете использовать следующие миксины, чтобы автоматически устанавливать абзацы и все заголовки font-size.

Мне нравится это, потому что это намного более компактно. И быстрее набрать. Помимо этого, он обеспечивает ту же функциональность. В любом случае, если вы все еще хотите придерживаться нового синтаксиса — scss, тогда смело конвертируйте мой контент Sass в scss здесь:
[CONVERT SASS TO SCSS HERE]

Ниже я даю вам четыре миксина Sass. Вам придется настроить их параметры в соответствии с вашими потребностями.

=font-h2p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h2-h6 tags to recalculate their size in a media query.
=h2p-font-size-generator-auto($h2-fs: 3em, $h2-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h2 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

После того, как вы закончите играть с настройками, просто сделайте вызов на один миксин — это: + config-and-run-font-generator () . Смотрите код ниже и комментарии для получения дополнительной информации.

Я думаю, вы могли бы сделать это автоматически для медиа-запроса, как это делается для тегов заголовка, но мы все используем разные медиа-запросы, поэтому он не подходит для всех. Я использую мобильную конструкцию, поэтому я так и поступлю. Не стесняйтесь копировать и использовать этот код.

Скопируйте и вставьте эти смеси в ваш файл:

=font-h2p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1. 6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h2p-font-size-generator-auto($h2-fs: 3em, $h2-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h2-fs: $h2-fs // Set first header element to this size
  $h2-step-down: $h2-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h2-fs: $h2-fs + $h2-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h2-fs - ($h2-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h2-fs - ($h2-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h2p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h2p-font-size-generator-auto($h2-fs: 2em, $h2-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

НАСТРОЙТЕ ВСЕ МИКСИНЫ ДЛЯ ВАШИХ ПОТРЕБНОСТЕЙ — ИГРАЙТЕ С НИМ! 🙂 И ТОГДА ПОЗВОНИТЕ ЭТО В ТОПЕ ВАШЕГО АКТУАЛЬНОГО SASS КОДА С:

+config-and-run-font-generator()

Это будет генерировать этот вывод. Вы можете настроить параметры для генерации различных наборов результатов. Однако, поскольку мы все используем разные медиа-запросы, некоторые миксины вам придется редактировать вручную (стиль и медиа).

Сгенерированный CSS:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h2, h3, h4, h5, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h2 {
  font-size: 2em; }

h3 {
  font-size: 1.8em; }

h4 {
  font-size: 1.6em; }

h5 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

responsive-design — Как реализовать адаптивную типографику с помощью Bootstrap 4?

Я создаю адаптивное веб-приложение с Bootstrap 4. Я хочу, чтобы размер шрифта всего текста был уменьшен на мобильных устройствах по сравнению с рабочим столом, поэтому я добавил следующее в свой базовый файл css согласно документации Bootstrap (https://getbootstrap.com/docs/4.0/content/typography/):

 html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

Однако размер шрифта остается фиксированным. Что я делаю неправильно?

5

sean

6 Янв 2018 в 14:17

3 ответа

Лучший ответ

Это особенность Sass.

Чтобы иметь доступ к миксинам медиа-точек останова и переменным размера, вам необходимо:

1. добавить файл custom. scss
2. @import "node_modules/bootstrap/scss/bootstrap";
3. и настроить компилятор Sass

https://getbootstrap.com/docs/4.0/getting-started/theming/

3

hayden
6 Янв 2018 в 11:29

Я думаю, что самый простой способ — использовать @media Queries . Предположим, что вы хотите изменить размер шрифта отзывчиво для содержимого с классом «class-name» или даже для всего html-тега, просто добавьте ваши медиазапросы в конец файла CSS или в любое место внутри него.

Пример кода:

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  
    . class-name {font-size: 16px;}
  }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {  
    .class-name {font-size: 30px;}
  }

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) { 
    .class-name {font-size: 40px;}

  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {  
    .class-name {font-size: 48px;}
  }

  /*

Более подробную информацию можно найти здесь.

8

Ayman Al-Absi
14 Май 2018 в 22:12

Начиная с Bootstrap 4.3.1 , теперь есть RFS (адаптивный размер шрифта)! Однако, как описано в документах, вы должны включить его используя переменную $enable-responsive-font-sizes SASS.

Демонстрация RFS: https://www.codeply.com/go/jr8RbeNf2M

До начальной загрузки 4. 3.1 вы могли бы реализовать адаптивный текст, используя SASS. Однако вам нужно указать желаемый соответствующий селектор (ы) для текста, который вы хотите изменить размер …

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.1rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.3rem;
  }
}

@import "bootstrap"; 

Демонстрация: https://www.codeply.com/go/5pZDWAvenE

Это также может быть сделано с использованием только CSS (без SASS):

Демонстрация: https://www.codeply.com/go/E1MVXqp21D

5

Zim
31 Мар 2019 в 09:24

font-size | htmlbook.

ru

Краткая информация

Версии CSS

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими
способами. Набор констант (xx-small, x-small, small,
medium, large, x-large, xx-large) задает размер, который называется абсолютным.
По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера
и операционной системы.

Другой набор констант (larger, smaller)
устанавливает относительные размеры шрифта. Поскольку размер унаследован от
родительского элемента, эти относительные размеры применяются к родительскому
элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.

Рис. 1. Размер шрифта

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Значения

Для задания абсолютного размера используются следующие значения: xx-small,
x-small, small, medium,
large, x-large, xx-large.
Их соответствие с размером шрифта в HTML приведено в табл. 1.

Относительный размер шрифта задается значениями larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em
(высота шрифта элемента), ex (высота символа х),
пункты (pt), пикселы (px),
проценты (%) и др. За 100% берется размер шрифта
родительского элемента. Отрицательные значения не допускаются.

inherit

Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-size</title>
  <style>
   h2 {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */ 
    font-size: 250%; /* Размер шрифта в процентах */ 
   } 
   p {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11pt; /* Размер шрифта в пунктах */ 
   }
  </style>
 </head> 
 <body> 
  <h2>Duis te feugifacilisi</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 2. Применение свойства font-size

Объектная модель

[window.]document.getElementById(«elementID»).style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

font-size — Адаптивный размер шрифта в CSS

В размер шрифта выиграл’т, как это реагировать при изменении размера окна браузера. Вместо этого они реагируют на масштаб в браузере/тип размер параметры, такие как если вы нажмете <и>сочетание клавиш Ctrl</КБД&GT; и &LT;и&GT; в+</роз> вместе на клавиатуре в браузере.

Медиа-Запросы

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

Например, попробуйте добавить это в ваш CSS внизу, меняя 320 пикселей в ширину, где ваш проект начинает рушиться:

   body { 
      font-size: 2em; 
   }

}

Просмотра процентах длины

Вы также можете использовать просмотра процентах длины например, Фольксваген, ВХ, значение vmin и VMAX в. Официальный документ консорциума W3C для этого государства:

&GT; в области просмотра-процент длины по отношению к размеру начального содержащего блока. Когда высота или ширина начального содержащего блока изменяется, они масштабируются соответствующим образом.

Опять же, из того же консорциума W3C документ каждой группы может быть определена как ниже:

Фольксваген единица — равна 1% от ширины начального содержащего блока.

ВХ единица — равна 1% от высоты начального содержащего блока.

вмин блок — равный наименьшему из Фольксваген или VH.

VMAX в единицу, равную Фольксваген или VH.

И они используются в точности так же, как любое другое значение CSS:

  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Совместимость сравнительно хорошо, как можно увидеть здесь. Однако, некоторые версии Internet&ампер;усилитель; nbsp;Explorer и края не поддерживают uмакс. Кроме того, iOS и усилителя;усилитель; nbsp;6 и 7 имеют проблему с блоком ВХ, которая была исправлена в iOS и усилителя;усилитель; nbsp;8.

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

С самого зарождения интернета люди начали дискутировать на тему того, как лучше всего определять шрифты. Кроме традиционных кандидатов вроде px, em и %, есть еще единица измерения rem, которая представляет собой довольно новую альтернативу, совмещающую в себе лучшие свойства своих предшественников.

Прошлые стандарты: размер шрифта при помощи em или %

Примерно до 2008 года считалось, что необходимо использовать гибкие размеры шрифтов. И для достижения этой гибкости, использовались единицы изменения em или %, которые являются относительными значениями к стандарту браузера, которым зачастую являлся размер равный 16 пикселям.

Такой подход устраивал многих пользователей, так как большинство браузеров на то время не имели возможность масштабировать страницы, а IE6 и вовсе не умел масштабировать шрифты, указанные в px. По крайней мере, если при этом не трогали системные настройки.

Проблема заключалась в том, что при указании размеров в em или %, они должны были быть относительными чему-либо. Процентный показатель относителен по своей сути, и зачастую он был относителен размерам своего родительского элемента. Единица изменения em не сильно отличалась:

* в параметре модели блока margin-bottom em относится к размеру шрифта самого элемента. Изменения в размере шрифта вели к изменениям в поле (margin), что могло привести к абсолютно нежелательному эффекту.

* с другой стороны, определение размера шрифта при помощи em всегда было относительно размеру шрифта его родительского элемента. Применение размера 0.875em вело к всё большему уменьшению с каждым вложенным элементом. Чем больше вложенных элементов у вас было, тем меньше становился шрифт.

Нам это напомнило историю про Алису в стране чудес. То все было большим, то все было маленьким, невозможно было подобрать идеальный вариант.

Временная эмансипация PX

В феврале 2009 года немецкий разработчик Jens Grochtdreis опубликовал статью под названием «Die leidige Sache mit der Schriftskalierung», которую можно было назвать «Раздражающие факты о масштабировании шрифтов», если бы ее публиковали на русском языке. Grochtdreis рекомендовал читателям использовать Px. На тот момент современные браузеры уже умели масштабировать страницы, а необходимости брать в учет IE6 уже не было.

Годом позже, немецкий разработчик Gerrit van Aaken поддержал Grochtdreis в своей статье «Warum ich Pixel fur CSS-Schriftgrade verwende» или «Почему мы используем PX для указания размеров шрифта в CSS». Не менее интересным, чем сама статья, было начавшееся обсуждение в комментариях. И в этом обсуждении, в комментарии под номером 22, человек упомянул о единице изменения REM, о которой тогда практически никто не знал.

Спустя некоторое время, в 2011 году термин rem начал набирать обороты, медленно, но уверенно. И это не удивительно, так как rem совмещает в себе плюс и px и em. Он не менее гибок, чем его предшественники, но имеет и исправления недостатков с точки зрения наследования, так как rem всегда относится к корневому элементу – к ‘html’, а не к ‘body’.

Чтобы получить значение rem, мы делим предпочитаемый размер в пикселях на базовое значение равное 16. Вот так будет выглядеть корректное указание размера шрифта в CSS:

html { font-size: 100%; } /* Браузерное умолчание, т.е. 16px  */   
h2 { font-size: 1.75rem; } /* 28/16 = 1.75 */  
h3 { font-size: 1.375rem; } /* 22/16 = 1.375 */   
p { font-size: 0.875rem; } /* 14/16 = 0.875 */

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

Откат для старых браузеров: PX

Если вам кажется, что все звучит слишком хорошо чтобы быть правдой, то вы правы. Всегда есть какие-то минусы, и в данном случае это старые браузеры. Сервис http://caniuse.com/rem покажет вам, чего следует ожидать. И если честно, можно ожидать довольно многого:

Недостатки данного метода связаны, как обычно, с названиями браузеров, и на этот раз дело касается IE версиями моложе 9, а также Opera Mini. Именно эти друзья делают необходимым реализовать запасной вариант в PX. Учитывая вышеприведенный пример, все должно выглядеть следующим образом:

html { font-size: 100%; }   
h2 { 
font-size: 28px; 
font-size: 1.75rem; 
}   
h3 { 
font-size: 22px; 
font-size: 1.375rem; 
}    
p { 
font-size: 14px; 
font-size: 0.875rem; 
}

Современные браузеры будут считывать и переписывать px-значение теми, что указаны в rem, а старые браузеры будут придерживаться инструкции в px, и игнорировать вторую строку. Примерно таким мы и видели этот процесс…

Типографика. Содержание · Bootstrap. Версия v4.0.0

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

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

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

• Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов font-family для всех ОС и девайсов.
• Для более широкой и доступной шкалы шрифтов BS4 использует шрифт браузера по умолчанию font-size (обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера.
• Используйте атрибуты $font-family-base, $font-size-base и $line-height-base как типографическую базу для <body>.
• Задавайте глобальные цвета ссылок через $link-color и применяйте подчеркивание ссылок только в :hover.
• Используйте $body-bg для задания background-color для <body> (по умолчанию стоит #fff).

Эти стили находятся в _reboot.scss, а глобальные переменные определены в _variables.scss. Задавайте $font-size-base в rem.

Заголовки

Все HTML-заголовки (<h2>—<h6>) доступны в BS4.

Заголовок	Пример
<h2></h2>	h2. Заголовок bootstrap
<h3></h3>	h3. Заголовок bootstrap
<h4></h4>	h4. Заголовок bootstrap
<h5></h5>	h5. Заголовок bootstrap
<h5></h5>	h5. Заголовок bootstrap
<h6></h6>	h6. Заголовок bootstrap

<h2>h2. Заголовок bootstrap </h2>
<h3>h3. Заголовок bootstrap </h3>
<h4>h4. Заголовок bootstrap </h4>
<h5>h5. Заголовок bootstrap </h5>
<h5>h5. Заголовок bootstrap </h5>
<h6>h6. Заголовок bootstrap </h6>

Если вы хотите, чтобы стилизация шрифта совпадала с заголовком, но не можете использовать соотнесенный HTML-элемент, классы .h2 — .h6 также доступны.

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

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

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

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

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

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

<p>h2. Заголовок bootstrap </p>
<p>h3. Заголовок bootstrap </p>
<p>h4. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h6. Заголовок bootstrap </p>

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

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

Заголовок отображения
С выцветшим вторичным текстом

<h4>
  Заголовок отображения
  <small>С выцветшим вторичным текстом</small>
</h4>

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

Традиционные заголовки созданы для «работы» «в глубине» вашей страницы. Если вам необходимо выделить заголовок, используйте «заголовок дисплея» — большего размера, слегка более вычурный.

<h2>Display 1</h2>
<h2>Display 2</h2>
<h2>Display 3</h2>
<h2>Display 4</h2>

«Лид»

Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead.

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

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

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

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

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

Удаленный текст.

Зачеркнутый.

Строка — дополнение к документу.

Подчеркнутая

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

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

Курсив.

<p>Тэг-выделитель для <mark>подсветки</mark> текста.</p>
<p><del>Удаленный текст.</del></p>
<p><s>Зачеркнутый.</s></p>
<p><ins>Строка - дополнение к документу.</ins></p>
<p><u>Подчеркнутая</u></p>
<p><small>Мелкий шрифт (типа нижний индекс).</small></p>
<p><strong>Жирный текст.</strong></p>
<p><em>Курсив.</em></p>

Классы .mark и .small дают стили, одинаковые с тэгами <mark> и <small>, но помогают избежать нежелательных семантических последствий, которые могут возникнуть с тэгами.

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

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

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

Сокращения

Реализация элемента <abbr> нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.

Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>

Цитаты

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

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

Добавьте <footer> для идентификации источника. Оберните имя источника в <cite>.

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Source Title</cite></footer>
</blockquote>

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

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

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>

Списки

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

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at

• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Блочные

Удаляет у элементов списка значок слева и создает небольшой отступ margin с помощью сочетания классов . list-inline и .list-inline-item.

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

<ul>
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

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

Выравнивайте термины и описания по горизонтали, используя предустановленные классы сеточной системы BS4 (или семантические миксины). Для более длинных терминов вы можете добавить класс .text-truncate чтобы «усечь» текст эллипсисом.

Списки описания

A description list is perfect for defining terms.

Euismod

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.

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>

  <dt>Euismod</dt>
  <dd>
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt>Truncated term is truncated</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </dd>

  <dt>Nesting</dt>
  <dd>
    <dl>
      <dt>Nested definition list</dt>
      <dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Отзывчивая «типографика»

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

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

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

Размер адаптивного шрифта в CSS

В собственно оригинальном Sass (не scss) вы можете использовать приведенные ниже миксины для автоматической установки font-size абзаца и всех заголовков.

Мне нравится, потому что он намного компактнее. И быстрее печатать. В остальном он обеспечивает ту же функциональность. В любом случае, если вы все еще хотите придерживаться нового синтаксиса — scss, не стесняйтесь конвертировать мой контент Sass в scss здесь:
[ПРЕОБРАЗОВАТЬ SASS В SCSS ЗДЕСЬ]

Ниже я приведу четыре примеси Sass.Вам придется настроить их параметры в соответствии с вашими потребностями.

  = font-h2p-style-generator-manual () // Вам не нужно его использовать. Это только стили, которые делают его красивым.
= media-query-base-font-size-change-generator-manual () // Этот миксин устанавливает базовый размер тела, который будет использоваться тегами h2-h6 для пересчета их размера в медиа-запросе.
= h2p-font-size-generator-auto ($ h2-fs: 3em, $ h2-step-down: 0,3, $ body-min-font-size: 1,2em, $ p-same-as-hx: 6) // Здесь вы установите размер h2 и размер переходов между тегами h
= config-and-run-font-generator () // Он вызывает только другие
  

После того, как вы закончите играть с настройками, просто вызовите один миксин — это: + config-and-run-font-generator () .См. Код ниже и комментарии для получения дополнительной информации.

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

КОПИРУЙТЕ ЭТИ МИКСИНЫ В СВОЙ ФАЙЛ:

  = font-h2p-style-generator-manual ()
  тело
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // шрифты Google
    размер шрифта: 100%
    высота строки: 1.3em
  % заголовки
    высота строки: 1em
    font-weight: 700
  п
    высота строки: 1.3em
    font-weight: 300
  @ для $ i от 1 до 6
    h # {$ i}
      @extend% заголовки


= media-query-base-font-size-change-generator-manual ()
  тело
    размер шрифта: 1.2em
  @media экран и (минимальная ширина: 680 пикселей)
    тело
      размер шрифта: 1.4em
  @media screen и (min-width: 1224px)
    тело
      размер шрифта: 1.6em
  @media screen и (min-width: 1400px)
    тело
      размер шрифта: 1.8em

= h2p-font-size-generator-auto ($ h2-fs: 3em, $ h2-step-down: 0.3, $ body-min-font-size: 1.2em, $ p-same-as-hx: 6)
  $ h2-fs: $ h2-fs // Установите этот размер для первого элемента заголовка
  $ h2-step-down: $ h2-step-down // Уменьшать каждый раз на 0,3
  $ p-same-as-hx: $ p-same-as-hx // Установить p font-sieze так же, как h (6)
  $ h2-fs: $ h2-fs + $ h2-step-down // Коррекция зацикливания
  @ для $ i от 1 до 6
    h # {$ i}
      размер шрифта: $ h2-fs - ($ h2-step-down * $ i)
    @if $ i == $ p-same-as-hx
      п
        размер шрифта: $ h2-fs - ($ h2-step-down * $ i)

// ЗАПУСКАТЬ ТОЛЬКО ЭТОТ МИКСИН. ЭТО ЗАПУСКАЕТ ОТДЫХ
= генератор-конфигурация-и-бегун-шрифтов ()
  + font-h2p-style-generator-manual () // Просто заполнитель для нашего стиля шрифта
  + media-query-base-font-size-change-generator-manual () // Просто заполнитель для размера шрифта нашего медиа-запроса
  + h2p-font-size-generator-auto ($ h2-fs: 2em, $ h2-step-down: 0.2, $ p-same-as-hx: 5) // Задайте здесь все параметры
  

КОНФИГУРИРУЙТЕ ВСЕ МИКСИНЫ ПОД ВАШИ ПОТРЕБНОСТИ — ИГРАЙТЕ! 🙂 А ЗАТЕМ НАЗЫВАЙТЕ ЭТО НАД СВОИМ ФАКТИЧЕСКИМ КОДОМ SASS:

  + генератор конфигураций и запуска шрифтов ()
  

Это сгенерирует этот вывод. Вы можете настроить параметры для получения различных наборов результатов. Однако, поскольку все мы используем разные медиа-запросы, некоторые миксины вам придется редактировать вручную (стиль и медиа).

СОЗДАННЫЙ CSS:

  кузов {
  семейство шрифтов: «Source Sans Pro», «Helvetica Neue», Helvetica, Arial, sans-serif;
  размер шрифта: 100%;
  высота строки: 1.3em;
  перенос слов: слово-разрыв; }

h2, h3, h4, h5, h5, h6 {
  высота строки: 1em;
  font-weight: 700; }

п {
  высота строки: 1.3em;
  font-weight: 300; }

тело {
  размер шрифта: 1.2em; }

@media screen и (min-width: 680px) {
  тело {
    размер шрифта: 1.4em; }}
@media screen и (min-width: 1224px) {
  тело {
    размер шрифта: 1.6em; }}
@media screen и (min-width: 1400px) {
  тело {
    размер шрифта: 1.8em; }}
h2 {
  размер шрифта: 2em; }

h3 {
  размер шрифта: 1.8em; }

h4 {
  размер шрифта: 1.6em; }

h5 {
  размер шрифта: 1.4em; }

h5 {
  размер шрифта: 1.2em; }

п {
  размер шрифта: 1.2em; }

h6 {
  размер шрифта: 1em;

}
  

Адаптивный текст: создание удобочитаемого текста на разных размерах экрана | автор: Кельвин Там

Многие из вас, возможно, уже знают об адаптивном веб-дизайне. Цитируется из Википедии: отзывчивый веб-дизайн ( RWD ) — это подход n к веб-дизайну, который обеспечивает хорошую визуализацию веб-страниц на различных устройствах и окнах или экранах разных размеров. Адаптивный текст сам по себе — это подход к созданию текста на веб-странице, который можно хорошо читать на различных устройствах и экранах .Это означает не только изменение размера на другом экране. Он обеспечивает хорошую читаемость и согласованность текста и окружающих его элементов. Сама первая веб-страница является полнотекстовой.

Первый сайт. Источник: http://info.cern.ch/hypertext/WWW/TheProject.html

Нельзя отрицать, что текст является одним из основных компонентов Интернета даже до сегодняшнего дня. Имея это в виду, есть некоторые вещи, которые могут помочь вам создать хороший отзывчивый текст.

В море тысячи рыб.И шрифты для Интернета тоже.
Вы можете просмотреть и загрузить множество привлекательных шрифтов в Интернете. Эта свобода также имеет некоторые недостатки. Использование пользовательского шрифта на вашем веб-сайте означает добавление дополнительной работы по HTTP-запросу на получение шрифта. При загрузке шрифта браузер может отображать Flash не стилизованного текста (FOUT) и Flash невидимого текста (FOIT).

Вы всегда можете использовать веб-шрифт, чтобы обеспечить максимальную совместимость между браузерами / операционными системами.Есть несколько шагов, которым вы можете следовать, чтобы избежать FOUT / FOIT.

1. Включите только нужный шрифт

Включите только необходимый шрифт и стиль шрифта. Один пример: если вы используете Google Font CDN, вам будет предложено выбрать, какой шрифт вы хотите включить.

Вы можете выбрать толщину и стиль шрифта, который будет включен.

Если вы решили добавить шрифт на выделенный сервер, используйте формат WOFF или WOFF2 .
Он имеет меньший размер, чем другие форматы.Он сжат в формате gzip и оптимизирован для Интернета. Загвоздка в том, что IE8 ниже его не поддерживает. Это не должно быть проблемой, поскольку Microsoft сама переходит на Edge.

Совет. Если вы создаете сайт с мелким шрифтом, вам могут подойти семейства шрифтов Reading Edge.

2. Подготовьте резервные комбинации

В случае, если шрифт не может быть загружен (например, сервер CDN не работает или недоступен на устройстве), браузер попытается загрузить шрифт, который вы указали следующим.Это пример использования Arial (а затем шрифта Sans-Serif по умолчанию) в качестве резервного шрифта для Roboto. Ниже GIF показано, как происходит FOUT, если резервный шрифт загружается перед основным шрифтом.

Вы можете увидеть, как смещается контент.

Достаточно сложно найти подходящий резервный шрифт. Вы можете использовать этот веб-сайт сопоставления шрифтов, чтобы проверить, какой шрифт может быть подходящим запасным вариантом, и поработать с его свойством. Цель состоит в том, чтобы уменьшить смещение макета, когда происходит FOUT. Я изменил Arial font-weight на 500 и межбуквенный интервал на 0.1px.

Лучше, правда?

3. Предварительная загрузка шрифта

По умолчанию шрифт был загружен после того, как браузер увидит все CSS-файлы, которые на него ссылаются (с помощью @ font-face , атрибута ) . Чтобы приспособиться к этому, вы можете предварительно загрузить свой шрифт. Большинство браузеров его поддерживают.

Предварительная загрузка синтаксиса шрифта с использованием тега ссылки

размеров адаптивного шрифта, и когда какие единицы использовать

С vw и vh вы можете настроить размер шрифта в соответствии с шириной экрана. Вот как управлять ими, как чемпионом.

Я уже некоторое время следую совету Хейдона о размерах шрифтов и узнал некоторые дополнительные приемы, позволяющие упростить работу с адаптивными размерами шрифтов.

1. То, что лежит в основе всех остальных

Для создания шрифтов разных размеров не требуются медиа-запросы.

Вам вообще не нужно много объявлений с размером шрифта .

В основном вам просто нужно это:

  html {font-size: calc (1em + 1vw)}
  

Это дает вам всю магию. Размеры шрифта соответствуют ширине устройства и отлично смотрятся на всех экранах. Но есть пара уловов, так что неплохо копнуть поглубже и

Разберитесь в волшебстве

Мы говорим браузеру вычислить результат добавления 1em к 1vw .Давайте сначала разберемся, что это значит.

Часть em : Вы можете думать о em как о размере нижнего края текста. Если область просмотра имеет ширину 0px , тогда vw будет 0 , но размер шрифта все равно будет не меньше em .

Часть vw : Значение vw говорит о том, насколько вы хотите, чтобы размер шрифта реагировал на ширину области просмотра ( 1vw составляет 1/100 ширины области просмотра).Добавление высокого уровня vw сделает его довольно отзывчивым — огромный текст на огромных экранах, крошечный текст на крошечных экранах.

Итак, если вам нужен очень мелкий текст на маленьких экранах, вы можете выбрать 0,85em в качестве нижнего значения. И если вы хотите, чтобы он стал действительно большим с большими экранами, вы можете добавить 2vw вместо 1 .

Наследовать дерьмо

Если вы установите это на html , вам почти не придется изменять его где-либо еще.Стили браузера по умолчанию для всех заголовков, от h2 до h6 , все довольно хороши. Вот некоторые значения по умолчанию:

  h2 {font-size: 2em}
h3 {font-size: 1.5em}
  

Честно говоря, это все, что я знаю. Это все, что мне действительно нужно знать.

2em означает, что он будет в два раза больше, чем базовый размер шрифта, который является нашим размером адаптивного шрифта, который мы установили на html , что идеально. 1.5em означает, что будет 1.В 5 раз больше, чем базовый размер шрифта. Также идеально. Нет причин отменять их.

Там, где становится глупо, есть такие вещи, как button и input . По какой-то причине они не наследуют размер шрифта своего родителя по умолчанию. Вместо этого они по умолчанию имеют значение 12px или какое-то другое необъяснимое и неотзывчивое значение.

Итак, переопределим.

  кнопка {font-size: inherit}
ввод {размер шрифта: наследование}
  

Пока вы там, вы также можете сделать так, чтобы они унаследовали font-family , поскольку они также не делают этого по умолчанию.

2. Используйте

em для всего! Сорта? Вообще-то, нет.

em s отличные. Они примерно равны букве «м» в текущем шрифте! Когда вы устанавливаете размер шрифта элемента , он соответственно изменяет размер всех используемых измерений em .

Эти размеры также применимы к дочерним элементам элемента. Вот почему вы хотите умеренно переопределить базовый размер шрифта . Если вы обнаружите, что делаете это, значит, вы делаете это неправильно:

 .обернуть {font-size: 1.5em}
.wrap .title {/ * здесь никаких переопределений, мы остаемся с 1.5em * /}
.wrap .details {размер шрифта: 0.66em}
.wrap .author {размер шрифта: 0,55em}
  

Если вы обнаружите, что устанавливаете агрессивно маленькие значения em , чтобы переопределить излишне большое значение em родителя, возможно, избавьтесь от родительского значения em . Для приведенного выше вы, вероятно, захотите это:

  .wrap {/ * нутин * /}
.wrap .title {размер шрифта: 1.5em}
.сворачивать .подробности {/ * .66 из 1.5 равно 1, поэтому изменять размер здесь не требуется * /}
.wrap .author {размер шрифта: 0.8em}
  

Но теперь обратите внимание, что вы, вероятно, могли бы использовать

для этого .title , и вы, вероятно, могли бы использовать для .author , и тогда вам не нужны специальные размеры вообще. Ура!

Итак, общее правило: используйте em для относительного переопределения других размеров шрифта, но только при необходимости.

пикселей значения по-прежнему хороши для прочего

Я нашел по крайней мере одну область, в которой я не хочу, чтобы размер чего-либо зависел от размера текста (или, в более широком смысле, от ширины экрана).Может быть, есть и другие места, где пикселей тоже имеют смысл. Тот, о котором я подумал: border-radius .

Я либо хочу

• Без радиуса границы. Остроконечные углы.

• Вещи в форме таблеток. Лучшим подходом здесь, кажется, является установка невероятно большого радиуса границы. border-radius: 1000vh , например. (Ссылка)

• Слегка смягченные углы.Для них я не хочу, чтобы смягчение зависело от ширины экрана. Я хочу, чтобы смягчение было одинаковым, независимо от размера экрана. Так что border-radius: 4px отлично.

Используйте

rem для пробелов. Наверное.

Я только начал в этом убеждаться. Пример для иллюстрации аргумента:

  нижний колонтитул {font-size: 0.8em; заполнение: 1em; }
  

Проблема в том, что мое объявление font-size сделает мои отступы равными 0.8x размер главной страницы em . И если я хочу, чтобы в нижнем колонтитуле было такое же ограничивающее пространство, как и на остальной странице, это будет выглядеть неправильно. Вместо этого я могу использовать это:

  нижний колонтитул {font-size: 0.8em; набивка: 1 бэр; }
  

Теперь это работает только потому, что мы установили основной размер шрифта для всей страницы в элементе html ! Если бы мы установили это:

  body {font-size: calc (1em + 1vw)}
  

вместо этого:

  html {font-size: calc (1em + 1vw)}
  

все остальное в этом посте будет работать, но rem единиц будут рассчитаны неправильно!

Итак, всегда ли имеет смысл указывать margin и padding в rem ? Может!

Я буду пробовать это в каждом конкретном случае.Чтобы выбрать между em и rem , подумайте об этом: хотите ли вы, чтобы пробелы вокруг вашего элемента соответствовали странице или самому элементу ? Для нижних колонтитулов и других контейнеров вам, вероятно, понадобится rem . Для тегов p и h3 вам, вероятно, понадобится em . (Но вам не нужно сильно переопределять настройки браузера по умолчанию для тегов p и h3 , поэтому пробелы em тоже могут не появиться.)

Заключительные мысли

Мышление относительными размерами требует некоторого привыкания, но с его помощью можно создавать простые страницы, которые будут великолепны на любом экране, с минимальным количеством CSS, которое нужно поддерживать или испортить.

Обязательно ознакомьтесь со статьей Хейдона «Как писать меньше чертового кода», чтобы получить другие полезные советы.

10 фрагментов кода CSS, демонстрирующих приемы адаптивного текста

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

Хотя медиазапросы CSS могут помочь нам адаптировать текст к потребностям мобильных устройств, есть и другие интересные способы решения этой проблемы разработчиками. Давайте рассмотрим некоторые из наиболее интересных приемов использования адаптивного текста.

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многого другого!

Отзывчивый LESS Mixin

Если вы используете препроцессор LESS CSS, этот миксин автоматически сгенерирует код, который будет уменьшать размер текста в зависимости от разрешения экрана.

За рулем этого VW

Я довольно давно использую CSS, но никогда не знал о единицах измерения размеров элементов в соответствии с их окном просмотра. В этом примере единица vw используется для автоматического изменения размера текста в соответствии с шириной области просмотра. И он на самом деле поддерживается (по крайней мере частично), начиная с IE 11. Цвет меня удивил!

Однострочный текст с улучшенным Vue

Бывают случаи, когда, поскольку вы дизайнер, вам действительно нужно, чтобы текст оставался в одной строке — независимо от размера экрана.Вы найдете несколько вариантов этого типа функциональности, в том числе этот пример, в котором используется Vue.js.

Отзывчивый с чутьем

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

Оставаться в рамках

Возможность поддерживать постоянное расстояние по вертикали на нескольких устройствах — серьезная вещь для UX.В приведенном ниже примере для этого используется примесь SASS с фоном для заметок, подтверждающим эту точку зрения.

Управление вашей собственностью

Пользовательские свойства CSS (также известные как «переменные») — это последняя обязательная функция, которая входит в наш инструментарий разработки. Они работают аналогично переменным в PHP или JavaScript, так как их можно вызывать в любое время и избавлять вас от множества повторений. Вот пример, в котором используются переменные вместе с функцией CSS calc для автоматического изменения размера текста.

Слайдер с адаптивным текстом

Текстовый слайдер так хорош, потому что это невероятно легкий способ привлечь внимание к контенту. В этом адаптивном примере используется чистый CSS вместе с Bootstrap для создания чего-то привлекательного и функционального.

Установка в

Ранее мы рассматривали пример, в котором текст сохранялся в одной строке на разных размерах экрана, но этот отличается тем, что при необходимости перемещает элементы на новую строку. Тем не менее, он по-прежнему гарантирует, что размер текста будет неизменным.Так что это лучшее из обоих миров.

Гладкий и дерзкий

Мы уже рассмотрели миксин LESS, так что мы должны отдать должное и Sass. Это обеспечивает очень плавный переход размера текста при изменении области просмотра.

Количество символов

Что делать, если вы хотите, чтобы ваш текст реагировал на количество символов в строке? Вот пример, в котором для этого используются запросы элементов CSS. Это хорошее введение в мощь многообещающей функции CSS.

Лучшее управление текстом

Как мы выяснили, есть несколько различных подходов, которые можно использовать для внедрения адаптивного текста в свой дизайн. Что приятно, так это то, что так много методов по сути являются автоматическими, а это означает, что вам не нужно беспокоиться о выполнении собственных расчетов для небольших экранов. Это экономит время и просто работает.

Новые спецификации CSS, такие как запросы элементов и настраиваемые свойства, дают нам еще более точный контроль над поведением нашего текста и элементов дизайна.Наш текст становится благодетелем этих достижений и сделает мобильный Интернет более читабельным.

размеров шрифта в адаптивном дизайне: px против pt против em против процента?

Как фронтенд-разработчик, я лично люблю работать с CSS. В последнее время я много работал с адаптивным дизайном, и, как я уже отмечал в предыдущем посте о разработке для мобильных устройств, нужно помнить о форматах телефонных номеров. Еще одна вещь, о которой следует помнить при разработке для мобильных устройств, — это размер шрифта CSS.

пикселей (пикселей) как размер шрифта CSS

Пиксели имеют фиксированный размер. Один пиксель обычно равен одной точке на экране. Поскольку пиксели имеют фиксированный размер, они не меняются. Это может быть как хорошо, так и плохо. Он позволяет веб-разработчикам создавать наиболее точные или «идеальные по пикселям» изображения веб-дизайнов. Однако, поскольку они имеют фиксированный размер, они не увеличиваются и не уменьшаются. Это означает, что шрифты будут отображаться меньше на экране с более высоким разрешением, чем на экране с более низким разрешением.

пунктов (pt) как размер шрифта CSS

Очки — это единица измерения, используемая в печати. Баллы основаны на дюйме на линейке, а один дюйм равен 72 точкам. Этот модуль также сильно различается между разными браузерами и экранами при использовании в CSS. Очки очень хороши для настройки CSS для печати, чтобы решить эту проблему с браузером, но в остальном я бы не рекомендовал использовать очки для разработки веб-сайтов.

Em как размер шрифта CSS

Ems не имеют фиксированных размеров.Они масштабируемы, и по этой причине ems хорошо подходят для разработки мобильных веб-сайтов. Ems относятся к размеру шрифта, установленному в CSS. Если у вас нет одного набора в CSS, то 1 em обычно будет равняться 16px, что обычно является размером шрифта по умолчанию в браузерах. Одна плохая черта em заключается в том, что они каскадируются, что делает дизайн с идеальным пикселем немного более сложным. Например, предположим, что размер шрифта основного текста установлен на 16 пикселей, а размер шрифта родительского div — 1,2 em. Если у вас есть абзац в этом div с размером шрифта : 1.2em , тогда у вас будет шрифт в этом теге p размером 1,2 em из 1,2 em шрифта 16 пикселей или примерно 23 пикселя в теге p вместо ~ 19 пикселей, как вы ожидали.

Процент (%) как размер шрифта CSS

Проценты также масштабируются как ems. Однако 100% равно текущему размеру шрифта. Подумайте об этом так: 1.5em в 1,5 раз больше , а 150% — это 150 процентов от размера шрифта. Проценты также хороши для мобильной разработки из-за их масштабируемости. Тем не менее, они действительно каскадируются, как ems.

За исключением очков, все вышеперечисленные модули являются хорошим выбором для интерфейсной веб-разработки. Ems и проц особенно хороши для мобильной веб-разработки.

Автор: Blueprint

Типографика · Bootstrap

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

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

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

• Используйте собственный стек шрифтов, который выбирает лучшее семейство шрифтов для каждой ОС и устройства.
• Для более инклюзивной и доступной шкалы типов мы предполагаем, что корневой каталог браузера по умолчанию font-size (обычно 16 пикселей), чтобы посетители могли настроить свои настройки браузера по умолчанию по мере необходимости.
• Используйте атрибуты $ font-family-base , $ font-size-base и $ line-height-base в качестве нашей типографской базы, применяемой к .
• Установите глобальный цвет ссылки через $ link-color и примените подчеркивание ссылок только на : hover .
• Используйте $ body-bg , чтобы установить background-color для (по умолчанию #fff ).

Эти стили можно найти в _reboot.scss , а глобальные переменные определены в _variables.scss . Обязательно установите $ font-size-base в rem .

Заголовки

Доступны все заголовки HTML, от

до

.

  
 h2. Заголовок начальной загрузки 
 h3. Заголовок начальной загрузки 
 h4. Заголовок начальной загрузки 
 h5. Заголовок начальной загрузки 
 h5.Заголовок начальной загрузки 
 h6. Заголовок начальной загрузки 
  

.h2 – .h6 классы также доступны, когда вы хотите сопоставить стиль шрифта заголовка, но не можете использовать связанный элемент HTML.

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

  
 h2.Заголовок начальной загрузки 
 h3. Заголовок начальной загрузки 
 h4. Заголовок начальной загрузки 
 h5. Заголовок начальной загрузки 
 h5. Заголовок начальной загрузки 
 h6. Заголовок начальной загрузки 
  

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

Используйте включенные служебные классы, чтобы воссоздать небольшой текст вторичного заголовка из Bootstrap 3.

Необычный заголовок дисплея

С выцветшим второстепенным текстом

  

  Необычный заголовок дисплея
  
 С выцветшим второстепенным текстом 
  

Показать заголовки

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

  
 Дисплей 1 
 Дисплей 2 
 Дисплей 3 
 Дисплей 4 
  

Ведущий

Выделите абзац, добавив .Свинец .

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

  

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

Встроенные текстовые элементы

Стили для стандартных встроенных элементов HTML5.

Вы можете использовать тег mark, чтобы выделить текста.

Эта строка текста должна рассматриваться как удаленный текст.

Эта строка текста считается неточной.

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

Эта строка текста будет отображаться как подчеркнутая

Эта строка текста предназначена для работы с мелким шрифтом.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

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

.mark и .small классы также доступны для применения тех же стилей, что и и , избегая при этом любых нежелательных семантических последствий, которые могут принести теги.

Хотя это не показано выше, вы можете свободно использовать и в HTML5. предназначен для выделения слов или фраз без придания дополнительной важности, в то время как в основном используется для речи, технических терминов и т. Д.

Текстовые утилиты

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

Сокращения

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

Добавьте .initialism до аббревиатуры для немного меньшего размера шрифта.

  
  attr  
  HTML  
  

Цитаты

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

вокруг любого HTML в качестве цитаты.

Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число означает анте.

  <цитата>
  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число - ставка анте. 

  <цитата>
  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число - ставка анте. 
  
  

  <цитата>
  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число - ставка анте. 
  
  

  <цитата>
  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число - ставка анте. 
  
  

  

  
 Lorem ipsum dolor sit amet 
  
 Consectetur adipiscing elit 
  
 Целочисленное слово molestie lorem и масса 
  
 Facilisis в аликвоте pretium nisl 
  
 Нулла волутпат аликвам велит
    

      
 Phasellus iaculis neque 
      
 Ульты Purus sodales 
      
 Vestibulum laoreet porttitor sem 
      
 Ac tristique libero volutpat в 
    
  
  
 Faucibus porta lacus fringilla vel 
  
 Энеан сидит, амет эрат нунч 
  
 Эгет-порттитор Лорем 
  

  

  
 Lorem ipsum 
  
 Phasellus iaculis 
  
 Нулла волутпат 
  

  

  
 Списки описаний 
  
 Список описаний идеально подходит для определения терминов. 

  
 Euismod 
  

    
 Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. 
    
 Готово, чтобы пройти элит без порта беременных в Эгет Метус.
  

  
 Порт Малесуада 
  
 Etiam porta sem malesuada magna mollis euismod. 

  
 Усеченный термин усечен 
  
 Fusce dapibus, tellus ac cursus Commodo, Tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 

  
 Вложенность 
  

    

      
 Список вложенных определений 
      
 Энеанский посуере, мучитель sed cursus feugiat, nunc augue blandit nunc.