logo标签列表

如何在 iOS 12 及以下版本中使用 SF Symbols？

ioshuman-interfacesf-symbols
68

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

如果我想使用它们，我是否需要为旧版本实现备用方案？

请注意，许多符号只能用于特定苹果功能的链接。请滚动至Symbols for Use As-Is并查看表格，其中说明了一些符号可以仅用于引用苹果技术... https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/ - Fattie
例如，(完美的)SFSymbols“云”符号只能用作iCloud的链接。不幸的是，您不能将其用作一般的“云”链接。 (完美的)类似相机的符号只能用作FaceTime的链接。不幸的是，您不能将其用作一般的“相机”链接。 - Fattie
8个回答
84

在 iOS 13 以前的版本中，无法直接使用 SFSymbols（请参考苹果的 人机界面指南 中的 SF Symbols 章节）。

但是，如果您想要使用这些图标，可以使用 SF Symbols 应用程序来导出图标的 SVG 版本。然后，使用一些图形工具将它们转换为 PNG 图标，然后导入到您的资源目录中。

如何在 Mac 上从 SFSymbols 应用程序中导出 SVG 的屏幕截图。

4
SFSymbols应用程序中并非所有图标都可以导出。 - Frank Cheng
1
@FrankCheng 我认为这违反了苹果的商标规则，如果您在资源中导出并使用它们，您的应用程序将被拒绝。请检查苹果网站上的“重要”部分 https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/。 - Soheil Novinfard
8
请问您能否澄清在哪里提到不应在旧版 iOS 中使用 SF Symbols？这个引用表明 SF Symbols 不支持旧版本，但似乎并不反对使用图形版本的图标。对于那些希望在各个 iOS 版本之间保持一致外观的人来说，这很重要，与在 iOS 13 中使用 SF Symbols 并在旧版中使用不同的图标相比。谢谢！ - Crashalot
2
由于引用的苹果文档似乎并没有在早期操作系统版本中反对使用SF符号，因此被投下了反对票。 - Greg Brown
4
这个免费在线工具可以下载iOS的SF符号，以png格式切成3个尺寸。只需点击IOS下载按钮即可获取带有png切片的zip文件。https://hotpot.ai/free-icons?s=sfSymbols - Alexei Fando
显示剩余4条评论
15

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

更多详情更新：

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

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

  1. 拖入您的PDF向量文件。
  2. 勾选“保留矢量数据”
  3. 选择“单一比例”
1
我想在工具栏中的按钮中使用图标，但该图标的大小与其他系统图标不同。有没有办法缩小它的大小？ - juliushuck
@huckjulius 你可以使用 Figma 直接调整图标矢量大小。或者你可以将其导出为 PDF 矢量文件，然后在代码中动态更改大小。 - user25917
3
最佳答案：将从SF Symbols中导出的文件拖放到Sigma中，然后单击矢量图像，接着在右侧面板上导出。完成。 - coolcool1994
我注意到Xcode处理PDF文件不是通过矢量图生成，而是生成一张图片。因此需要根据需要调整照片的大小。 - user25917
我们仍需要3种尺寸，您有在Figma中如何实现的想法吗？ - CyberMew
@CyberMew 我不确定你需要哪三个尺寸。如果Xcode资源目录要求三个插槽。只需在检查器面板上选择比例："单一比例"。此外，请检查调整大小："保留矢量数据"。如果只是您需要3种不同大小的图标。调整大小并导出三次即可。我所说的是SF符号的解决方法。有关PDF资产的更多信息，请在此处查看有用的博客：https://useyourloaf.com/blog/xcode-9-vector-images/ - user25917
8

正在进行的解决方案

我没有找到解决方案，所以我放弃了。但实际上，我在调查中走得相当远。或许比我更幸运的人能够想出如何继续我开始的工作:

在Apple文档中，它说，为了轻松浏览所有新的iOS 13 SF符号，您可以下载SF Symbols应用程序：https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

