html - font-family 未在移动设备上应用
<p><p>我的 <code>css</code> 中的 font-family 属性有问题。我有一个想要使用特定字体设置样式的标题。我正在使用 <code>@fontface</code>。在我的桌面上它工作正常，但在 <code>iPhone</code> 和 <code>iPad</code> 上我得到了一些标准字体(我认为可能是时间，但我不确定)。我做了一些研究并尝试了不同的格式 otf ttf 等......但仍然无法正常工作。最后，受够了，我尝试将我的 css 上的字体更改为其他系统字体，但手机仍然无法识别它们。基本上它被一种字体卡住了。以下是桌面上的几个字体示例:</p>
<p> <a href="/image/MlwMv.png" rel="noreferrer noopener nofollow"><img src="/image/MlwMv.png" alt="enter image description here"/></a> </p>
<p>前三张图片是我在桌面版上应用的不同字体系列。有一个系统字体、一个谷歌字体和一个使用 <code>@fontface</code> 的自定义字体。所有工作。</p>
<p>第四张图片分别显示在 <code>iPhone</code> 和 <code>iPad</code> 上的每种字体。总是一样的。到底发生了什么？任何建议表示赞赏。</p>
<p>我的自定义字体代码是:</p>
<pre><code>@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;
}
</code></pre>
<p>html</p>
爱丽丝·索耶
地球上的天空
<p>有一个小动画可以淡入字母，但我没想到会干扰字体系列(并且仅在移动设备上？)。</p>
<p>如果您想查看网站，请访问 alicesoyer.com</p>
<p>字体系列只有一个规则，但如果您在桌面和移动设备上测试网站(我目前正在 iPhone 和 iPad 上测试)，您会看到不同的系列。谢谢</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>很可能是由于没有适合移动设备的字体格式，请尝试使用 <a href="https://www.fontsquirrel.com/tools/webfont-generator" rel="noreferrer noopener nofollow">https://www.fontsquirrel.com/tools/webfont-generator</a> 之类的服务为您正在使用的字体生成正确的代码</p></p>
<p style="font-size: 20px;">关于html - font-family 未在移动设备上应用，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/40843728/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/40843728/
</a>
</p>
页:
[1]