Чуйний розмір шрифту в CSS

Я створив сайт за допомогою сітки Zurb Foundation 3 . Кожна сторінка має великий h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Коли я змінюю розмір веб-переглядача до розміру для мобільних пристроїв, великий шрифт не змінюється, і змушує браузер включати горизонтальну прокрутку для розміщення великого тексту.

Я помітив, що на прикладі сторінки типографіки Zurb Foundation 3 типографії заголовки адаптуються до браузера під час стискання та розширення.

Я пропускаю щось дійсно очевидне? Як я цього досягти?

Під font-sizeчас зміни розміру вікна веб-переглядача не буде відповідати так. Натомість вони відповідають на налаштування масштабу / типу розміру веб-переглядача, наприклад, якщо ви натискаєте Ctrlта +разом на клавіатурі, перебуваючи в браузері.

Медіа-запити

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

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

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Процентна довжина огляду

Ви можете також використовувати вікно перегляду процентних довжини , такі як vw, vh, vminі vmax. В офіційному документі W3C для цього зазначено:

Довжина перегляду в процентному співвідношенні відносно розміру початкового блоку, що містить. При зміні висоти або ширини початкового блоку, який міститься, вони відповідно масштабуються.

Знову ж таки, з того ж документа W3C кожен окремий блок можна визначити, як показано нижче:

vw одиниця - дорівнює 1% ширини початкового блоку, що містить.

vh одиниця - дорівнює 1% висоти початкового блоку, що містить.

vmin одиниця - дорівнює меншій від vw або vh.

vmax одиниця - дорівнює більшому vw або vh.

І вони використовуються точно так само, як і будь-яке інше значення CSS:

.text {
  font-size: 3vw;
}

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

Сумісність відносно хороша, як це можна побачити тут . Однак деякі версії Internet Explorer і Edge не підтримують vmax. Крім того, в iOS 6 і 7 є проблема з vh-блоком, який було виправлено в iOS 8.

Ви можете використовувати значення області перегляду замість ems, pxs або pts:

1vw = 1% від ширини огляду

1vh = 1% висоти огляду

1vmin = 1vw або 1vh, залежно від того, що менше

1vmax = 1vw або 1vh, залежно від того, що більше

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

З CSS-трюків: розмір типографії Viewport

Я розмовляв із способами подолання цієї проблеми, і вважаю, що знайшов рішення:

Якщо ви можете написати свою заявку для Internet Explorer 9 (і пізнішої версії) та всіх інших сучасних браузерів, які підтримують CSS calc (), блоки нагадування та vmin-одиниці. Ви можете використовувати це для досягнення масштабованого тексту без медіа-запитів:

body {
  font-size: calc(0.75em + 1vmin);
}

Ось це в дії: http://codepen.io/csuwldcat/pen/qOqVNO

Використовуйте mediaспецифікатори CSS (саме те, що вони [zurb]) використовують для чуйного стилю:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Якщо ви не проти використовувати рішення jQuery, ви можете спробувати плагін TextFill

jQuery TextFill змінює розмір тексту для розміщення в контейнері та робить розмір шрифту якомога більшим.

https://github.com/jquery-textfill/jquery-textfill

Існує кілька способів досягти цього.

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

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

Використовуйте розміри у % або em . Просто змініть базовий розмір шрифту, і все зміниться. На відміну від попереднього, ви можете просто змінити шрифт корпусу, а не h1 кожен раз, або дозволити розмір базового шрифту за замовчуванням пристрою, а решта все в em:

1. "Ems" (em) : "em" - це масштабована одиниця. Em дорівнює поточному розміру шрифту, наприклад, якщо розмір шрифту документа становить 12 pt, 1 em дорівнює 12 pt. Ems є масштабованим за своєю природою, тому 2 em дорівнювали б 24 pt, .5 em дорівнювали б 6 pt тощо.
2. Відсоток (%) : Одиниця відсотка приблизно нагадує одиницю "em", за винятком кількох принципових відмінностей. Перш за все, поточний розмір шрифту дорівнює 100% (тобто 12 пт = 100%). Використовуючи одиницю відсотків, ваш текст залишається повністю масштабованим як для мобільних пристроїв, так і для доступності.

Дивіться kyleschaeffer.com /….

CSS 3 підтримує нові параметри, що відносяться до порту перегляду. Але це не працює на Android:

1. 3,2vw = 3,2% ширини вікна перегляду
2. 3,2vh = 3,2% висоти огляду
3. 3.2vmin = Менше 3.2vw або 3.2vh

