Есть ли такие понятия, как минимальный размер шрифта и максимальный размер шрифта?

Question 1

Я пытаюсь сделать шрифт в div реагирующим на окно браузера. До сих пор он работал отлично, но родительский DIV имеет max-widthв 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;
}

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

Question 2

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

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

Question 3

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

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

Это устанавливает минимальный размер шрифта в 7 пикселей и увеличивает его на 0,5vw в зависимости от ширины области просмотра.

Удачи!

Question 4

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

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

Question 5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Question 6

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

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

Цитата:

Эти два свойства позволяют веб-сайту или пользователю требовать, чтобы размер шрифта элемента был ограничен диапазоном, заданным этими двумя свойствами. Если вычисленное значение font-size находится за пределами границ, созданных 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).

Question 7

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

Question 8

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

Question 9

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

Question 10

Обратите внимание, что устанавливать размер шрифта с помощью px не рекомендуется из-за проблем с доступностью :

«определение размеров шрифта в пикселях недоступно, потому что пользователь не может изменить размер шрифта в некоторых браузерах. Например, пользователи с ограниченным зрением могут захотеть установить размер шрифта намного больше, чем размер, выбранный веб-дизайнером». (см. https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

Более доступный подход - установить font-size: 100%в html, который учитывает пользовательские настройки размера по умолчанию , а ЗАТЕМ использовать проценты или относительные единицы при изменении размера ( emили rem), например, с помощью запроса @media.

(см. https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ )

Question 11

Да, некоторые браузеры в SVG накладывают ограничения. Инструмент разработчика ограничивает его до 8000 пикселей; Следующая динамически созданная диаграмма не работает, например, в 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>

Answer 1

Я пытаюсь сделать шрифт в div реагирующим на окно браузера. До сих пор он работал отлично, но родительский DIV имеет max-widthв 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;
}

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

Answer 2

Впервые я увидел, что vw используется в шрифтах lol

Brandito

Answer 3

61

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

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

Юкка К. Корпела
источник

Если я прав, информация в вашей ссылке говорит о том, что медиа-запросы будут выполнять указанный CSS при выполнении условия, в этом случае для вашей ссылки условием будет max-width:600px;. Правильно ли я понял или неправильно понял информацию по ссылке?

Тоби ван Кемпен

4

@Toby van Kempen: Вы правы, однако max-width в данном случае относится к размеру области просмотра экрана, а не к размеру произвольного элемента. Если вам нужно изменить CSS в зависимости от стиля некоторого произвольного элемента, вы не сможете использовать для этого медиа-запросы. Вам понадобится сценарий.

BoltClock

@BoltClock Итак, @mediaимеется в виду окно браузера? Как он узнает, что я хочу, чтобы размер моего шрифта был, скажем, 20 пикселей, если родительский блок div или окно браузера имеют определенный размер в пикселях?

Тоби ван Кемпен

@Toby van Kempen: Он всегда будет относиться к окну браузера - отсюда «медиа» в «медиа-запросах».

BoltClock

1

Ах я вижу. Итак, если я прав, если я напишу @media (width:600px), он запустит приведенный ниже скрипт, @mediaкогда ширина браузера будет равна 600 пикселей?

Тоби ван Кемпен

Answer 4

Если я прав, информация в вашей ссылке говорит о том, что медиа-запросы будут выполнять указанный CSS при выполнении условия, в этом случае для вашей ссылки условием будет max-width:600px;. Правильно ли я понял или неправильно понял информацию по ссылке?

Тоби ван Кемпен

Answer 5

4

@Toby van Kempen: Вы правы, однако max-width в данном случае относится к размеру области просмотра экрана, а не к размеру произвольного элемента. Если вам нужно изменить CSS в зависимости от стиля некоторого произвольного элемента, вы не сможете использовать для этого медиа-запросы. Вам понадобится сценарий.

BoltClock

Answer 6

@BoltClock Итак, @mediaимеется в виду окно браузера? Как он узнает, что я хочу, чтобы размер моего шрифта был, скажем, 20 пикселей, если родительский блок div или окно браузера имеют определенный размер в пикселях?

Тоби ван Кемпен

Answer 7

@Toby van Kempen: Он всегда будет относиться к окну браузера - отсюда «медиа» в «медиа-запросах».

BoltClock

Answer 8

1

Ах я вижу. Итак, если я прав, если я напишу @media (width:600px), он запустит приведенный ниже скрипт, @mediaкогда ширина браузера будет равна 600 пикселей?

Тоби ван Кемпен

Answer 9

113

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

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

Это устанавливает минимальный размер шрифта в 7 пикселей и увеличивает его на 0,5vw в зависимости от ширины области просмотра.

