当前位置 : 主页 > 手机开发 > cordova >

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

来源:互联网 收集:自由互联 发布时间:2021-06-10
我有自定义字体,我想在我的应用程序中使用. 字体名称是myfont,扩展名为(myfont.eot,.myfont.svg,myfont.ttf,myfont.woff,myfont.woff2),当我执行cordova构建时,它们被复制到IOS和android资源文件夹.但是,当我
我有自定义字体,我想在我的应用程序中使用.

字体名称是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设备上看到这个新字体,我还需要做些什么

谢谢

在CSS中使用@ font-face.

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

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

例:

CSS

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

HTML

<span class="class-myfont">Hello there</span>
网友评论