4. 3.2vmax = Більше 3,2vw або 3,2vh

   body
   {
       font-size: 3.2vw;
   }

Дивіться CSS-трюки ... а також подивіться Чи можна використовувати ...

Є ще один підхід до чутливих розмірів шрифту - використання блоків ремонту.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Пізніше в медіа-запитах ви можете налаштувати всі розміри шрифтів, змінивши розмір базового шрифту:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Щоб зробити цю роботу в Internet Explorer 7 та Internet Explorer 8, вам потрібно буде додати резервну копію з одиницями px:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

Якщо ви розробляєте програму " Менше" , ви можете створити міксин, який буде робити для вас математику.

Підтримка Rem-блоків - http://caniuse.com/#feat=rem

Рішення "vw" має проблему під час переходу на дуже маленькі екрани. Ви можете встановити базовий розмір і піднятися звідти за допомогою calc ():

font-size: calc(16px + 0.4vw);

Частково це реалізовано у фундаменті 5.

У файлі _type.scss вони мають два набори змінних заголовка:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Для середнього рівня вони генерують розміри на основі першого набору змінних:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

А для маленьких екранів за замовчуванням, вони використовують другий набір змінних для створення CSS:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

Ви можете використовувати ці змінні та замінити їх у власному файлі scss, щоб встановити розміри шрифту для відповідних розмірів екрана.

Відповідний розмір шрифту також можна виконати за допомогою цього коду JavaScript під назвою FlowType :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - чуйна веб-типографія в найкращому вигляді: розмір шрифту на основі ширини елементів.

Або цей код JavaScript під назвою FitText :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - робить розміри шрифту гнучкими. Скористайтеся цим плагіном у адаптивному дизайні для зміни розміру заголовків на основі співвідношення.

Якщо ви використовуєте інструмент збирання, то спробуйте Рюкзак.

В іншому випадку ви можете використовувати CSS-змінні (спеціальні властивості), щоб легко контролювати мінімальний та максимальний розміри шрифту, як-от так ( демонстрація ):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Я побачив чудову статтю від CSS-Tricks . Це працює чудово:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Наприклад:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Ми можемо застосувати те саме рівняння до line-heightвластивості, щоб змінити його і з браузером.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Я щойно придумав ідею, за якою потрібно лише один раз визначити розмір шрифту на елемент, але на нього все ще впливають медіа-запити.

По-перше, я встановлюю змінну "--text-scale-unit" на "1vh" або "1vw", залежно від області перегляду за допомогою медіа-запитів.

Тоді я використовую змінну, використовуючи calc () і мій номер множника для розміру шрифту:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

У своєму прикладі я використовував лише орієнтацію вікна перегляду, але принцип повинен бути можливим для будь-яких медіа-запитів.

"FitText" jQuery - це, мабуть, найкраще рішення з чуйним заголовком. Перевірте це на GitHub: https://github.com/davatron5000/FitText.js

Як і у багатьох фреймворках, як тільки ви "вийдете з сітки" та замініть CSS за замовчуванням рамки, все почне ламатись ліворуч та праворуч. Рамки за своєю суттю жорсткі. Якщо ви використовували стиль Z1 за замовчуванням H1 разом з їх класами сітки за замовчуванням, то веб-сторінка повинна відображатися належним чином на мобільному (тобто, чуйному).

Однак, здається, вам потрібні дуже великі 6,2ем заголовки, а це означає, що текст доведеться скорочувати, щоб увімкнути мобільний дисплей у портретному режимі. Ваша найкраща ставка - використовувати чуйний текстовий плагін jQuery, такий як FlowType та FitText . Якщо ви хочете чогось легкої ваги, ви можете перевірити мій плагін Scalable Text jQuery:

http://thdoan.github.io/scalable-text/

Використання зразка:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

У фактичному оригіналі Sass (не scss) ви можете використовувати наведені нижче комбінації для автоматичного встановлення абзацу та всіх заголовків ' font-size.

Мені це подобається, тому що він набагато компактніший. І швидше набирати текст. Крім цього, він забезпечує той же функціонал. У будь-якому випадку, якщо ви все ще хочете дотримуватися нового синтаксису - scss, сміливо конвертуйте мій вміст Sass у scss тут: [ КОНВЕРТУЙТЕ САРСУ ДО SCSS ТУТ]

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

=font-h1p-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 h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

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

Я думаю, ви могли б зробити це автоматично для медіа-запиту, як це робиться для тегів заголовків, але всі ми використовуємо різні медіа-запити, тому це було б не доцільно для всіх. Я використовую мобільний перший дизайн-підхід, тож саме так я б це зробив. Сміливо копіюйте та використовуйте цей код.