安装后，您可以进入应用程序 > SF Symbols > 显示包内容

enter image description here

从那里，在 content > Resources下，我们可以找到一个名为SFSymbolsFallback.ttf的有趣文件

enter image description here

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

enter image description here

Bingo？不要那么快...

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

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

enter image description here

然后呢？

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

其中一个解决方案可能是找到在XCode软件包中产生冲突的字体，并将其删除（这可能是导致问题的Symbols字体或San Francisco）。

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

如果有人想要继续调查，请留意。

希望这能对某些人有所帮助！

SFSymbol只是普通旧金山字体中的字符子集（符号字符）的名称。如果您在OSX上查看内置字体查看器中的旧金山字体，您将看到它包含特定Unicode范围内的符号作为字形。因此，当您尝试在iOS设备上安装它时，它会发生冲突：您即将替换本机系统字体，这肯定是苹果不允许您执行的操作。 - Psi
@Psi，这就是为什么我也尝试使用字体编辑器编辑字体名称。同时更改了字体系列名称和其他内容。然而，当我尝试安装它时，它仍然没有任何错误日志而失败。（可能有一个我忘记更改的标识符之类的东西） - Olympiloutre
在字体文件中，指定了字体系列。如果您没有更改原始字体数据（即字体系列），则无法安装该字体。 - Psi
@Psi，这就是我尝试过的，不仅仅是更改文件名，而是打开ttf文件并更改"fontFamilyName"等原始值...但考虑到免费字体编辑器相当古老（至少我找到的是），这很痛苦。我尝试了好几次，但总是失败。 - Olympiloutre
2
@Olympiloutre，有一个工具可以将SF Symbols导出为不同的格式 - https://github.com/davedelong/sfsymbols - Max Polkovnik
显示剩余7条评论
4
4
在SF Symbols 3.1中，选择“编辑” > “复制图像为...”，您可以选择PNG/点大小/像素比例，并将其粘贴到预览等应用程序中。
1
谢谢！但是为什么他们不提供PDF直接在Xcode中导入呢？ - heyfrank
3

您可以将新的iOS 13 SF Pro Rounded字体上传到您的项目中，然后在标签中启用该字体。

打开SF Symbols，单击所需符号，按cmd+c复制，回到您的项目，单击标签并按cmd+v粘贴。运行项目，应该会出现该图标。

祝好,

你不需要从SF Symbols应用程序中获取SFSymbolsFallback.ttf文件吗？还是说所有的SF Symbols图标已经包含在SF Pro Rounded字体中了？ - Crashalot
1
谢谢！ 我在我的 Mac 上打开了字体应用程序，搜索了 SF Pro Rounded 字体，右键单击 Light 变体（我想要的那个），并点击“在文件夹中显示”。我将该文件（SF-Pro-Rounded-Light.otf）拖入我的 XCode 项目中，并选中“必要时复制”。然后，我点击我的 UIButton，将标题设置为 Attributed（这很重要），并选择 SF Pro Rounded Light 作为字体。然后我在 SF Symbols 中找到了我想要的图标，选择它，按下 CMD+C 复制，切回到 XCode 并在 UIButton 标题的文本部分单击，按下 CMD+V 粘贴。 它奏效了！ - Scotch Design
2
SF Symbols是仅支持iOS 13或更高版本的系统 - 在iOS 12或更低版本上无法使用。您需要为这些较旧的操作系统使用替代方案。
请参见人机界面指南。
并非所有的SF Symbols都在iOS 13中得到支持。有两个Mac应用程序展示了这些符号 - 其中一个名为“SF Symbols”，其中包含了更全面的集合，另一个名为“San Fransymbols”，其中包含了较小的集合以及代码示例。在iOS13中，只有在“San Fransymbols”应用程序中列出的图标才可用。 - dcrow
1

1. 导入字体：

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

2. 选择字体：

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

3. 设置符号：

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

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

如何在SwiftUI项目中使用？ - Akash Shindhe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接