Есть ли такая вещь, как размер min-font-size и max-font-size?

Я пытаюсь сделать шрифт в div, отвечающем окну браузера. До сих пор он работал отлично, но родительский div имеет max-width of 525px. Изменение размера браузера не приведет к изменению размера шрифта. Это заставило меня задуматься, существует ли такая вещь, как min-font-size или max-font-size, и если такая вещь не существует, если есть способ добиться чего-то подобного.

Я думал, что использование процентов в font-size будет работать, но бит текста не будет масштабироваться в соответствии с родительским div. Вот что у меня есть:

CSS для родительского div:

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

CSS для части текста, о котором идет речь:

.subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

Я искал довольно долгое время в Интернете, но безрезультатно.

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

Это хорошо работает с CSS.

Я рассмотрел те же проблемы и исправил это следующим образом.

Используйте фиксированный размер "px" для максимального размера с определенной шириной и выше. Затем для разных меньших ширины используйте относительный "vw" в процентах от экрана.

Ниже приведен результат: он настраивается на экранах ниже 960 пикселей, но сохраняет фиксированный размер выше. Просто напоминание, не забудьте добавить в html документ в заголовке:

<meta name="viewport" content="width=device-width">

Пример в CSS:

@media all and (min-width: 960px) {
h1{
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
h1{
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
h1{
    font-size: 6vw;
  }
}

Надеюсь, это поможет!

Ответ 3

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

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

Это устанавливает минимальный размер шрифта в 7px и усиливает его на .5vw в зависимости от ширины видового экрана.

Удачи!

Ответ 4

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

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

Каковы бы ни были решения?

Два инструмента позволят нам сделать это: медиа-запросы ans свойство vw

1) Существует "дурацкое" решение, состоящее в создании медиа-запроса для каждого шага, который мы используем в нашем css, изменяя шрифт с фиксированной суммы на другую фиксированную сумму. Он работает, но это очень скучно, и у вас нет гладкого линейного аспекта.

2) Как объяснил почти Pitt, для минимумов есть решение для блеска:

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

Минимум здесь будет 7px в дополнение к 0,5% от ширины вида. Это уже действительно здорово и работает в большинстве случаев. Он не требует каких-либо мультимедийных запросов, вам просто нужно потратить некоторое время на поиск правильных параметров.

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

3) Предположим, у вас очень скучный клиент (например, я), который абсолютно хочет, чтобы название было одной строкой и не более. Если вы использовали решение AlmostPitt, у вас проблемы, потому что ваш шрифт будет расти, и если у вас есть контейнер с фиксированной шириной (например, при загрузке в 1140px или в больших окнах). Здесь я предлагаю вам также использовать медиа-запрос. На самом деле вы можете просто найти максимум максимального размера пикселей, который вы можете обрабатывать в своем контейнере, прежде чем этот аспект станет нежелательным (pxMax). Это будет ваш максимум. Тогда вам просто нужно найти точную ширину экрана, которую вы должны остановить (wMax). (Я позволю вам самостоятельно инвертировать линейную функцию).

После этого просто сделайте

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

Затем он идеально линейный, и ваш шрифт перестает расти! Обратите внимание, что вам не нужно помещать свое предыдущее свойство css (calc...) в медиа-запрос в wMax, потому что медиа-запрос считается более важным и он перезапишет предыдущее свойство.

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

Надеюсь, это поможет другим, и не забудьте поблагодарить AlmostPitt за его решение.

Ответ 5

Рюкзак блестящий, но вам необязательно прибегать к созданию таких инструментов, как Gulp или Grunt и т.д.

Я сделал демонстрацию с помощью CSS Custom Properties (CSS Variables), чтобы легко контролировать размеры минимального и максимального размера.

Так же:

* {
  /* 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);
}

Ответ 6

Я получил некоторые гладкие результаты с ними. Он плавно протекает между 3 диапазонами ширины, как непрерывная кусочная функция.

@media screen and (min-width: 581px) and (max-width: 1760px){
    #expandingHeader {
        line-height:5.2vw;
        font-size: 5.99vw;
    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (min-width: 1761px){
    #expandingHeader {
        line-height:.9em;
        font-size: 7.03em;

    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (max-width: 580px){
    #expandingHeader {
        line-height:.9em;
        font-size: 2.3em;
    }
    #tagLine {
        letter-spacing: .1em;
        font-size: .65em;
        line-height: .10em;
    }
}

Ответ 7

Вы можете использовать Sass для управления минимальными и максимальными размерами шрифтов. Вот блестящее решение Эдуардо Букаса.

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html

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

.limit-min {
  @include responsive-font(3vw, 20px);
}

.limit-min-max {
  @include responsive-font(3vw, 20px, 50px);
}

Ответ 8

Это действительно предлагается в CSS4

Рабочий черновик в W3C

Цитата:

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

Это будет работать следующим образом:

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

Это означало бы, что размер шрифта будет составлять 5% от ширины окна просмотра, но не менее 10 пикселей и никогда не будет больше 18 пикселей.

К сожалению, эта функция еще не реализована (даже на caniuse.com).