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

Я пытаюсь сделать шрифт в 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;
}

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

81
css font-size fonts html

9 ответов

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

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

53

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

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

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

удачи!

67

Он хорошо работает с 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;
  }
}

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

61

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

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

независимо от того, каковы решения ?

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

1) существует" дурацкое " решение, состоящее в создании медиа-запроса для каждого шага, который мы eant в нашем 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...) в запрос СМИ под описывает, потому что запрос СМИ считаются более imnportant и он будет перезаписывать предыдущее свойство.

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

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

6

рюкзак блестящий, но вам не обязательно прибегать к созданию инструментов, таких как 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

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

это фактически предлагается в CSS4

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

цитата:

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

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

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

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

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

2

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

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

да, кажется, некоторые ограничения некоторым браузером в 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>
0