将自定义字体添加到cordova项目 [英] add custom font to a cordova project

问题描述

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

I have a custom fonts that I would like to use in my app.

字体名称为myfont，扩展名为(myfont.eot，.myfont.svg，myfont.ttf，myfont.woff，myfont.woff2)的文件，在我执行操作时将它们复制到IOS和android资产文件夹中科尔多瓦建立.但是，当我在设备上打开应用程序时，看不到新的字体显示.

The font name is myfont and the files with the extension are (myfont.eot,.myfont.svg,myfont.ttf,myfont.woff,myfont.woff2) and they are copied to IOS and android asset folder when I do a cordova build. However, when I open the app on the device I don't see the new font display.

当我在Mac上通过Safari浏览器运行应用程序时，确实看到了新的显示形式.

I do see the new fond display when I run the app from safari browser on the mac.

这是我的CSS文件中的代码段

here is the snippet from my CSS file

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

要在android和iOS设备上查看此新字体，还需要做些其他事情

Is there something else I need to do in order to see this new font on the android and iOS device

谢谢

推荐答案

在CSS中使用@font-face.

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

在顶部的css文件中添加代码. 然后，您可以在任何需要的地方轻松使用字体家族my-font.

Add code to your css file at top. And then you can easily use font-family my-font where ever you need.

示例:

CSS

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

HTML

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

这篇关于将自定义字体添加到cordova项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！