logo标签列表

移动设备上未应用字体族。

htmlioscssiphonefonts
6

我在我的 css 中使用了 font-family 属性，但出现问题。 我想使用特定字体样式来设计一个标题。我使用了 @fontface。在我的桌面电脑上，它可以正常工作，但在 iPhone 和 iPad 上，我得到了一些标准字体（我认为可能是 Times 字体，但我不确定）。我做了一些研究并尝试了不同的格式，如 otf、ttf 等，但仍然不起作用。最后，我厌倦了，试图只是更改我的 css 中的字体以使用其他系统字体，但手机仍无法识别它们。基本上，它被困在一个字体中。以下是一些桌面上字体的示例：

输入图像描述

前三个图像是我在桌面版本上应用的不同字体系列。有系统字体，谷歌字体和使用 @fontface 的自定义字体。所有都可以运行。

第四个图像是每个字体在 iPhone 和 iPad 上显示的情况。总是相同的情况。到底发生了什么？任何建议都将不胜感激。

我的自定义字体代码如下：

@font-face {font-family: QuaestorSans;
          src:  url("fonts/QuaestorSans-Rg.otf") format("opentype"),
                url("fonts/QuaestorSans.ttf") format("opentype");
}


.title{
  font-family: QuaestorSans;
  font-size: 2em;
  letter-spacing: 1.4px;
}

HTML

有一个小动画会淡入字母，但我认为这不会影响字体（只在移动设备上？）。

如果你想查看网站，可以访问alicesoyer.com

字体族只有一个规则，但是如果你在桌面和移动设备上测试网站（我现在正在iPhone和iPad上测试），你会看到不同的字体族。谢谢

你能添加一些代码吗？ - ADH - THE TECHIE GUY
我认为这会有所帮助 在移动Safari iPhone-iPad上无法嵌入字体。 - Dan Triva
通常你需要5个文件扩展名：.ogg，.woff，.wof2，.eot，.ttf；使用@jezE答案中的链接 ;) - Toni Michel Caubet
系统字体没有加载，你是怎么解决的？ - wcndave
3个回答
3
嗨，我知道你回答这个问题已经有一段时间了，但我也遇到了同样的问题。我已经将我的TFF文件转换为EOT、WOFF、WOFF2和SVG格式，但字体仍无法在我的iPhone上加载，但在我的笔记本电脑上可以正常工作。 - kd12345
@kd12345，你的CSS文件中字体定义正确吗？你是本地加载还是通过CDN加载的？ - Jez Emery
我已经尝试了本地和通过Firebase存储，似乎都可以工作，但在Safari中字体看起来与Chrome上不同（我正在使用Futura）。 - kd12345
2
我想补充一下@Venu Madhav和@JezEmery的答案，除了fontsquirel外，您还可以尝试Transfonter。
如果您在网页上使用多种字体，请将每种字体都放在...中。
@font-face {
  //font number 1 here
}
@font-face {
 // font number 2 here and so on
}

因为我尝试过了

@font-face {
font-family: 'LatoRegular';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
     url('../fonts/LatoRegular.woff2') format('woff2'),
     url('../fonts/LatoRegular.woff') format('woff'),
     url('../fonts/LatoRegular.ttf') format('truetype'),
     url('../fonts/LatoRegular.svg#LatoRegular') format('svg');

font-family: 'font 2';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
     url('../fonts/LatoRegular.woff2') format('woff2'),
     url('../fonts/LatoRegular.woff') format('woff'),
     url('../fonts/LatoRegular.ttf') format('truetype'),
     url('../fonts/LatoRegular.svg#LatoRegular') format('svg');

font-family: 'font 3';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
     url('../fonts/LatoRegular.woff2') format('woff2'),
     url('../fonts/LatoRegular.woff') format('woff'),
     url('../fonts/LatoRegular.ttf') format('truetype'),
     url('../fonts/LatoRegular.svg#LatoRegular') format('svg');

/* ----- so on */
}

为了节省代码行数，这个方法在桌面端可以正常工作，但在移动端失败了。
1

尝试使用所有这些格式（只是示例字体）...

@font-face {
font-family: 'LatoRegular';
src: url('../fonts/LatoRegular.eot');
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
     url('../fonts/LatoRegular.woff2') format('woff2'),
     url('../fonts/LatoRegular.woff') format('woff'),
     url('../fonts/LatoRegular.ttf') format('truetype'),
     url('../fonts/LatoRegular.svg#LatoRegular') format('svg');

如果使用所有这些格式，它应该可以工作，因为一些浏览器需要不同的格式。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接