Question

我有一个带阿拉伯语自定义字体的phonegap项目。在chrome中，字体显示正确，也可以在物理Android设备中显示，但在iPhone中安装的phonegap应用程序中，字体没有任何影响。

以下是一般结构的phonegap项目： - 包含名为fonts.css的css文件的css文件夹 - fonts文件夹，其中包含名为QCF_P001.TTF

的TTF文件

我所拥有的环境如下： - 在Window 10中开发 - 物理iPhone 6设备 - 来自App Store的phonegap app 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设备的快照 enter image description here

Answer 1

尝试在字体包中添加其他格式：

@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字体生成器

phonegap项目中的自定义字体

1 个答案: