如何使用材料字体和图标本地与材料-用户界面？

Question

我没有互联网访问时，运行我的材料-ui应用程序，所以我想安装本地材料设计图标和字体。我一直未能做到这一点。例如，我试图通过以下方式使用这些图标：

1. 下载图标字体并将其复制到“我的样式”文件夹
2. 引用我的应用程序的main.css中的字体，如谷歌所建议的
3. 在我的应用程序中导入main.css (我使用webpack) 但是，FontIcon组件没有显示图标。

在我的main.css中有：

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

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

在index.js中，我有：

import "./assets/styles/main.css";

Answer 1

根据css-loader的文档

@import and url(.)将被解释为请求()，并将由css-加载程序解析。

因此，如果您正在使用css-加载程序，这应该是“开箱即用”。确保您的CSS加载程序看起来有点像：

{ test: /\.css$/, loader: "style-loader!css-loader" }

所以..。如果你已经这么做了..。

既然你在用webpack，你可以看看webpack文件加载器。您需要将其包含在webpack配置中的loaders数组中，该数组位于module对象中。

若要安装文件处理程序，请执行以下操作：

npm install file-loader --save-dev

和一个样本装载机：

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'file?name=material-design-icons/iconfont/[name].[ext]'
}

您可能需要在CSS中使用name属性和包含字体的路径。上述加载程序中的名称目录是文件加载程序转储文件的地方(如果定义了文件，通常是outpath.path在webpack.config.js中)。运行webpack，看看它给你什么。

或者..。

您还可以嵌入字体文件作为基-64编码的数据-uri blob。要做到这一点，请安装url-loader并使用类似于以下加载器的内容。这一次，您需要指定mime类型，因此每个文件都需要自己的加载程序，并具有各自的mime类型。

{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65536&mimetype=application/font-woff&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65536&mimetype=application/font-woff2&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65536&mimetype=application/octet-stream&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65536&mimetype=application/vnd.ms-fontobject&name=material-design-icons/iconfont/[name].[ext]' }

但是，请注意，我已经为每个文件设置了64K的限制，因为浏览器对数据的支持-uri blob超过64K并不是很好，尽管您可以删除它。

我个人建议尝试一下文件加载器方法。

如果你还有问题..。

您应该能够在您的CSS中require您的文件。将此与上面的文件加载程序结合使用。require返回到资产的路径，因此可以在CSS属性的值内要求。最终会变成这样：

@font-face {
  /* .... */ 
  url(require('material-design-icons/iconfont/MaterialIcons-Regular.woff2')) format('woff2'),
  url(require('material-design-icons/iconfont/MaterialIcons-Regular.woff')) format('woff'),
  url(require('material-design-icons/iconfont/MaterialIcons-Regular.ttf')) format('truetype');
  /* .... */
}