Как установить минимальный размер шрифта в CSS

Ответ 1

Нет. Хотя вы можете установить базовый размер шрифта на 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/

Ответ 2

В CSS3 есть простой, но блестящий взлом для этого:

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

Это связано с тем, что статическая часть calc() определяет минимум. Хотя динамическая часть может сжиматься до нуля.

Ответ 3

Это, вероятно, не совсем то, что вы хотите, но в CSS 3 вы можете использовать max-function.

Пример:

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

Таким образом размер шрифта будет 1em (если 1em > 12px), но не менее 12px.

К сожалению, эта замечательная функция CSS3 не поддерживается ни одним браузером, но я надеюсь, что это скоро изменится!

Ответ 4

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

p { font-size: 3vmax; }

используйте любой тег, который вы предпочитаете, и размер, который вы предпочитаете (замените 3)

p { font-size: 3vmin; }

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

Ответ 5

Использовать медиа-запрос. Пример: Это то, что я использую оригинальный размер 1.0vw, но когда он достигает 1000, письмо становится слишком маленьким, поэтому я масштабирую его

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

Этот сайт, на котором я работаю, не реагирует нa > 500px, но вам может понадобиться больше. Про, преимущество для этого решения заключается в том, что вы сохраняете масштаб размера шрифта, не имея супер мини-букв, и вы можете сохранить его свободным.

Ответ 6

Решение 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;
}

Ответ 7

AFAIK это невозможно с помощью простого CSS,
но вы можете сделать довольно дорогую операцию jQuery, например:

jsBin demo

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

_{Вместо использования глобального селектора * я бы предложил вам (если возможно) быть более конкретным с вашими селекторами.}

Ответ 8

Судя по указанному выше комментарию, вы в порядке делаете это с помощью 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")
});

Более простым способом сделать это может быть класс min-font в вашем CSS, который устанавливает размер шрифта: 12px, и просто добавьте класс вместо:

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