我有一个带有阿拉伯语自定义字体的phonegap 项目。在 Chrome 中，字体可以正确显示，在物理 Android 设备中也可以正确显示，但在 iPhone 中安装的 PhoneGap 应用程序中，字体没有影响。
下面是phonegap项目的一般结构: - css 文件夹，其中包含名为 fonts.css 的 css 文件 - 字体文件夹，其中包含名为 QCF_P001.TTF 的 TTF 文件
我的环境如下: - 在 Window 10 中开发 - 实体 iPhone 6 设备 - App Store 中的 PhoneGap 应用程序版本 1.7.1
这是CSS代码:
@font-face{
font-family: "Uthman";
src: url('../fonts/QCF_P001.TTF') format('truetype');
}
.aya {
font: 18px "Uthman", Arial;
text-align: right;
}
这是 HTML 代码的一部分:
<body ontouchstart="">
<header class="bar bar-nav">
<h1 class="title">Fonts Project</h1>
</header>
<div class="content">
<div class="card">
<h1 class="aya">65432</h1>
</div>
</div>
</body>
附图是 chrome、android 设备和 iPhone 设备的快照
最佳答案
尝试将其他格式添加到字体包:
@font-face {
font-family: 'QCF_P001';
src: url('../fonts/QCF_P001.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/QCF_P001.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/QCF_P001.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/QCF_P001.svg#QCF_P001') format('svg'); /* Legacy iOS */
}
要从QCF_P001.ttf生成网络字体，请转到Font Squirrel字体生成器
关于cordova - PhoneGap 项目中的自定义字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38940623/