iOS 12及以下如何使用SF Symbols?

How to use SF Symbols in iOS 12 and below?

我正在更新我的应用程序中的图标。在听说Apple发布了一个名为SF Symbols和iOS 13的图标字体后,我想知道我是否只能在iOS 13中使用它们或者是否可以在低版本中使用它们iOS 也是。

如果我想使用它们,是否必须为旧版本实施回退?

SF Symbols 是一个仅在 iOS 13 或更高版本上受支持的系统 - 无法在 iOS 12 或更低版本上使用它们。您需要为那些较旧的操作系统使用回退。

Human Interface Guidelines

您不能在 iOS 早于 iOS 13 的版本中原生使用 SFSymbols(有关 SF 符号,请参阅 Apple 的 Human Interface Guidelines)。

但是,如果您对使用图形感兴趣,可以使用 SFSymbols app 导出图标的 SVG 版本。然后使用一些图形工具将它们转换为 PNG 图标,您可以导入到您的资产目录中。

正在解决

我没有设法找到解决方案,我放弃了,但实际上我已经深入调查了。也许比我幸运的人能够找到 hpw 来继续我开始的工作:

Apple文档中说,为了方便浏览所有新的iOS 13 SF Symbols,您可以下载SF Symbols应用程序:https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

安装完成后可以进入Application > SF Symbols > showPackage content

从那里,在 content > Resources 下,我们可以找到一个名为 SFSymbolsFallback.ttf

的有趣文件

如果您尝试在 https://fontdrop.info/ 上打开此文件,您会看到它包含在 iOS 13 中作为 SF 字体发布的所有字体字形,以及相关的 unicodes


宾果?没那么快...

我试图从那里将此 .ttf 导入我在 iOS 12 和 XCode 10.2.1 的项目中,但似乎从未正确导入它。调用时无法在可用字体列表中检索 UIFont.familyNames

更有趣的是,如果我尝试在 Font Book 应用程序中导入此字体,我会收到一条警告,指出它包含 duplication , 与现有字体有某种冲突


从那里开始?

我的猜测是在 Font Book 和 Xcode 上还有另一种字体阻止安装 SF Symbols。

解决方案之一可能是找到 XCode 包中有冲突的那个并将其删除(这可能是 Symbols 字体或 San Francisco 导致问题的 idk )

我也试过用字体编辑器打开字体文件并更改其名称和姓氏,但没有成功。

如果有人想继续调查..

希望这可以帮助别人!

您可以使用 Figma 打开 .svg。然后 select Regular-M 并导出为 PDF 或 PNG。


更多详情更新:

您可以使用 Xcode 中的 PDF 矢量资源。这样图标应该适合您想要的任何尺寸。请查看此博客:https://useyourloaf.com/blog/xcode-9-vector-images/

新的Xcode有不同的UI但基本相同。在资产目录中:

  1. 将您的 PDF 矢量文件拖入。
  2. 选中“保留矢量数据”
  3. 选择“单一比例”

您可以将新的 ios 13 sf-pro-rounded 字体上传到您的项目中。然后在您的标签中启用该字体。

打开sf symbols,点击你想要的smbol,cmd+c,进入你的项目,点击一个标签cmd+v。 运行项目,应该有图标

干杯,

此图标集基于 SF Symbols https://framework7.io/icons/

1.导入字体:

打开字体应用程序,搜索 SF Pro Rounded 字体,right-click 在您想要的变体(例如 Light)上,然后单击在 Finder 中显示。将该文件(例如 SF-Pro-Rounded-Light.otf)拖到您的 XCode 项目中并勾选“必要时复制”。

2。 Select字体:

Select 你的 UILabel 或 UIButton,将 Title 设置为 Attributed(这很重要)和 select 你刚刚复制的字体(例如 SF Pro Rounded Light)。

3。设置符号:

在SF Symbols中找到你想要的图标,select它,按CMD+C复制,切换回XCode然后点击UILabel或UIButton Title的文本部分,然后按CMD+V 粘贴。

非常感谢 Dave van Wijk 的解决方案!

在 SF Symbols 3.1 中,编辑 > 将图像复制为... 您可以选择 PNG/point size/pixel 缩放并粘贴到预览等