114

Eu gostaria de usar a nova fonte de São Francisco em um site. Eu tentei:

font: 'San Francisco', Helvetica, Arial, san-serif;

para nenhum proveito. Eu tentei as respostas para esta pergunta , mas @font-facenão é a solução aqui.

css

— inorganik
fonte

1

As fontes de sites dependem do que está instalado no sistema do usuário ou são carregadas externamente. É uma coisa bastante simples, especialmente se a fonte for disponibilizada para uso.

— Sparky

210

A nova fonte do sistema da Apple não é exposta publicamente. A Apple começou a abstrair nomes de fontes do sistema:

A motivação para essa abstração é que o sistema operacional possa fazer melhores escolhas sobre qual face usar em um determinado peso. A Apple também está trabalhando em recursos de fonte, como glifos selecionáveis “6 ″ e“ 9 ″ ou números não monoespaçados. Acho que eles também gostariam de trazer esses recursos para a web.

Safari e Firefox usam SF para -apple-system; O Chrome reconhece BlinkMacSystemFont:

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

Existem também outras variações:

font-family: -apple-system-body
font-family: -apple-system-headline
font-family: -apple-system-subheadline
font-family: -apple-system-caption1
font-family: -apple-system-caption2
font-family: -apple-system-footnote
font-family: -apple-system-short-body
font-family: -apple-system-short-headline
font-family: -apple-system-short-subheadline
font-family: -apple-system-short-caption1
font-family: -apple-system-short-footnote
font-family: -apple-system-tall-body

Você pode demonstrá-los no seguinte violino; a maioria ainda não é compatível: http://jsfiddle.net/v94gw9nx/

Peguei minhas informações no artigo de Craig Hockenberry, que contém muitas informações excelentes sobre o uso da fonte: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Além disso, algumas informações excelentes no blog Surfin 'Safari sobre o uso de fontes abstratas do sistema: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

E, aparentemente, a Apple está trabalhando com o W3C para padronizar usando um nome de fonte genérico do "sistema" em CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Baixe os arquivos .otf da fonte SF para seu uso pessoal: https://developer.apple.com/fonts/

— inorganik
fonte

ou você pode simplesmente usar nomes de fontes comoSanFranciscoText-Regular

4

Se precisar de números monoespaçados para exibição na tabela, o -apple-systemtambém suporta isso via CSS font-variant-numeric: tabular-nums;.

— Palimondo

@ j08691, qual é a licença?

— Pacerier

1

@BryanBryce Aquilo foi um hack para o El Cap. Não funciona mais, acho que se chama .SF NS Texte .SF NS Displayagora, mas não deve usar. Eu usaria -apple-system. SF Text/ SF Prowork apenas se você tiver a fonte instalada manualmente.

1

Aparentemente, -system-uié a nova forma padrão no Chrome e Safari. (Eu não queria roubar o crédito de sua resposta incrível, então estou apenas colocando isso nos comentários. Furbo.org/2018/03/28/system-fonts-in-css )

— Wil Shipley

65

Nenhuma das respostas atuais, incluindo a aceita , usará a fonte San Francisco da Apple em sistemas que não a tenham instalada como a fonte do sistema. Como a questão não é "como faço para usar a fonte do sistema OS X em uma página da web", a solução correta é usar fontes da web:

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

Fonte

— Ilias Karim
fonte

3

Se alguém quiser um ousado: sanfranciscodisplay-bold-webfont.woff

— Snow Bases

11

Observação: esta resposta viola os termos de licença da fonte da Apple , que afirmam que "[...] você pode usar a fonte da Apple apenas para criar maquetes de interfaces de usuário a serem usadas em produtos de software executados no iOS, iPadOS, macOS ou tvOS da Apple sistemas operacionais, conforme aplicável " .

— Teh

36

Testado pela última vez: março de 2018

Para resolver a questão

Como usar a nova fonte San Francisco da Apple em uma página da web

font-family: -apple-system, system-ui, BlinkMacSystemFont;

ou (ainda mais curto):

font-family: -apple-system, BlinkMacSystemFont;

deve ser suficiente.

No entanto, se você deseja padronizar a fonte do sistema em várias plataformas, sugiro:

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;

-apple-system- San Francisco no Safari (no Mac OS X e iOS); Neue Helvetica e Lucida Grande em versões anteriores do Mac OS X.
system-ui - fonte padrão da IU em uma determinada plataforma.
BlinkMacSystemFont- equivalente a -apple-system, para Chrome no Mac OS X.
"Segoe UI" - Windows (Vista +) e Windows Phone.
Roboto - Android (Ice Cream Sandwich (4.0) +) e Chrome OS.
Ubuntu - todas as versões do Ubuntu.

A ideia foi tirada da seguinte edição do github .

Você pode procurar fontes para outro sistema operacional ou versões mais antigas delas neste artigo sobre truques de CSS .

