Нужна дополнительная информация: как загрузить и использовать системные шрифты iPhone (шрифты SF) на веб-сайте моего вне ⇐ IOS

[Anonymous]

Я пытаюсь загрузить и использовать на своем веб-сайте шрифты iPhone по умолчанию (Сан-Франциско), чтобы сайт выглядел одинаково на устройствах iOS. Однако мне не удалось правильно загрузить шрифт. Я использую следующий код в CSS, но, похоже, он работает не так, как ожидалось.
Вот предварительный просмотр изображения с использованием Windows | Проект iPhone 15 Pro

• Есть ли способ настроить файлы Tailwind.config.js и index.css для поддержки собственного шрифта?
• Нужно ли включать какие-либо дополнительные файлы или настройки, чтобы шрифт правильно отображался на iOS?
  
  Я тестировал его в Safari на macOS и iOS, но не уверен, что мне не хватает чего-то, чтобы он выглядел так же, как системный шрифт iPhone.< /p>
• Я пытался настроить файл попутного ветра, используя -apple-system, конечно, с моим медленным мозгом.

Заранее благодарим за помощь. Я здесь новичок, поэтому это мой первый вопрос о stackoverflow. Немного нервничаю по поводу ответов, лол.
p.s. Вот что у меня есть на данный момент:
Я понятия не имею, что делаю
файл Tailwind.config.js

Код: Выделить всё

`/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
themes: {
FontFace: {
"apple-system": {
fontFamily: "apple-system",
fontStyle: "normal",
fontWeight: 400,
src: "local('apple-system')",
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,         U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,       U+2212, U+2215, U+FEFF",
}
}
},
colors: {
blue: "#2997FF",
gray: {
DEFAULT: "#86868b",
100: "#94928d",
200: "#afafaf",
300: "#42424570",
},
zinc: "#101010",
},
},
},
plugins: [],

};
`

Подробнее здесь: https://stackoverflow.com/questions/790 ... onto-my-fr