将自定义字体添加到cordova项目中

Question

我有自定义字体,我想在我的应用程序中使用.

字体名称是myfont,扩展名为(myfont.eot,.myfont.svg,myfont.ttf,myfont.woff,myfont.woff2),当我执行cordova构建时,它们被复制到IOS和android资源文件夹.但是,当我在设备上打开应用程序时,我看不到新的字体显示.

当我从mac上的safari浏览器运行应用程序时,我确实看到了新的喜欢显示.

这是我的CSS文件的片段

html, body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: 'myfont';
    font-size: 16px;
}

为了在Android和iOS设备上看到这个新字体,我还需要做些什么

谢谢

Answer 1

@font-face在CSS中使用.

@font-face {
  font-family: "my-font";
  src: url("../assets/myfonts.ttf");  // Give relative path to your css file.
}

将代码添加到顶部的css文件中.然后,您可以my-font在任何需要的地方轻松使用font-family .

例:

CSS

.class-myfont { 
    font-family: my-font;
}

HTML

<span class="class-myfont">Hello there</span>