Tem certeza de que realmente é San Francisco que está sendo usado para renderização no iOS? No iOS 12 (Simulador) não parece; no iOS 13 parece que sim, mas nem todos os glifos estão disponíveis .

— Fabien Snauwaert

@FabienSnauwaert, não, não tenho certeza sobre o iOS 12 e 13. É por isso que adicionei a data no topo da resposta (ou seja, a resposta já tem mais de 2 anos e foi postada antes mesmo do anúncio do iOS 12).

26

-apple-system permite que você escolha San Francisco no Safari. BlinkMacSystemFont é a alternativa correspondente para o Chrome.

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

Roboto ou Helvetica Neue podem ser inseridos como substitutos antes mesmo da sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (como ou anteriormente http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / faço um ótimo trabalho explicando os detalhes.

— Andreas Kwiatkowski
fonte

10

Se o usuário estiver executando o El Capitan ou superior, ele funcionará no Chrome com

font-family: 'BlinkMacSystemFont';

— Benjamin
fonte

3

Você tem um link para qualquer documentação oficial (ou outra) sobre isso?

— Moshe Katz

4

A Apple está abstraindo as fontes do sistema daqui para frente. Esta instalação usa um novo nome de família genérico - sistema-maçã. Portanto, algo como abaixo deve dar o que você deseja.

body 
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

— dors
fonte

E quanto à tela HTML?

— clearlight

4

Esta é uma atualização para esta questão bastante antiga. Eu queria usar as novas fontes SF Pro em um site e não encontrei fontes CDN, além das mencionadas acima (applesocial.s3.amazonaws.com).

Claramente, este não é um repositório de conteúdo oficial aprovado pela Apple. Na verdade, eu não encontrei NENHUM repositório de fontes oficial servindo fontes Apple, pronto para ser usado por desenvolvedores web.

E há um motivo - se você ler o contrato de licença que acompanha o download do novo SF Pro e outras fontes em https://developer.apple.com/fonts/ - ele afirma nos primeiros parágrafos de forma muito clara:

[...] você pode usar a fonte da Apple exclusivamente para criar mock-ups de interfaces de usuário para serem usados em produtos de software executados nos sistemas operacionais iOS, macOS ou tvOS da Apple, conforme aplicável. O direito anterior inclui o direito de mostrar a fonte da Apple em capturas de tela, imagens, maquetes ou outras representações, digitais e / ou impressas, de tais produtos de software rodando exclusivamente em iOS, macOS ou tvOS. [...]

E:

Exceto conforme expressamente previsto neste documento, você não pode usar a Fonte Apple para, criar, desenvolver, exibir ou distribuir qualquer documentação, arte, conteúdo de site ou qualquer outro produto de trabalho.

Mais distante:

Exceto quando expressamente permitido [...] (i) apenas um usuário pode usar a Fonte Apple por vez, e (ii) você não pode disponibilizar a Fonte Apple em uma rede onde possa ser executada ou usada por vários computadores ao mesmo tempo.

Sem mais perguntas para mim. A Apple claramente não quer que suas fontes sejam compartilhadas na web fora de seus produtos.

— Jhohlfeld
fonte

3

Na resposta aceita, você pode ver que não estamos servindo webfonts da Apple, estamos informando ao navegador para usar a fonte do sistema Apple, que atualmente é SF. Você certamente não pode servir SFPro, mas pode especificá-lo para ser usado por pessoas com dispositivos Apple.

— inorganik

4

Você não pode usar o Apple System Font servido diretamente de um banco de dados. É contra a licença, mas você pode usar isso para sistemas Mac superiores a High Sierra

body 
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

Ou você pode usar este:

font-family: 'BlinkMacSystemFont';

— Theroyakash
fonte

2

Testado pela última vez em 2015

Deve usar esta solução como última escolha, quando outras soluções não funcionarem.

Resposta original:

Trabalhe no macOS Chrome / Safari

body { font-family: '.SFNSDisplay-Regular', sans-serif; }

— bumfo
fonte

1

Um bloco de código sozinho não fornece uma boa resposta. Adicione explicações.

— Louis Barranqueiro

1

Este é o único que funcionou para mim em uma folha de estilo de sintaxe Atom.

— Kai

2

Observe que isso não funciona no iOS enquanto -apple-system, 'BlinkMacSystemFont'funciona no iOS Chrome + Safari e OS X Chrome + Safari.

— Charlie Schliesser

1

Além disso, devo ressaltar que o motivo pelo qual isso não funciona no iOS é porque as fontes do sistema começam com .SFNS no macOS, enquanto começam com .SFUI no iOS. Se você realmente precisa fazer isso por algum motivo, isso resolveria ... mas não faça isso!

— Jonathan Thornton

1

obrigado, apliquei na fonte SF e está funcionando muito bem. O problema com -apple-system é aplicado a todo o conteúdo e substitui o estilo da família de fontes.

— Hardik Darji