字体家族未应用于移动设备 [英] font-family not being applied on mobile devices

问题描述

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

I have a problem with the font-family property in my css. I have a title that I want to style using a particular font. I am using @fontface. On my desktop it works fine, but on iPhone and iPad I get some standard font (I think it might be times but I am not sure). I did some research and tried different formats otf ttf etc... but still wasn't working. Finally, fed up, I've tried just changing fonts on my css to other system fonts and the phone is still not recognising them. Basically it's stuck with one font. Here is a couple of examples of fonts on the desktop:

前三个图像是我在桌面版本上应用的不同字体系列.有使用@fontface的系统字体，google字体和自定义字体.所有工作.

The three first images are different font-families I have applied on the desktop version. There is a system font, a google font and a custom font using @fontface. All work.

第四个图像是每种字体在iPhone和iPad上都显示的图像.总是一样的.到底发生了什么事?任何建议表示赞赏.

The fourth image is what shows both on iPhone and iPad for each one of the fonts. Always the same one. What on earth is happening? Any suggestions appreciated.

我的自定义字体代码为:

My code for the custom font is:

@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

有一个小小的动画可以使字母淡入，但是我不认为这会干扰字体家族(并且仅在移动设备上?).

There is a little animation that fades the letters in, but I wouldn't have thought that would interfere with the font-family (and only on mobile devices?).

如果您想查看该网站，请访问alicesoyer.com

If you want the check out the web site it's alicesoyer.com

对于字体系列，只有一个规则，但是如果您在台式机和移动设备上测试该网站(我现在正在iPhone和iPad上进行测试)，您将看到不同的字体系列.谢谢

there is only one rule for the font-family, but if you test the site on desktop and on mobile (i am testing on iPhone and iPad for now) you will see different families. Thanks

推荐答案

很可能是由于对移动设备没有正确的字体格式而引起的，请尝试使用类似

Most likely caused by not having the right font format for mobile devices, try using a service like https://www.fontsquirrel.com/tools/webfont-generator to generate the correct code for the fonts you're using

这篇关于字体家族未应用于移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！