Existe algo como min-font-size e max-font-size?

Estou tentando fazer uma fonte em um div responsivo à janela do navegador. Até agora, funcionou perfeitamente, mas o div pai tem um max-widthde 525px. Redimensionar ainda mais o navegador não fará com que a fonte pare de redimensionar. Isso me fez pensar se existe tal coisa como min-font-sizeou max-font-size, e se tal coisa não existe, se existe uma maneira de alcançar algo semelhante.

Achei que usar porcentagens em font-sizefuncionaria, mas o trecho de texto não será dimensionado de acordo com o div pai. Aqui está o que eu tenho:

O CSS para o div pai:

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

    width:40%;
    height:450px;

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

    z-index:2;
}

O CSS para o trecho de texto em questão:

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

Eu tenho pesquisado bastante na internet, mas sem sucesso.

Não, não há propriedade CSS para o tamanho mínimo ou máximo da fonte. Os navegadores geralmente têm uma configuração de tamanho mínimo de fonte, mas isso está sob o controle do usuário, não de um autor.

Você pode usar @mediaconsultas para fazer algumas configurações CSS, dependendo de coisas como a largura da tela ou janela. Em tais configurações, você pode, por exemplo, definir o tamanho da fonte para um valor pequeno específico se a janela for muito estreita.

Você pode fazer isso usando uma fórmula e incluindo a largura da janela de visualização.

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

Isso define o tamanho mínimo da fonte em 7px e amplifica-o em .5vw dependendo da largura da janela de visualização.

Boa sorte!

Funciona bem com CSS.

Passei pelos mesmos problemas e corrigi-los da seguinte maneira.

Use um tamanho fixo de "px" para o tamanho máximo em uma largura específica e acima. Então, para larguras menores diferentes, use um "vw" relativo como uma porcentagem da tela.

O resultado abaixo é que ele se ajusta a telas abaixo de 960 px, mas mantém um tamanho fixo acima. Apenas um lembrete, para não esquecer de adicionar o documento html no cabeçalho:

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

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

Espero que ajude!

Estou chegando um pouco tarde aqui, não recebo muito crédito por isso, estou apenas fazendo uma mistura das respostas abaixo porque fui forçado a fazer isso para um projeto.

Portanto, para responder à pergunta: essa propriedade CSS não existe . Não sei por que, mas acho que é porque eles têm medo de um uso indevido dessa propriedade, mas não encontro nenhum caso de uso em que isso possa ser um problema sério.

Seja como for, quais são as soluções?

Duas ferramentas nos permitirão fazer isso: media queries e propriedade vw

1) Existe uma solução "tola" que consiste em fazer uma consulta de mídia para cada passo que eantamos em nosso css, mudando a fonte de um valor fixo para outro fixo. Funciona, mas é muito chato de fazer, e você não tem um aspecto linear suave.

2) Como explicou AlmostPitt, existe uma solução brilhante para os mínimos:

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

O mínimo aqui seria 7 px, além de 0,5% da largura da visualização. Isso já é muito legal e funciona na maioria dos casos . Não requer nenhuma consulta de mídia, você só precisa gastar algum tempo encontrando os parâmetros corretos.

Como você notou que é uma função linear, a matemática básica aprende que dois pontos já encontram os parâmetros. Em seguida, apenas fixe o tamanho da fonte em px que deseja para telas muito grandes e para a versão móvel, depois calcule se deseja fazer um método científico. Pensei, não é absolutamente necessário e você pode simplesmente ir tentando.

3) Suponhamos que você tenha um cliente muito chato (como eu) que deseja absolutamente que um título seja de uma linha e não mais. Se você usou a solução AlmostPitt, então você está com problemas porque sua fonte continuará crescendo, e se você tiver um contêiner de largura fixa (como bootstrap parando em 1140px ou algo em janelas grandes). Aqui, sugiro que você use também uma consulta de mídia. Na verdade, você pode apenas encontrar o tamanho máximo de px que pode manipular em seu contêiner antes que o aspecto se torne indesejado (pxMax). Este será o seu máximo. Então você só precisa encontrar a largura exata da tela que você deve parar (wMax). (Eu deixo você inverter uma função linear por conta própria).

Depois disso, basta fazer

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

Então é perfeitamente linear e o tamanho da fonte para de crescer! Observe que você não precisa colocar sua propriedade css anterior (calc ...) em uma consulta de mídia sob wMax porque as consultas de mídia são consideradas mais importantes e sobrescreverão a propriedade anterior.

Não acho que seja útil fazer um snippet para isso, já que você teria problemas para fazê-lo para a tela inteira e não é ciência de foguetes afinal.

Espero que isso possa ajudar outras pessoas e não se esqueça de agradecer a AlmostPitt por sua solução.

Na verdade, isso está sendo proposto no CSS4

Rascunho de trabalho no W3C

Citar:

Essas duas propriedades permitem que um site ou usuário exija que o tamanho da fonte de um elemento seja fixado dentro do intervalo fornecido com essas duas propriedades. Se o valor calculado font-size estiver fora dos limites criados por font-min-size e font-max-size, o valor de uso de font-size é fixado aos valores especificados nessas duas propriedades.

Isso funcionaria da seguinte forma:

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

Isso significaria literalmente que o tamanho da fonte será 5% da largura da janela de visualização, mas nunca menor que 10 pixels e nunca maior que 18 pixels.

Infelizmente, esse recurso ainda não foi implementado em nenhum lugar (nem mesmo em caniuse.com).

Mochila é brilhante, mas você não precisa necessariamente recorrer a ferramentas de construção como Gulp ou Grunt etc.

Fiz uma demonstração usando CSS Custom Properties (CSS Variables) para controlar facilmente os tamanhos mínimo e máximo da fonte.

Igual a:

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

Obtive alguns resultados suaves com isso. Ele flui suavemente entre as 3 faixas de largura, como uma função contínua por partes.

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

Você pode usar o Sass para controlar os tamanhos de fonte mínimo e máximo. Aqui está uma solução brilhante de Eduardo 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);
}

Observe que definir o tamanho da fonte com px não é recomendado devido a questões de acessibilidade :

"definir tamanhos de fonte em px não é acessível, porque o usuário não pode alterar o tamanho da fonte em alguns navegadores. Por exemplo, usuários com visão limitada podem desejar definir o tamanho da fonte muito maior do que o tamanho escolhido por um web designer." (consulte https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

Uma abordagem mais acessível é definir font-size: 100% no html, que respeita as configurações de tamanho padrão do usuário , e ENTÃO usar porcentagens ou unidades relativas ao redimensionar ( emou rem), por exemplo, com uma consulta @mídia.

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

Sim, parece que há algumas restrições por parte de alguns navegadores em SVG. O pacote de desenvolvimento restringe-o a 8000px; O seguinte gráfico gerado dinamicamente falha, por exemplo, no Chrome.

Experimente 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>