Meteor 移动版本未加载自定义字体/图标字体答案

【问题标题】：Meteor mobile build not loading custom font/icon fontsMeteor 移动版本未加载自定义字体/图标字体
【发布时间】：2020-04-21 00:12:51
【问题描述】：

我有一个使用 Material Design Icons 下载包的流星应用程序。为网络/移动浏览器运行时，所有图标都完美显示。但是，当我为 android 构建时，图标不显示。我在 /public 内的目录中有 css 和字体文件，因此它们可供客户端使用。 android 版本仍然不显示图标。这是 mdi css 的样子。

    @font-face {
      font-family: "Material Design Icons";
      src: url("/assets/mdi/css/materialdesignicons-webfont.eot?v=4.7.95");
      src: url("/assets/mdi/css/materialdesignicons-webfont.eot?#iefix&v=4.7.95") format("embedded-opentype"), url("/assets/mdi/css/materialdesignicons-webfont.woff2?v=4.7.95") format("woff2"), url("/assets/mdi/css/materialdesignicons-webfont.woff?v=4.7.95") format("woff"), url("/assets/mdi/css/materialdesignicons-webfont.ttf?v=4.7.95") format("truetype");
      font-weight: normal;
      font-style: normal;
    }

    .mdi:before,
    .mdi-set {
      display: inline-block;
      font: normal normal normal 24px/1 "Material Design Icons";
      font-size: inherit;
      text-rendering: auto;
      line-height: inherit;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

这个css文件和字体文件在同一个目录下，我试过使用绝对路径和相对路径，但还是不行。帮助。

【问题讨论】：

标签： android cordova meteor mobile fonts

【解决方案1】：

我解决的问题如下：

准备以下结构

public
  css
    material-design-icons.css
  fonts
    MaterialIcons-Regular.eot
    MaterialIcons-Regular.ttf
    ...other icons
client
  main.js

在 css 文件 material-design-icons.css 中设置字体

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/MaterialIcons-Regular.eot");
  /* For IE6-8 */
  src: local("☺"), url("/fonts/MaterialIcons-Regular.woff2") format("woff2"), url("/fonts/MaterialIcons-Regular.woff") format("woff"), url("/fonts/MaterialIcons-Regular.ttf") format("truetype"); }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
}

在 main.js 中导入 css 文件

import '../public/css/material-design-icons.css'

【讨论】：