MaterialDesign-Webfont 是一款基于 Google Material Design 设计规范的 Web 字体库，包含了 Material Design 图标和字形。本文将介绍如何使用 npm 包来引入 MaterialDesign-Webfont 并在前端项目中使用。
安装和引入
首先，在项目目录下使用 npm 安装该字体库。
npm install material-design-icons-webfont
接着，在 HTML 文件中通过 <link> 标签引入字体 CSS 文件。
<link rel="stylesheet" href="node_modules/material-design-icons-webfont/dist/material-design-icons.css">
然后，在需要使用图标或字形的地方添加相应的 HTML 元素，并为其指定对应的 CSS 类名。
<i class="material-icons">account_circle</i> <span class="material-icons-outlined">search</span>
通过这种方式，即可在页面中展示 Material Design 图标和字形。
自定义样式
MaterialDesign-Webfont 提供了多种自定义选项，可以满足不同项目的需求。
更改字体大小
通过修改 font-size 属性，可以更改图标或字形的大小。
.material-icons {
font-size: 24px;
}更改颜色
通过修改 color 属性，可以更改图标或字形的颜色。
.material-icons {
color: #2196F3;
}更改主题
通过添加不同的 CSS 类名，可以切换不同的主题。
<i class="material-icons md-light">wb_sunny</i> <i class="material-icons md-dark">bedtime</i>
MaterialDesign-Webfont 支持 md-light 和 md-dark 两种主题，可以通过修改这些类名来更改图标或字形的主题。
总结
本文介绍了如何使用 npm 包 MaterialDesign-Webfont 来在前端项目中引入 Material Design 图标和字形，并提供了一些常用的自定义选项。通过学习本文，读者可以快速掌握 MaterialDesign-Webfont 的使用方法，并在实际项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38713