Na verdade, o tipo de letra San Francisco é enviado como uma fonte variável

Apple revelou uma versão expandida de sua fonte do sistema de São Francisco na WWDC 2022. Então, no mês passado, Jim Nielsen se concentrou nas variações da fonte, explicando como a fonte fornece um espectro de variações com base no largura e peso. É uma leitura notável se você ainda não a verificou.

Com todas essas novas opções excelentes, você pode ficar tentado a usá-las em um web design. Chris era olhando para os conjuntos expandidos também em seu blog pessoal e ponderou:

Mas ainda não está claro como podemos explorar as variedades condensadas, compactadas e expandidas em CSS, ou se existe mesmo um plano para permitir isso. Suponho que eventualmente possamos dar uma olhada no Apple.com e ver como eles fazem isso se começarem a usá-los lá.

Não faz todo o sentido construir como uma fonte variável e enviar todo o kit e kaboodle dessa forma?

Acontece que sim. Faz todo o sentido. Chris segue em um nova postagem:

Mas ainda ontem me deparei aleatoriamente com o fato de que a fonte San Francisco integrada (nos dispositivos Apple que a possuem integrada) já é variável (!!). Veja, eu estava andando por aí com Roboto Flex, e teve system-ui como fonte substituta, e percebi que durante o FOUT, o font-variation-settings Eu estava usando teve um efeito na fonte substituta, que é renderizada como San Francisco no meu Mac. O que... a menos que eu seja maluco... significa que San Francisco é uma fonte variável.

Então, quanto a usá-lo? Chris tem uma demonstração, é claro:

Existem algumas dicas para tudo isso, sendo as mais significativas as alternativas para dispositivos que não são da Apple. Afinal, essa demonstração está simplesmente chamando system-ui para a família de fontes - não está dizendo ao navegador para baixar um arquivo de fonte ou algo assim e quem sabe se a Apple algum dia enviará um arquivo de fonte variável que poderemos servir como uma fonte web personalizada real.

A outra coisa interessante? Chris fez algumas investigações e contou 35 layouts incluídos naquela fonte do sistema. Ir Leia o restante do artigo para ver todos eles (e para tomar uma boa e velha dose de Cris-ismos - eu sei que sinto falta deles!).

Link Direto →