@font-face 在 iPhone 版本的 Safari 上已弃用。我的替代方案是什么？答案

【问题标题】：@font-face is deprecated on the iPhone version of Safari. What are my alternatives?@font-face 在 iPhone 版本的 Safari 上已弃用。我的替代方案是什么？
【发布时间】：2019-06-15 18:33:34
【问题描述】：

根据Apple's documentation，@font-face 不推荐用于 iPhone 版本的 Safari。 iPhone 只包含11 fonts、AFAIK，而且无论如何，我需要一个漂亮的黑色字体来用于我正在构建的应用程序。我将生成随机文本，所以图像不是一个选项。我有什么选择？我是否坚持使用像 Cufón 这样的 JavaScript 解决方案？

【问题讨论】：

标签： iphone css safari webkit font-face

【解决方案1】：

好吧，刚刚发现@font-face 现在支持当前的 iPhone 和 iPad。上面链接的文档，即Safari CSS Reference 显示了如何嵌入字体的示例。

@font-face {
    font-family: "MyFamilyname", cursive [, ...];
    font-style: normal [, ...];
    font-variant: normal[, ...];
    font-weight: bold[, ...];
    font-stretch: condensed[, ...]; /* Not supported */
    font-size: 12pt;[, ...] /* Not supported */
    src: local("Font Family Name"),
        url(http://..../fontfile.ttf) format("truetype"),
        url(http://..../fontfile.ttf) [, ...];
}

只是想确保其他和我一样阅读这篇文章的人知道当前状态。

【讨论】：

如果我想将字体文件存储在应用程序中，这样就不需要互联网连接来加载字体，我会为 font-face 的“URL”参数设置什么？请在此处帮助解决我的字体问题（我使用 font-face 的 html 文件在我的文档目录中，字体文件本身在我的包（资源文件夹）中：stackoverflow.com/questions/9014211/…

【解决方案2】：

您实际上可以使用@font-face。您只需要使用 SVG 字体。有一些实用程序可以将 TTF 转换为 SVG

更多信息请参见此处（不是我的帖子）

http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

【讨论】：

很棒的帖子。这是一个很好的解决方案，可以让@font-face 在所有主流浏览器中工作。
这就是我的方式。我个人认为这比 Cufon 更好，因为它开箱即用，并且一定会以某种方式支持 GPU。谢谢！
如果你支持向后的问题是 Safari 3 不支持 SVG，虽然它支持 OTF 字体。

【解决方案3】：

Cufón 确实是您可以开箱即用的唯一解决方案。它具有在 iPhone 上相当快的额外优势，因为它使用画布而不是内联 SVG，并且生成的字体通常比原始字体小 60-80% 左右（压缩时）。

【讨论】：

我以前用过 Cufón 并且喜欢它。我想快速连续显示一系列数字，我不认为 Cufón 可以在转换后更改文本。
在将 Cufon'd 元素的 innerHTML 设置为不同值后立即调用 Cufon.refresh("selector") 效果很好——我的桌面上没有明显的闪烁，但你需要在移动设备上进行测试，看看它是否足够快地执行更改。
啊，对。我不知道你可以在 Cufón 做到这一点。谢谢！
如果只是为了更好的装饰，我觉得SVG方案更好，因为它也有像文本一样的优点。

【解决方案4】：

我将生成随机文本，所以图片不是一个选项。

您可以使用服务器上的图形库并动态绘制图像。我做过类似的事情，它可以工作，但当然这取决于你想要绘制的文本数量。另外，如果文本至少有时重复，您可以缓存图像。

【讨论】：

我需要快速连续显示随机数，范围约为 -10k 到 10k。缓存太多。也许我需要显示各个数字 0-9 的图像组合。
对于数字，我会使用 CSS 精灵：使用 -0123456789 生成一个 PNG，然后将每个数字作为背景放在一个固定大小的 div 中。只需更改垂直偏移即可更改每个插槽中出现的数字。既好又快，通过 HTTP 获取一个简单的对象，然后将其缓存在整个过程中，除了提供一个静态图像之外没有额外的服务器负载。