logo标签列表

@font-face在iPhone版Safari中已经弃用。有哪些替代方案？

iphonecsssafariwebkitfont-face
11

根据苹果公司的文档，@font-face已在iPhone版Safari中停用。据我所知，iPhone仅包含11种字体，而我需要一个漂亮的黑体字体来制作应用程序。由于我将生成随机文本，因此图像不是选项。我有哪些替代方案？我是否被迫使用像Cufón这样的JavaScript解决方案？

4个回答
18

我刚刚发现当前的iPhone和iPad已经支持@font-face。上面链接的文档是Safari CSS参考，其中包含了嵌入字体的示例。

@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文件位于我的文档目录中，而字体文件本身位于我的捆绑包（资源文件夹）中）：https://dev59.com/eF_Va4cB1Zd3GeqPV7TR#9014404 - Albert Renshaw
17
很棒的文章。这是一个伟大的解决方案，可以让@font-face在所有主要浏览器中工作。 - samvermette
这是我选择的方式。我个人认为这比Cufon更好，因为它可以直接使用，并且很可能有GPU支持。谢谢！ - Paul Shapiro
如果你需要向后兼容，问题在于Safari 3不支持SVG，但它支持OTF字体。 - vernonk
3

Cufón是目前唯一可直接使用的解决方案。它的优点在于使用画布而不是内联SVG，因此在iPhone上速度较快，生成的字体通常比原始字体（经压缩后）小60-80％。

我以前用过Cufón并且很喜欢它。我想要快速连续地显示一系列数字，但我认为Cufón无法在转换后更改文本。 - Andrew Hedges
在将 Cufon'd 元素的 innerHTML 设置为不同的值后立即调用 Cufon.refresh("selector") 是可以正常工作的 - 在我的桌面上没有明显的闪烁，但您需要在移动设备上进行测试以查看它是否足够快地执行更改。 - Nathan de Vries
啊，好的。我不知道你可以在Cufón中这样做。谢谢！ - Andrew Hedges
如果只是为了更好的装饰效果，我觉得SVG方案更好，因为它具有像文本一样的行为优势。 - mikelikespie
0
我将生成随机文本，因此图像不是一个选项。
您可以在服务器上使用图形库并动态绘制图像。我曾经做过类似的事情，它可以工作，但当然这取决于您想要绘制的文本数量。如果文本至少有时重复，您可以缓存图像。
我需要快速连续显示随机数字，范围大约在-10k到10k之间。缓存太多了。也许我需要显示由单个数字0-9的图像组合而成的数字。 - Andrew Hedges
2
对于数字，我会使用CSS精灵：生成一个包含-0123456789的PNG图像，然后将每个数字作为背景放在固定大小的div中。只需更改垂直偏移量即可更改出现在每个插槽中的数字。非常快速和简单，是通过HTTP获取的一个简单对象，然后可以在整个缓存期间进行缓存，而且除了提供一个静态图像之外，没有额外的服务器负载。 - James Sutherland
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接