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.