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

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

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

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

удачи!

Он хорошо работает с CSS.

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

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

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

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

Я надеюсь, что это поможет!

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

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

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

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

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

2) Как объяснил AlmostPitt, существует Бриллант решение для минимумов :

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

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

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

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

после этого просто сделать

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

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

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

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

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

Я демо использование пользовательских свойств CSS (переменные 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);
}

Я получил некоторые гладкие результаты с этими. Он плавно перетекает между 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;
    }
}

это на самом деле предлагается в CSS4

рабочий проект на W3C

цитата:

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

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

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

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

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

вы можете использовать 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);
}

да, кажется, некоторые ограничения некоторыми браузерами в SVG. Developertool ограничить его до 8000px; Следующая динамически сгенерированная диаграмма не работает, например, в Chrome.

попробуйте http://www.xn--dddelei-n2a.de/2018/test-von-svt/

<svg id="diagrammChart"
     width="100%"
     height="100%"
     viewBox="-400000 0 1000000 550000"
     font-size="27559"
     overflow="hidden"
     preserveAspectRatio="xMidYMid meet"
>
    <g class="hover-check">
        <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            Heinz: -16800
        </text>
        <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
        </rect>
        <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
              opacity="0">
        </rect>

    </g>
</svg>