#html #css #sf-symbols
#HTML #css #sf-символы
Вопрос:
Я пытаюсь создать веб-сайт и надеялся использовать символы Apple SF для некоторых значков, однако я не могу найти способ разместить значки SF на веб-сайте, я загрузил приложение и скопировал значок, однако на веб-сайте он показывает пустой квадрат.
Любая помощь будет оценена.
Ответ №1:
К сожалению, это приложение не разрешено лицензией, которая сопровождает загрузку символов SF.
Использование символов, полученных из шрифта Apple SF, ограничено созданием макетов пользовательских интерфейсов для программных продуктов, работающих в операционных системах Apple iOS, iPadOS, macOS и tvOS.
Комментарии:
1. В этом абзаце выше есть противоречие. Шрифт во всей iOS, используемый по умолчанию для приложений iOS, представляет собой разновидность SF с разными размерами и весом. Кроме того, веб-сайт — это то, что доступно для просмотра в macOS. Почему вы создаете макет, а не производственную сборку с символами SF, если это действительно целевая ОС? Затем назовите конкретные варианты использования, для которых они будут отклонять приложения, если вы используете символ неправильно, например, видеокамера для вашего собственного видеочата вместо Apple FT. Опять же, шрифт по умолчанию на iOS не является макетом.
Ответ №2:
Вы не можете использовать эти значки на веб-сайтах, поскольку лицензия на символы SF не позволяет использовать эти символы извне, кроме продуктов Apple.
Законной альтернативой является использование символов отсюда:
https://fonts.google.com/icons
https://www.w3schools.com/icons/icons_reference.asp
upd:
https://fontawesome.com/search?m=freeamp;o=r
(большинство из них не являются бесплатными, но ссылка ведет на 2 018 бесплатных значков)
и, кстати, вы можете использовать его непосредственно из swift, используя
https://github.com/LiveUI/Awesome
или
https://github.com/thii/FontAwesome.swift
Но существуют способы сделать это (нелегальный ofc)
способ 1
вы можете попробовать вручную добавить один из «Шрифтов Сан-Франциско» на свой веб-сайт и использовать символы sfsиз этих шрифтов.
способ 2
вы можете скопировать изображение, вставить его в любой редактор изображений и сохранить в формате png.
после этого вы можете использовать его как изображение на веб-сайте. НЕЗАКОННО.
Комментарии:
1. Или вы можете перетащить в Sketch.app. Но абсолютно без лицензии.
2. @HuuPhongNguyen вы можете это сделать, но это по-прежнему запрещено для использования на веб-сайтах 🙂
Ответ №3:
Я скопировал символы (UTF8, я полагаю) из приложения SFSymbols3 для Mac в TextEdit и сохранил его как html. Результирующая страница работает в Chrome (94.04) на macOS, но, что удивительно, не в Safari (15.0).
Я создал скрипку js: https://jsfiddle.net/4so0wzdk/#amp;togetherjs=Tv12LecGJT
Ниже вырезано, где вы должны вставить символ вместо XXX и YYY.
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px 'SF Pro'}
</style>
</head>
<body>
<p class="p1">XXX 0.circle</p>
<p class="p1">YYY 00.circle</p>
</body>
</html>
Должен быть установлен SFSymbols3.app от Apple. В противном случае это не сработает.