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


99

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.


Primeira vez que vi vw usado em fontes lol
Brandito

Respostas:


60

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.


Se eu estiver correto, as informações em seu link dizem que as consultas de mídia irão executar o CSS especificado quando uma condição for atendida, neste caso de seu link, a condição seria max-width:600px;. Estou certo ou não entendi corretamente as informações por trás do link?
Toby van Kempen

4
@Toby van Kempen: Você está correto, no entanto, a largura máxima, neste caso, se refere ao tamanho da janela de visualização da tela, e não ao tamanho de um elemento arbitrário. Se você precisar alterar o CSS dependendo do estilo de algum elemento arbitrário, não será possível usar consultas de mídia para fazer isso. Você precisará de um script.
BoltClock

@BoltClock Então, @mediase refere à janela do navegador? Como ele saberá que desejo que o tamanho da fonte seja, digamos, 20 px quando o div pai ou a janela do navegador tiver um tamanho específico, em px?
Toby van Kempen

@Toby van Kempen: Sempre fará referência à janela do navegador - daí a "mídia" em "consultas de mídia".
BoltClock

1
Ah, entendo. Então, se eu estiver correto, se eu escrever @media (width:600px), ele executará o script abaixo @mediaassim que a largura do navegador for equivalente a 600px?
Toby van Kempen

110

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!


2
AMD!!! Nos últimos 3 dias, tenho brincado com números e diferentes maneiras de fazer isso. Deixe-me dizer que nada realmente funcionou como eu gostaria. Então, eu encontrei sua resposta, conectei sua resposta em meu css e "HORAYYYY" funciona ... Resposta incrível Pitt. Obrigado.
Quinta

Um ótimo truque para o tamanho mínimo da fonte. Gostaria de saber se algo semelhante pode ser feito ao máximo ... Poderia ter algo a ver com a ideia de que qualquer negativo seria tratado como 0. Alguns aninhados calcou algo assim?
Lazar Ljubenović

2
Inverta-o, então font-size: calc (12px - .5vw)
roberrrt-s

Isso não funciona corretamente com o LESS. Eu acho que a calc()instrução é processada quando o LESS é compilado e resolve para um pxvalor simples . O redimensionamento não recalcula. Idéias ou pensamentos?
Advogado do Diabo


63

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!


2
Esta deve ser a MELHOR resposta !!
KaKa

por que você tem 'todos' em cada linha?
tibi

@tibi all refere-se ao tipo de mídia (ou: ONDE aplicar). as opções são all, screen, print & speech. tudo é padrão, então é meio obsoleto aqui. veja a documentação da mdn .
honk31

Sim! Isso funciona perfeitamente! O que eu queria era um tamanho de fonte MAX e funciona perfeitamente, obrigado.
todbott

9

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.


Você pode sugerir uma fórmula para encontrar os valores corretos para calc () que retornam o mesmo que max(*a*px,, *b*vw)? Porque, no meu caso, não posso tolerar uma adição ingênua porque o resultado é muito grande, mas parece que você está sugerindo que eu poderia de alguma forma reduzir a e b sobre as quantidades ingênuas - estou tendo problemas para calcular a matemática, e eu precisa de uma solução geral, não apenas um caso específico.
Michael

A única boa explicação que encontrei foi uma imagem, então não posso ajudá-lo por meio de comentários, sugiro que você crie uma nova pergunta
Alburkerk

6

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).


4
Ótimo. Então, eu só tenho que parar de trabalhar neste projeto por alguns anos até que ele seja implementado ....: '- (
Michael

3

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

2

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

Como isso é diferente da outra resposta?
user193661

2

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

1

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/ )


0

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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.