html - 字体系列未应用于移动设备

标签 html ios css iphone fonts

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

enter image description here

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

第四张图片是在 iPhoneiPad 上显示的每种字体。总是一样的。到底发生了什么?任何建议表示赞赏。

我的自定义字体代码是:

@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 上测试),您会看到不同的系列。谢谢

最佳答案

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

关于html - 字体系列未应用于移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40843728/

相关文章:

html - 将文本居中到外部 div 而不与其他 div 重叠

javascript - 防止 IMG 调整大小和不一致的 Div 高度变化?

ios - 如何转换 Tableview 单元格中的删除选项

iphone - iOS:如何打开有动画效果的相机?

ios - 刷新 token 的正确方法

html - 如何制作响应式 Bootstrap 下拉按钮?

javascript - 是否有任何技巧可以通过 css 或 javascript 卡住相对于容器的 html 元素

javascript - 延迟主体的渲染,直到 Javascript 变量可用

html - 如何在边框 Angular 材上固定 Mat-label

html - 将 div 定位在中心但具有动态高度?