Yeni San Francisco yazı tipini bir sitede kullanmak istiyorum. Denedim:

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

boşuna. Bu sorunun cevabını denedim ama @font-faceburadaki çözüm değil.

Apple'ın yeni sistem yazı tipi herkese açık değildir. Apple, sistem yazı tipi adlarını soyutlamaya başladı:

Bu soyutlamanın motivasyonu, işletim sisteminin belirli bir ağırlıkta hangi yüzün kullanılacağı konusunda daha iyi seçimler yapabilmesidir. Apple, seçilebilir “6” ve “9” glifleri veya tek boşluklu olmayan sayılar gibi yazı tipi özellikleri üzerinde de çalışıyor. Tahminimce bu özellikleri web'e de getirmek istiyorlar.

Safari ve Firefox, SF'yi -apple-system; Chrome BlinkMacSystemFontşunları tanır :

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

Başka varyasyonlar da var:

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

Bunları aşağıdaki kemanla gösterebilirsiniz; çoğu henüz desteklenmemektedir: http://jsfiddle.net/v94gw9nx/

Bilgilerimi Craig Hockenberry'nin yazı tipini kullanma hakkında pek çok harika bilgi içeren makalesinden aldım: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Ayrıca, Surfin 'Safari blogunda soyutlanmış sistem yazı tiplerinin kullanımı hakkında harika bilgiler: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

Görünüşe göre Apple, CSS'de genel bir "sistem" yazı tipi adı kullanarak standartlaştırmak için W3C ile çalışıyor. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

SF font .otf dosyalarını kendi kişisel kullanımınız için indirin: https://developer.apple.com/fonts/

Kabul edilen cevap dahil mevcut cevapların hiçbiri, Apple'ın San Francisco yazı tipini, sistem yazı tipi olarak yüklenmemiş sistemlerde kullanmayacak. Soru "OS X sistem yazı tipini bir web sayfasında nasıl kullanırım" olmadığı için doğru çözüm web yazı tiplerini kullanmaktır:

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

Kaynak

Son test tarihi: Mart 2018

Soruyu ele almak için

Apple'ın yeni San Francisco yazı tipi bir web sayfasında nasıl kullanılır

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

veya (daha da kısa):

font-family: -apple-system, BlinkMacSystemFont;

yeterli olmalıdır.

Yine de, birden çok platformda sistem yazı tipini varsayılan olarak ayarlamak istiyorsanız, şunları öneririm:

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

• -apple-system- Safari'de San Francisco (Mac OS X ve iOS'ta); Mac OS X'in eski sürümlerinde Neue Helvetica ve Lucida Grande.
• system-ui - belirli bir platformda varsayılan kullanıcı arayüzü yazı tipi.
• BlinkMacSystemFont- -apple-systemMac OS X'te Chrome için eşdeğeri .
• "Segoe UI" - Windows (Vista +) ve Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) ve Chrome OS.
• Ubuntu - Ubuntu'nun tüm sürümleri.

Fikir aşağıdaki github sayısından ödünç alınmıştır .

Css hileleri hakkındaki bu makalede, diğer işletim sistemi veya eski sürümleri için yazı tiplerine bakabilirsiniz .

-apple-system, Safari'de San Francisco'yu seçmenize izin verir. BlinkMacSystemFont, Chrome için karşılık gelen alternatiftir.

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

Roboto veya Helvetica Neue, sans-serif'den önce de yedek olarak eklenebilir.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (nasıl veya daha önce http://furbo.org/2015/07/ 09 / i-left-my-my-fonts-in-san-francisco / ayrıntıları açıklayarak harika bir iş çıkar.

Kullanıcı El Capitan veya üstünü çalıştırıyorsa Chrome'da şununla çalışacaktır:

font-family: 'BlinkMacSystemFont';

Apple ileriye dönük olarak sistem yazı tiplerini soyutlamaktadır. Bu tesis, yeni jenerik aile adı -apple-sistemini kullanır. Yani aşağıdaki gibi bir şey size istediğinizi vermelidir.

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

Bu, bu oldukça eski sorunun bir güncellemesidir. Yeni SF Pro yazı tiplerini bir web sitesinde kullanmak istedim ve yukarıda belirtilenlerin dışında CDN yazı tipi bulamadım (appleocial.s3.amazonaws.com).

Açıkçası, bu Apple tarafından onaylanmış resmi bir içerik deposu değil. Aslında, Apple yazı tiplerini sunan, web geliştiricileri tarafından kullanılmaya hazır HİÇBİR resmi yazı tipi deposu bulamadım.

Bunun bir nedeni var - yeni SF Pro'yu ve diğer yazı tiplerini https://developer.apple.com/fonts/ adresinden indirirken gelen lisans sözleşmesini okursanız , ilk birkaç paragrafta çok net bir şekilde belirtilir:

[...] Apple Yazı Tipini yalnızca, uygun olduğu şekilde, Apple'ın iOS, macOS veya tvOS işletim sistemlerinde çalışan yazılım ürünlerinde kullanılacak kullanıcı arabirimlerinin modellerini oluşturmak için kullanabilirsiniz. Yukarıdaki hak, Apple Yazı Tipi'ni yalnızca iOS, macOS veya tvOS üzerinde çalışan bu tür yazılım ürünlerinin ekran görüntülerinde, görüntülerinde, modellerinde veya diğer tasvirlerinde, dijital ve / veya baskılarında gösterme hakkını içerir. [...]

Ve:

Burada açıkça belirtilmediği sürece, Apple Yazı Tipini herhangi bir belge, sanat eseri, web sitesi içeriği veya başka herhangi bir çalışma ürünü oluşturmak, oluşturmak, geliştirmek, görüntülemek veya başka şekilde dağıtmak için kullanamazsınız.

Daha ileri:

Aksi açıkça izin verilmedikçe [...] (i) aynı anda yalnızca bir kullanıcı Apple Yazı Tipini kullanabilir ve (ii) Apple Yazı Tipini birden fazla bilgisayar tarafından çalıştırılabileceği veya kullanılabileceği bir ağ üzerinden kullanıma sunamazsınız aynı zamanda.

Benim için başka soru yok. Apple açıkça Yazı Tiplerinin web üzerinde ürünlerinin dışında paylaşılmasını istemiyor.

Doğrudan bir veritabanından sunulan Apple Sistem Yazı Tipini kullanamazsınız. Lisansa aykırıdır, ancak bunu High Sierra'dan daha yüksek Mac Sistemleri için kullanabilirsiniz.

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

Veya bunu kullanabilirsiniz:

font-family: 'BlinkMacSystemFont';

En son 2015 yılında test edildi

Diğer çözümler işe yaramadığında bu çözümü son seçenek olarak kullanmalısınız.

Orijinal cevap:

MacOS Chrome / Safari üzerinde çalışın

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