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

Question

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

字体名称是myfont，扩展名的文件是(myfont.eot，.myfont.svg，myfont.ttf，myfont.woff，myfont.woff2)，当我这样做时，它们被复制到IOS和Android Assets 文件夹中 Cordova 建筑。但是，当我在设备上打开应用程序时，我看不到新字体显示。

当我从 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

在 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>