如何在 iOS 12 及更低版本中使用 SF Symbols？答案

【问题标题】：How to use SF Symbols in iOS 12 and below?如何在 iOS 12 及更低版本中使用 SF Symbols？
【发布时间】：2019-10-20 07:10:20
【问题描述】：

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

如果我想使用它们，是否必须为旧版本实现回退？

【问题讨论】：

请注意，许多符号只能用于专门链接到特定的 Apple 功能。 “某些符号只能用于引用 Apple 技术……”developer.apple.com/design/human-interface-guidelines/… 向下滚动到 Symbols for Use As-Is 并注意表格。
因此（完美的）SFSymbols“云”符号只能用作作为指向 iCloud 的链接。不幸的是，您不能仅将其用作一般的“云”链接。（完美的）类似相机的符号只能用作作为FaceTime的链接。不幸的是，您不能仅将其用作一般的“相机”链接。

标签： ios human-interface sf-symbols

【解决方案1】：

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

见Human Interface Guidelines

【讨论】：

iOS 13 并不支持所有的 SF 符号。有两个 Mac 应用程序展示符号 - 一个称为“SF Symbols”，其中包含更全面的集合，另一个称为“San Fransymbols”，其中包含较小的集合设置代码示例。在 iOS13 中，只有在“San Fransymbols”应用程序中监听的图标可用。

【解决方案2】：

您不能在 iOS 13 之前的 iOS 版本中原生使用 SFSymbols（请参阅 Apple 的 Human Interface Guidelines 了解 SF Symbols）。

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

【讨论】：

谢谢！您可以添加一个 URL 和界面指南中的引用，以便未来的访问者直接看到吗？
SFSymbols 应用中并非所有图标都可以导出。
你能澄清一下它说你不应该在旧的 iOS 版本中使用 SF 符号吗？此引用表明旧版本不支持 SF 符号，但似乎并不阻止使用图标的图形版本。这与那些希望在 iOS 版本中保持一致外观的人相关，而不是在 iOS 13 中使用 SF 符号和在旧版本中使用不同的图标。谢谢！
由于引用了 Apple 文档而被否决，这似乎并没有真正阻止在早期操作系统版本中使用 SF 符号。
这个免费的在线工具允许以 png 格式下载 SF 符号，切成 3 种尺寸，适用于 iOS。只需单击 IOS 下载按钮即可获取带有 png 切片的 zip 文件。 hotpot.ai/free-icons?s=sfSymbols

【解决方案3】：

工作正在进行中

我没有设法找到解决方案，我放弃了，但实际上我在调查中走得很远。也许比我幸运的人能够找出 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

宾果游戏？没那么快……

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

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

从那里？

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

其中一种解决方案可能是找到 XCode 包中存在冲突的那个并将其删除（这可能是导致问题的Symbols 字体或San Francisco idk）

我还尝试使用字体编辑器打开字体文件并更改其名称和系列名称，但没有成功。

如果有人想继续调查..

希望这可以帮助某人！

【讨论】：

值得一提的是，SFSymbols 应用程序安装了新版本的 SF* 系列，字形数更大（~7000），所以我唯一做的就是复制符号（如 ⌘C）从应用程序并将其粘贴到使用该字体的标签中。这是一个 Mac 应用程序，虽然没有尝试在 iOS 上进行测试，但我想这将是在 info.plist 中声明字体然后以相同方式使用它的问题。
当我尝试将此文件添加到 Info.plist 中时，它在 UIFont.familyNames 中不可见。但是，我还没有尝试查看它是否真的将所有这些符号附加到旧金山家族。会看看
SFSymbol 只是普通 San Francisco 字体中字符子集（符号字符）的名称。如果您在内置字体查看器（在 OSX 上）中查看 San Francisco 字体，您会看到它包含特定 unicode 范围内的符号作为字形。因此，当您尝试在 iOS 设备上安装它时当然会发生冲突：您将要替换本机系统字体，这肯定是苹果不会让您这样做的
@Psi 这就是为什么我还尝试使用字体编辑器编辑字体名称的原因。更改字体系列名称和其他内容。但是，当我尝试安装它时，它仍然失败，没有任何错误日志。（可能有一个标识符我忘记更改了）
@Olympiloutre 有一个工具可以将 SF 符号导出为不同的格式 - github.com/davedelong/sfsymbols

【解决方案4】：

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

更新详情：

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

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

将您的 PDF 矢量文件拖入。
勾选“保留矢量数据”
选择“单音阶”

【讨论】：

我想在工具栏中的按钮中使用图标，但图标的大小与其他系统图标不同。有没有办法缩小尺寸？
@huckjulius 您可以使用 Figma 直接调整图标矢量大小。或者您可以导出到 PDF 矢量文件，然后动态更改大小（在代码中）。
最佳答案。将导出的文件从 SF Symbols 拖放到 Sigma 中，然后单击矢量图像，然后在右侧面板上导出。完成。
我注意到 Xcode 处理 PDF 不是通过矢量而是生成图像。因此，请根据需要调整照片尺寸。
我们仍然需要 3 个尺寸，知道如何在 Figma 中做到这一点吗？

【解决方案5】：

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

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

干杯，

【讨论】：

您不需要 SF Symbols 应用程序中的 SFSymbolsFallback.ttf 文件吗？还是说所有 SF Symbols 图标都已包含在 SF Pro Rounded 字体中？
谢谢！我在我的 Mac 上打开字体应用程序，搜索 SF Pro Rounded 字体，右键单击 Light 变体（我想要的那个），然后单击在 Finder 中显示。我将该文件 (SF-Pro-Rounded-Light.otf) 拖到我的 XCode 项目中并勾选“如有必要复制”。然后我点击我的 UIButton，将 Title 设置为 Attributed（这很重要）并选择 SF Pro Rounded Light 作为字体。然后我在 SF Symbols 中找到了我想要的图标，选中它，按 CMD+C 复制，切换回 XCode 并单击 UIButton Title 的文本部分，然后按 CMD+V 粘贴。成功了！

【解决方案6】：

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

【讨论】：

【解决方案7】：

1.导入字体：

打开字体应用程序，搜索 SF Pro Rounded 字体，右键单击所需的变体（例如 Light），然后单击在 Finder 中显示。将该文件（例如 SF-Pro-Rounded-Light.otf）拖到您的 XCode 项目中并勾选“如有必要复制”。

2。选择字体：

选择您的 UILabel 或 UIButton，将 Title 设置为 Attributed（这很重要）并选择您刚刚复制的字体（例如 SF Pro Rounded Light）。

3.设置符号：

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

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

【讨论】：

在swiftUI项目中如何使用？

【解决方案8】：

在 SF Symbols 3.1 中，编辑 > 将图像复制为... 您可以选择PNG/点大小/像素比例并粘贴到预览等中。

【讨论】：