Чи існує таке поняття, як мінімальний розмір шрифту та максимальний розмір шрифту?

Я намагаюся зробити шрифт у розділі, що відповідає вікні браузера. До сих пір він працював відмінно, але батьківський 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;
}

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

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

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

Ви можете зробити це за допомогою формули та включаючи ширину області перегляду.

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

Це встановлює мінімальний розмір шрифту 7px і посилює його на .5vw залежно від ширини області перегляду.

Удачі!

Це добре працює з CSS.

Я пройшов ті ж самі питання і виправив це, як і далі.

Використовуйте фіксований розмір "px" для максимального розміру на певній ширині та вище. Тоді для різної меншої ширини використовуйте відносний "vw" як відсоток екрану.

Результат, наведений нижче, полягає в тому, що він налаштовується на екрани нижче 960px, але зберігає фіксований розмір вище. Тільки нагадування, не забудьте додати в 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;
  }
}

Сподіваюся, це допоможе!

Я приїжджаю сюди трохи пізно, я не маю на це великої заслуги, я просто роблю поєднання відповідей нижче, тому що мене змусили це зробити для проекту.

Отже, щоб відповісти на питання: Немає такого поняття, як ця властивість CSS . Не знаю чому, але я думаю, що це тому, що вони бояться нецільового використання цього майна, але я не знаходжу жодного випадку використання, де це може бути серйозною проблемою.

Що б там не було, які рішення?

Два інструменти дозволять нам це зробити: медіа-запити у власність ans vw

1) Існує "дурне" рішення, яке полягає у створенні медіа-запиту для кожного кроку, який ми хотіли зробити у нашому css, зміни шрифту з фіксованої суми на іншу фіксовану суму. Це працює, але це дуже нудно, і у вас немає плавного лінійного аспекту.

2) Як пояснив майже Піт, існує мінімальне рішення для мінімумів:

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

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

Як ви помітили, що це лінійна функція, базові математичні знання вас дізнаються, що дві точки вже знаходять вам параметри. Тоді просто зафіксуйте розмір шрифту в пікселях, який ви хочете, для дуже великих екранів та для мобільної версії, а потім підрахуйте, чи хочете ви зробити науковий метод. Думав, це абсолютно не потрібно, і ви можете просто спробувати, спробувавши.

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

Після цього просто робіть

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

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

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

Сподіваюся, це може допомогти іншим, і не забудьте подякувати майже Пітту за його рішення.

Це фактично пропонується в CSS4

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

Цитата:

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

Це насправді працює наступним чином:

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

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

На жаль, ця функція ще ніде не реалізована (навіть на caniuse.com).

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

Ви можете використовувати 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);
}

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

"визначення розміру шрифту в 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/ )

Так, деякий браузер у SVG здається деякими обмеженнями. Інструмент розробника обмежує його до 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>