Удачи!

Почти Питт
источник

2

О, МОЙ БОГ!!! последние 3 дня я играл с числами и разными способами. Позвольте мне сказать вам, что ничто не работало так, как хотелось бы. Затем я наткнулся на ваш ответ, вставил ваш ответ в свой css и "HORAYYYY", он работает ... Замечательный ответ, Питт. Спасибо.

ThN

Отличный трюк с минимальным размером шрифта. Интересно, можно ли сделать что-то подобное по максимуму ... Может быть, это как-то связано с идеей, что любой негатив будет рассматриваться как 0. Какие-то вложенные calcs что ли?

Лазар

2

Инвертируйте его, поэтому font-size: calc (12px - .5vw)

roberrrt-s

Это не работает должным образом с LESS. Я предполагаю, что calc()оператор обрабатывается, когда LESS компилируется и преобразуется в простое pxзначение. Изменение размера не пересчитывается. Идеи или мысли?

Адвокат дьявола,

Опубликовано здесь: stackoverflow.com/questions/49500754/…

Адвокат дьявола,

Answer 10

2

О, МОЙ БОГ!!! последние 3 дня я играл с числами и разными способами. Позвольте мне сказать вам, что ничто не работало так, как хотелось бы. Затем я наткнулся на ваш ответ, вставил ваш ответ в свой css и "HORAYYYY", он работает ... Замечательный ответ, Питт. Спасибо.

ThN

Answer 11

Отличный трюк с минимальным размером шрифта. Интересно, можно ли сделать что-то подобное по максимуму ... Может быть, это как-то связано с идеей, что любой негатив будет рассматриваться как 0. Какие-то вложенные calcs что ли?

Лазар

Answer 12

2

Инвертируйте его, поэтому font-size: calc (12px - .5vw)

roberrrt-s

Answer 13

Это не работает должным образом с LESS. Я предполагаю, что calc()оператор обрабатывается, когда LESS компилируется и преобразуется в простое pxзначение. Изменение размера не пересчитывается. Идеи или мысли?

Адвокат дьявола,

Answer 14

Опубликовано здесь: stackoverflow.com/questions/49500754/…

Адвокат дьявола,

Answer 15

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

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

Answer 16

2

Это должен быть ЛУЧШИЙ ответ !!

KaKa 03

Answer 17

почему у вас есть «все» в каждой строке?

tibi

Answer 18

@tibi all относится к типу носителя (или: WHERE to apply). варианты: все, экран, печать и речь. все по умолчанию, поэтому здесь он вроде как устарел. см. mdn docs.

honk31

Answer 19

Да! Это прекрасно работает! Мне нужен был максимальный размер шрифта, и он отлично работает, спасибо.

todbott

Answer 20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Answer 21

Можете ли вы предложить формулу для поиска правильных значений для calc (), которые возвращают то же, что и max(*a*px,, *b*vw)? Потому что в моем случае я не могу терпеть наивное добавление, потому что результат слишком велик, но похоже, что вы предлагаете мне каким-то образом уменьшить a и b сверх наивных сумм - у меня проблемы с математикой, и я нужно общее решение, а не просто конкретный случай.

Michael

Answer 22

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

Alburkerk

Answer 23

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

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

Цитата:

Эти два свойства позволяют веб-сайту или пользователю требовать, чтобы размер шрифта элемента был ограничен диапазоном, заданным этими двумя свойствами. Если вычисленное значение font-size находится за пределами границ, созданных 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).

Answer 24

4

Отлично. Так что мне просто нужно прекратить работу над этим проектом на несколько лет, пока он не будет реализован ....: '- (

Майкл

Answer 25

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

Answer 26

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

Answer 27

Чем это отличается от другого ответа?

user193661

Answer 28

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

Answer 29

Обратите внимание, что устанавливать размер шрифта с помощью px не рекомендуется из-за проблем с доступностью :

«определение размеров шрифта в пикселях недоступно, потому что пользователь не может изменить размер шрифта в некоторых браузерах. Например, пользователи с ограниченным зрением могут захотеть установить размер шрифта намного больше, чем размер, выбранный веб-дизайнером». (см. https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

Более доступный подход - установить font-size: 100%в html, который учитывает пользовательские настройки размера по умолчанию , а ЗАТЕМ использовать проценты или относительные единицы при изменении размера ( emили rem), например, с помощью запроса @media.

(см. https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ )

Answer 30

Да, некоторые браузеры в SVG накладывают ограничения. Инструмент разработчика ограничивает его до 8000 пикселей; Следующая динамически созданная диаграмма не работает, например, в 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>

Есть ли такие понятия, как минимальный размер шрифта и максимальный размер шрифта?

Ответы:

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