表情符号在 IOS 7 上的字体大小不会超过 16 像素答案

【问题标题】：Emojis won't scale beyond 16px font-size on IOS 7表情符号在 IOS 7 上的字体大小不会超过 16 像素
【发布时间】：2013-10-31 08:51:46
【问题描述】：

我们正在使用 UIWebView 中的网页在 phonegap 中制作应用程序，在这个产品中我们允许苹果的表情符号，我们将 AppleColorEmoji 字体应用到这些表情上，从而可以缩放它们。

在 iPad 和 iPhone 上更新到 IOS 7 后，以前允许缩放到所需大小的 AppleColorEmoji 字体的表情符号不再缩放到超过 16 像素的字体大小（它可以缩放更小）。它仍然可以在 IOS 的设备上按预期进行扩展

我担心这是他们在 IOS 7 中故意引入的。有没有其他人遇到过这个问题，甚至可能有解决方案？

【问题讨论】：

我知道，苹果现在已经完全否定了将表情符号作为可缩放字体的全部意义，使其不可缩放！再一次，你最好还是改用图片。
问题是，据我了解，如果没有从 Apple 获得使用权（不是免费的），我就无法使用 Apple 的表情符号图像。
Apple 已开始下架使用表情符号的应用程序，因此请注意。您可以购买其他图标，但质量通常不太好。
我的理解是他们只在未经许可的情况下使用表情符号的图像版本对应用程序进行操作。 AppleColorEmoji 字体解释为笑脸的 unicode 字符是 iPad 本身处理的。
您可以购买其他表情符号图像用于商业用途。如果你想使用苹果的，那么你必须遵守他们的限制——不超过 16px！！！

【解决方案1】：

在 Webkit 中，在 HTML 元素中缩放这样的表情符号：

<span style="-webkit-transform: scale(5); position: absolute;">&#x1f47f;</span>

上述的缺点包括定位需要调整大小，因为transform 必须应用于位置为absolute 的元素。如果表情符号转换过大，也可能发生像素化。

【讨论】：

非常感谢！我使用您的信息制作了一个不错的跨浏览器解决方案。 font-family: "AppleColorEmoji","Segoe UI Symbol";字体粗细：100； -webkit-transform：规模（1.9）； -moz 变换：比例（1.9）；变换：比例（1.9）；位置：绝对；
@JakeWolpert 你如何使表情符号的容器适合？比如我有<div id="container"><span style="transform: scale(5)" ...>&#x1f600;</span></div>，如何让容器适合？

【解决方案2】：

如果这对任何人来说仍然很有趣（我忘了这仍然是开放的），那么“解决方案”是将 iPhone 的元标记设置为：

<meta name="viewport" content="width=320"/>

这可确保 iPhone 将内容放大以适应 640 像素（或更多）的屏幕，而 16 像素大小的表情符号现在将是原来的两倍。但是，这只会将它们放大到合理的大小。对于想要完全控制字体大小的人来说，它仍然无法解决。

【讨论】：

【解决方案3】：

现在，您可以使用来自Google Noto、EmojiOne、Twemoji 或Emojidex 的图像文件。

即使您没有缩放问题，这也可以确保表情符号字符在每个浏览器中都能正确显示。

【讨论】：

【解决方案4】：

iOS WebKit https://trac.webkit.org/changeset/188737 修复了这个问题（但尚未发布）。

【讨论】：

【解决方案5】：

看起来这个问题在 iOS 10 中已修复。

【讨论】：

【解决方案6】：

我在这里有一个很好的场景来了解它是否是操作系统：

我最初的假设是它与视口大小有关，但有趣的是，在使用 30 针电缆将 4s/9.3.5 连接到 safari 浏览器工具后，表情符号比例的边界框，而不是字形在屏幕上。我无法通过 CSS 实现这一点。

¯\_(ツ)_/¯ 我会在5s更新后更新。

编辑：一旦我将 5s 更新到 10.0，表情符号就会调整大小。看起来是 iOS 版本的问题。

【讨论】：

【解决方案7】：

如果要将表情符号字符缩放超过 16 像素，则必须使用 AppleColorEmoji 字体。这是唯一可以将表情符号缩放到 16 像素以上的可用字体。

【讨论】：

如果您重新阅读该问题，您可以看到我使用的是 AppleColorEmoji 字体。问题是，从 iOS 7 开始，Apple 不再支持将字体缩放到 16 像素以上。