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

Question

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

三个第一张图片是我在桌面版上应用的不同字体系列。使用iPad有一个系统字体，一个谷歌字体和一个自定义字体。一切工作。

第四张图片是@fontface和iPhone两种字体的显示内容。总是一样的。究竟发生了什么？任何建议表示赞赏。

自定义字体的代码是：

iPad

html

                                     爱丽丝索耶                                                       地球上的天空                          

有一个小动画会淡化字母，但我不会想到会干扰字体系列（并且仅限于移动设备上？）。

如果你想查看网站，那就是alicesoyer.com

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

Answer 1

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

Answer 2

尝试所有这些格式（只是示例font-family）..

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

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

Answer 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 */
} 

为了保存代码行，是的，它仍然可以在台式机上使用，但在移动设备上失败。