简体繁体 English

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

[英]How to use SF Symbols in iOS 12 and below?

原文 2019-06-04 18:06:58 6 8 ios/ human-interface/ sf-symbols

I am updating the icons in my app.我正在更新我的应用程序中的图标。 After I heard Apple released an icon font named SF Symbols with iOS 13, I was wondering if I can only use them in iOS 13 or if it is possible to use them in lower versions of iOS too.在听说 Apple 在 iOS 13 中发布了一种名为SF Symbols的图标字体后，我想知道我是否只能在 iOS 13 中使用它们，或者是否也可以在较低版本的 iOS 中使用它们。

If I want to use them, do I have to implement a fallback for older versions?如果我想使用它们，我是否必须为旧版本实现回退？

8 个解决方案

You can not use SFSymbols natively in iOS versions older than iOS 13 (see Apple's Human Interface Guidelines for SF Symbols).您不能在早于 iOS 13 的 iOS 版本中本地使用 SFSymbols（请参阅 Apple 的 SF 符号人机界面指南）。

However, if you are interested in using the graphics you can use the SFSymbols app to export SVG versions of the icon.但是，如果您对使用图形感兴趣，可以使用SFSymbols 应用程序导出图标的 SVG 版本。 Then use some graphics tool to convert them to PNG icons you can import into your asset catalog.然后使用一些图形工具将它们转换为 PNG 图标，您可以导入到您的资产目录中。

I am updating the icons in my app.我正在更新应用程序中的图标。 After I heard Apple released an icon font named SF Symbols with iOS 13, I was wondering if I can only use them in iOS 13 or if it is possible to use them in lower versions of iOS too.听说Apple在iOS 13上发布了名为SF Symbols的图标字体后，我想知道我是否只能在iOS 13中使用它们，或者是否也可以在较低版本的iOS中使用它们。

If I want to use them, do I have to implement a fallback for older versions?如果要使用它们，是否必须对旧版本实施后备？

You can open .svg use Figma.您可以使用 Figma 打开 .svg。 Then select the Regular-M and export as PDF or PNG.然后选择Regular-M 并导出为PDF 或PNG。

Work around in progress解决中

I did not manage to find the solution, I gave up, but actually I went pretty far in investigating.我没有设法找到解决方案，我放弃了，但实际上我在调查方面走得很远。 Maybe someone luckier than me will be able to figure out hpw to continue the work I started:也许比我更幸运的人能够找出 hpw 来继续我开始的工作：

In Apple documentation, it is said that, in order to easily browse all the new iOS 13 SF Symbols, you can dowmload the SF Symbols app : https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/苹果文档中说，为了轻松浏览所有新的iOS 13 SF Symbols，您可以下载SF Symbols应用程序： https : //developer.apple.com/design/human-interface-guidelines/sf-符号/概述/

Once instaled you can go in Application > SF Symbols > showPackage content安装后，您可以进入Application > SF Symbols > showPackage content

From there, under content > Resources we can find an interesting file named SFSymbolsFallback.ttf从那里，在content > Resources我们可以找到一个名为SFSymbolsFallback.ttf的有趣文件

And if you try to open this file on https://fontdrop.info/ you can see that it contains all the font glyphs that are released in iOS 13 as SF Font, with associated unicodes如果您尝试在https://fontdrop.info/上打开此文件，您会看到它包含在 iOS 13 中作为 SF 字体发布的所有字体字形，以及相关联的unicode

Bingo?答对了？ not so fast...没那么快...

From there I tried to import this .ttf into my project in iOS 12, on XCode 10.2.1, but it seems that it is never properly imported.从那里我尝试将此 .ttf 导入到我在 iOS 12 中的项目中，在 XCode 10.2.1 上，但它似乎从未正确导入。 It is not retrievable in the list of available fonts when calling UIFont.familyNames调用UIFont.familyNames时无法在可用字体列表中检索

More interesting, if I try to import this font in Font Book app, I receive a warning that says that it contains duplication , some kind of conflict with an existing font更有趣的是，如果我尝试在Font Book应用程序中导入此字体，我会收到一条警告，指出它包含重复，与现有字体存在某种冲突

From there?从那里？

My guess is that there is another font that prevent SF Symbols to be installed, in Font Book and on Xcode.我的猜测是，在 Font Book 和 Xcode 中，还有另一种字体会阻止安装 SF Symbols。

One of the solution could be to find the one that is in conflict in XCode package and delete it ( this may be Symbols font or San Francisco that are causing problems idk)解决方案之一可能是在 XCode 包中找到冲突的那个并将其删除（这可能是导致问题 idk 的Symbols字体或San Francisco ）

I also tried to open the font file with a font editor and change its Name and family Name without success.我还尝试使用字体编辑器打开字体文件并更改其名称和系列名称，但没有成功。

If anyone want to continue investigating..如果有人想继续调查..

Hope this can help someone !希望这可以帮助某人！

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

SF Symbols is a system only supported on iOS 13 or later - it's not possible to use them on iOS 12 or below. SF Symbols 是仅在 iOS 13 或更高版本上支持的系统 - 无法在 iOS 12 或更低版本上使用它们。 You'll need to use fallbacks for those older operating systems.您需要为那些较旧的操作系统使用回退。

See Human Interface Guidelines请参阅人机界面指南

You can upload the new ios 13 sf-pro-rounded font to your project.您可以将新的 ios 13 sf-pro-rounded 字体上传到您的项目中。 Then enable that font in your label.然后在标签中启用该字体。

Open sf symbols, click on the smbol you want, cmd+c, go to your project, click on a label cmd+v.打开sf符号，点击你想要的符号，cmd+c，进入你的项目，点击一个标签cmd+v。 Run the project, and there should be the icon运行项目，应该有图标

cheers,干杯，

From Human Interface Guidelines 从人机界面指南

You can use SF Symbols in apps running in iOS 13 and later, watchOS 6 and later, and tvOS 13 and later. 您可以在iOS 13及更高版本，watchOS 6及更高版本以及tvOS 13及更高版本中运行的应用程序中使用SF符号。 To browse the full set of symbols, download the SF Symbols app. 要浏览完整的符号集，请下载SF Symbols应用程序。

1. Import the font: 1. 导入字体：

Open the Fonts app, search for the SF Pro Rounded font, right-click on the variant you want (eg Light) and click Show in Finder.打开字体应用程序，搜索 SF Pro Rounded 字体，右键单击您想要的变体（例如 Light），然后单击在 Finder 中显示。 Drag that file (eg SF-Pro-Rounded-Light.otf) into your XCode project and tick "Copy if necessary".将该文件（例如 SF-Pro-Rounded-Light.otf）拖到您的 XCode 项目中并勾选“如有必要，请复制”。

2. Select the font: 2. 选择字体：

Select your UILabel or UIButton, set the Title to Attributed (this is important) and select the font you just copied (eg SF Pro Rounded Light).选择您的 UILabel 或 UIButton，将 Title 设置为 Attributed（这很重要）并选择您刚刚复制的字体（例如 SF Pro Rounded Light）。

3. Set the symbol: 3.设置符号：

Find the icon you want in SF Symbols, select it, press CMD+C to copy, switch back to XCode and click in the text part of the UILabel or UIButton Title and press CMD+V to paste.在SF Symbols中找到你想要的图标，选中它，按CMD+C复制，切换回XCode在UILabel或UIButton Title的文本部分点击，按CMD+V粘贴。

A huge thank you to Dave van Wijk for the solution!非常感谢 Dave van Wijk 的解决方案！

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