КОПІЮЙТЕ ТА ВКЛЮЧУЙТЕ ЦІ МІКСІНИ ДО ВАШОГО ФАЙЛУ:

=font-h1p-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

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

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-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
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

КОНФІГУРУЙТЕ ВСІ МІКСІНИ НА ВАШІ ПОТРІБИ - ГРУЙТЕ З НЕЮ! :) А ТО НАЗВІТЬСЯ НА ТОПУ ВАШОГО СУЧАСНОГО КАСА ЗАСОБИ З:

+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; }

h1, h2, h3, h4, 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; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

Я використовую ці класи CSS, і вони роблять мій текст текучим для будь-якого розміру екрана:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

Є наступні способи, за допомогою яких можна досягти цього:

1. Використовуйте rem для, наприклад, 2.3 rem
2. Використовуйте em для напр. 2.3em
3. Використовуйте% для, наприклад, 2,3%. Крім того, ви можете використовувати: vh, vw, vmax та vmin.

Ці блоки будуть автоматичні, залежно від ширини та висоти екрана.

Ви можете зробити розмір шрифту чуйним, якщо визначити його в vw (ширина вікна перегляду). Однак не всі браузери це підтримують. Рішення полягає у використанні JavaScript для зміни базового розміру шрифту залежно від ширини браузера та встановлення всіх розмірів шрифту у%.

Ось стаття, що описує, як зробити чуйний розмір шрифтів: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Я знайшов це рішення, і воно працює дуже добре для мене:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Один із способів вирішити проблему, щоб текст добре виглядав як на робочому столі, так і на мобільному / планшетному ПК, - це закріплення розміру тексту на фізичних одиницях, таких як фізичні сантиметри або дюйми, які не залежать від показника ІРВ екрана (балів на дюйм).

Виходячи з цієї відповіді , нижче наведено код, який я використовую в кінці документа HTML для відповідного розміру шрифту:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

У наведеному вище коді елементам іншого класу призначаються розміри шрифту у фізичних одиницях до тих пір, поки браузер / ОС налаштовані правильно для ІЦП його екрану.

Шрифт фізичної одиниці завжди не надто великий і не надто малий, якщо відстань до екрана звичайна (відстань читання книг).

Розмір тексту можна встановити за допомогою vwодиниці, що означає "ширину вікна перегляду". Таким чином розмір тексту буде відповідати розміру вікна браузера:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Для особистого проекту я використовував vw та @meida. Це прекрасно працює.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

Скористайтеся цим рівнянням:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

Для нічого більшого або меншого, ніж 1440 і 768, ви можете або надати йому статичне значення, або застосувати той самий підхід.

Недолік рішення vw полягає в тому, що ви не можете встановити коефіцієнт масштабу, скажімо, 5vw при роздільній здатності екрана 1440 може бути 60px розміром шрифту, розміром вашого шрифту ідеї, але коли ви зменшите ширину вікна до 768, це може закінчитися 12px, не мінімальний, який ви хочете.

При такому підході ви можете встановити верхню і нижню межу, і шрифт буде масштабуватись між ними.

Ми можемо використовувати calc () від css

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

Математична формула - обчислення (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen

Я боюся, що немає простого рішення щодо зміни розміру шрифту. Ви можете змінити розмір шрифту за допомогою медіа-запиту, але технічно він не змінить розмір гладко. Наприклад, якщо ви використовуєте:

@media only screen and (max-width: 320px){font-size: 3em;}

ви font-sizeбудете 3em як для 300 пікселів, так і для 200 пікселів. Але вам потрібно нижче font-sizeна 200px ширини, щоб зробити ідеальну чуйність.

Отже, яке реальне рішення? Є лише один спосіб. Ви повинні створити зображення PNG (з прозорим фоном), що містить текст. Після цього ви можете легко зробити своє зображення чутливим (наприклад: ширина: 35%; висота: 28 пікселів). Таким чином ваш текст буде повністю реагувати на всіх пристроях.

Після багатьох висновків я закінчився цим поєднанням:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}

спробуйте це

html { font-size: min(max(16px, 4vw), 22px); }

отримав це з https://css-tricks.com/simplified-fluid-typography/

Ось щось, що працювало для мене. Я тестував його лише на iPhone.

Чи маєте ви h1, h2або pтеги помістити це навколо тексту:

<h1><font size="5">The Text you want to make responsive</font></h1>

Це робить 22-кратний текст на робочому столі, і він все ще читається на iPhone.

<font size="5"></font>