Я хотів би використовувати новий шрифт Сан-Франциско на сайті. Я спробував:

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

безрезультатно. Я спробував відповіді на це питання , але @font-faceтут не є рішенням.

Новий системний шрифт Apple публічно не піддається. Apple почала абстрагувати назви системних шрифтів:

Мотивація цієї абстракції полягає в тому, що операційна система може зробити кращий вибір, яку особу використовувати при заданій вазі. Apple також працює над функціями шрифту, такими як вибираються “6“ та “9 ″ гліфів або неодномісні числа. Я здогадуюсь, що вони також хотіли б представити ці функції в Інтернеті.

Safari і Firefox використовують SF для -apple-system; Chrome розпізнає BlinkMacSystemFont:

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

Існують і інші варіанти:

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

Ви можете демонструвати їх за наступною скрипкою; більшість ще не підтримується: http://jsfiddle.net/v94gw9nx/

Я отримав свою інформацію з статті Крейга Хокенберрі, в якій є велика інформація про використання шрифту: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Також кілька чудових відомостей у блозі Safari Surfin про використання абстрагованих системних шрифтів: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

І, мабуть, Apple працює з W3C для стандартизації, використовуючи загальну назву шрифту в системі CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Завантажте файли шрифту SF .otf для власного користування: https://developer.apple.com/fonts/

Жоден із нинішніх відповідей, включаючи прийнятий, не використовуватиме шрифт Apple San Francisco від Apple у системах, у яких він не встановлений як системний шрифт. Оскільки питання не в тому, "як я можу використовувати системний шрифт OS X на веб-сторінці", правильним рішенням є використання веб-шрифтів:

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

Джерело

Останнє тестування: березень 2018 року

Для вирішення питання

Як використовувати новий шрифт Сан-Франциско від Apple на веб-сторінці

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

або (навіть коротше):

font-family: -apple-system, BlinkMacSystemFont;

повинно вистачити

Якщо ви хочете замовчувати системний шрифт на кількох платформах, я б радив:

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

• -apple-system- Сан-Франциско в Safari (на Mac OS X і iOS); Neue Helvetica та Lucida Grande на старих версіях Mac OS X.
• system-ui - шрифт інтерфейсу за замовчуванням на даній платформі.
• BlinkMacSystemFont- еквівалент -apple-systemдля Chrome на Mac OS X.
• "Segoe UI" - Windows (Vista +) та Windows Phone.
• Roboto - Android (сендвіч-морозиво (4.0) +) та Chrome OS.
• Ubuntu - всі версії Ubuntu.

Ідея запозичена з наступного випуску на github .

Ви можете шукати шрифти для інших ОС або старіших їх версій у цій статті про css-трюки .

-apple-system дозволяє вам вибрати Сан-Франциско в Safari. BlinkMacSystemFont - відповідна альтернатива для Chrome.

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

Roboto або Helvetica Neue можна було б вставити як резервний запас ще до sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (як чи раніше http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / виконай велику роботу, пояснюючи деталі.

Якщо користувач працює в El Capitan або вище, він буде працювати в Chrome з

font-family: 'BlinkMacSystemFont';

Apple абстрагує системні шрифти вперед. У цьому закладі використовується нове загальне прізвище -apple-system. Тож щось подібне нижче повинно отримати вам те, що ви хочете.

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

Це оновлення цього досить старого питання. Я хотів використовувати нові шрифти SF Pro на веб-сайті і не знайшов CDN-шрифтів, крім зазначеного вище (applesocial.s3.amazonaws.com).

Зрозуміло, що це не офіційне сховище вмісту, затверджене Apple. Власне, я не знайшов жодного офіційного сховища шрифтів, що обслуговує шрифти Apple, готові до використання веб-розробниками.

І є причина - якщо ви читаєте ліцензійну угоду, що постачається із завантаженням нового SF Pro та інших шрифтів з https://developer.apple.com/fonts/ - це в перших кількох абзацах дуже чітко зазначено:

[...] ви можете використовувати Apple Font виключно для створення макетів інтерфейсів користувача, які використовуються в програмних продуктах, що працюють на операційних системах Apple iOS, macOS або tvOS, якщо це можливо. Вищевказане право включає право показувати шрифт Apple у знімках екрана, зображеннях, макетах чи інших зображеннях, цифрових та / або друкованих видах таких програмних продуктів, що працюють виключно на iOS, macOS або tvOS. [...]

І:

За винятком випадків, передбачених у цьому документі, ви не можете використовувати Apple Font для створення, розробки, демонстрації чи іншим чином розповсюдження будь-якої документації, ілюстрації, вмісту веб-сайту чи будь-якого іншого робочого продукту.

Далі:

За винятком випадків, коли прямо прямо дозволено [...] (i) лише один користувач може одночасно використовувати шрифт Apple, і (ii) ви не можете надавати Шрифт Apple доступним через мережу, де його можна запускати або використовувати на декількох комп'ютерах в той самий час.

Більше питань для мене немає. Apple очевидно не хоче, щоб їх шрифти ділилися в Інтернеті за межами своїх продуктів.

Ви не можете використовувати Apple System Font, що подається безпосередньо з бази даних. Це проти ліцензії, але ви можете використовувати це для Mac систем вище, ніж High Sierra

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

Або ви можете скористатися цим:

font-family: 'BlinkMacSystemFont';

Востаннє тестували у 2015 році

Слід використовувати це рішення як останній вибір, коли інші рішення не працюють.

Оригінальна відповідь:

Робота над macOS Chrome / Safari

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