Як встановити мінімальний розмір шрифту в CSS

Я хочу встановити мінімальний розмір шрифту для кожного елемента на моїй HTML-сторінці.

Наприклад, якщо є елементи з розміром шрифту менше 12 пікселів, тоді вони зміняться на 12 пікселів.
Але якщо є елементи з розміром шрифту розміром 12 пікселів, вони не зміняться.

Чи можна це зробити за допомогою CSS?

Ні. Хоча ви можете встановити базовий розмір шрифту для bodyвикористання font-sizeвластивості, все, що вказує менший розмір, замінить базове правило для цього елемента. Для того, щоб робити те, що ви хочете зробити, вам потрібно використовувати Javascript.

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

$("*").each( function () {
    var $this = $(this);
    if (parseInt($this.css("fontSize")) < 12) {
        $this.css({ "font-size": "12px" });   
    }
});

Ось скрипка, де ви можете це побачити: http://jsfiddle.net/mifi79/LfdL8/2/

У CSS3 є простий, але блискучий хак для цього:

font-size:calc(12px + 1.5vw);

Це тому, що статична частина calc () визначає мінімум. Незважаючи на те, що динамічна частина може зменшитися приблизно до 0.

Станом на середину грудня 2019 року, функція CSS4 min / max - це саме те, що ви хочете:
(крокуйте обережно, це дуже новий, старіші браузери (він же IE і msEdge) поки що не підтримують його)
(підтримується станом на Chromium 79 і Firefox v75)

https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max

Приклад:

blockquote {
    font-size: max(1em, 12px);
}

Таким чином, розмір шрифту буде 1em (якщо 1em> 12px), але принаймні 12px.

На жаль, ця дивовижна функція CSS3 поки не підтримується жодним браузером, але я сподіваюся, що це скоро зміниться!

Редагувати:

Раніше це було частиною CSS3, але потім було переплановано на CSS4.
Станом на 11 грудня 2019 року підтримка надійшла в Chrome / Chromium 79 (в тому числі на Android та в Android WebView), і як така також в Microsoft Chredge aka Anaheim, включаючи Opera 66 та Safari 11.1 (включаючи iOS)

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

p { font-size: 3vmax; }

використовуйте будь-який вподобаний тег і розмір, який вам більше подобається (замініть 3)

p { font-size: 3vmin; }

використовується для максимального розміру.

Використовуйте медіа-запит. Приклад: Це щось, що я використовую оригінальний розмір 1.0vw, але коли він досягає 1000, лист стає занадто малим, тому я масштабую

@media(max-width:600px){
    body,input,textarea{
         font-size:2.0vw !important;
    }
}

Цей веб-сайт, над яким я працюю, не відповідає> 500 пікселів, але вам може знадобитися більше. Професійна перевага цього рішення полягає в тому, що ви продовжуєте масштабувати розмір шрифту, не маючи супер міні-букв, і ви можете тримати його js безкоштовно.

CSS має функцію clamp (), яка утримує значення між верхньою та нижньою межею. Функція clamp () дозволяє вибрати середнє значення в діапазоні значень між визначеними мінімальними та максимальними значеннями.

Це просто займає три виміри:

1. Мінімальне значення.
2. Елемент списку
3. Бажане значення Максимально дозволене значення.

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

$(window).resize(function(){
    console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));

h1{
    font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100px, 10vw, 150px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <h1 id="element">THIS IS TEXT</h1>
</center>

Рішення CSS:

.h2{
  font-size: 2vw
}
@media (min-width: 700px) {
  .h2{
    /* Minimum font size */
    font-size: 14px
  }
}
@media (max-width: 1200px) {
  .h2{
    /* Maximum font size */
    font-size: 24px
  }
}

Про всяк випадок, якщо комусь потрібен scss mixin:

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

AFAIK це неможливо з простим CSS,
але ви можете зробити досить дорогу операцію jQuery, як:

демонстрація jsBin

$('*').css('fontSize', function(i, fs){
  if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});

_{Замість того, щоб використовувати Глобальний селектор, * я б запропонував вам (якщо можливо) бути більш конкретними з вашими селекторами.}

font-min-sizeІ font-max-sizeвластивості CSS були видалені з CSS Шрифти Модуль Level 4 специфікації (і не була реалізована в браузерах AFAIK). І Робоча група CSS замінила приклади CSS, font-size: clamp(...)які поки що не мають найбільшої підтримки браузера, тому нам доведеться чекати, поки браузери її підтримають. Див. Приклад у https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples .

Судячи з вашого вищезазначеного коментаря, ви в порядку, роблячи це за допомогою jQuery - ось:

// for every element in the body tag
$("*", "body").each(function() {
  // parse out its computed font size, and see if it is less than 12
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    // if so, then manually give it a CSS property of 12px
    $(this).css("font-size", "12px")
});

Більш чистим способом зробити це може бути наявність у вашому CSS класу "min-font", який встановлює розмір шрифту: 12px, і просто додайте клас:

$("*", "body").each(function() {
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    $(this).addClass("min-font")
});

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

font-size: calc(50px + 5vw);