font-family 未在移动设备上应用答案

【问题标题】：font-family not being applied on mobile devicesfont-family 未在移动设备上应用
【发布时间】：2017-04-12 03:23:41
【问题描述】：

我的css 中的font-family 属性有问题。我有一个想要使用特定字体设置样式的标题。我正在使用@fontface。在我的桌面上它工作得很好，但在iPhone 和iPad 上我得到了一些标准字体（我想可能是时候了，但我不确定）。我做了一些研究并尝试了不同的格式 otf ttf 等......但仍然无法正常工作。最后，受够了，我尝试将我的 css 上的字体更改为其他系统字体，但手机仍然无法识别它们。基本上它被一种字体卡住了。以下是桌面上的几个字体示例：

前三张图片是我在桌面版上应用的不同字体系列。有系统字体、google 字体和使用@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 上测试），您会看到不同的系列。谢谢

【问题讨论】：

你能添加一些代码吗？
我认为这会有所帮助Font face not embedding on mobile safari iphone-ipad
通常需要5个文件扩展名：.ogg、.woff、.wof2、.eot、.ttf；使用来自@jezE answer的链接；）
系统字体不加载怎么办，你是怎么解决的？

标签： html ios css iphone fonts

【解决方案1】：

很可能是由于没有适合移动设备的字体格式，请尝试使用https://www.fontsquirrel.com/tools/webfont-generator 等服务为您正在使用的字体生成正确的代码

【讨论】：

【解决方案2】：

尝试所有这些格式（仅示例字体系列）..

@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');

}
使用它应该工作的所有这些格式，因为某些浏览器需要不同的格式。

【讨论】：

【解决方案3】：

我想补充一下@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 */
}

为了节省代码行数，是的，它仍然可以在桌面上运行，但在移动设备上却失败了。

【讨论】：