介绍
fam-normalize 是一个常见样式的重置工具，使用它可以消除浏览器之间的差异，使得网页看起来更加一致。它基于 Normalize.css 进行了一些修改和定制，使用者可以轻松配置不同的选项，从而满足不同需求。
在接下来的文章中，我们将会介绍 fam-normalize 的使用方法和一些注意事项，希望能对前端开发者们有所帮助。
安装
在使用 fam-normalize 之前，我们需要先在项目中安装它。通过 npm 可以很方便地完成这一过程。在项目根目录下执行如下命令：
npm install fam-normalize
安装完成之后，你可以直接在项目中引入它：
<link rel="stylesheet" href="./node_modules/fam-normalize/dist/fam-normalize.css">
使用
fam-normalize 会自动应用到所有的 HTML 元素上，你不需要做其他任何事情。只需要在页面中包含 fam-normalize 的 css 文件，就可以开始享受它的好处了。
配置
fam-normalize 有一些默认配置选项，但你也可以通过覆盖相应的变量，来自定义自己需要的配置。下面是一些常见的配置选项及其用法。
Typography
fam-normalize 提供了三种不同的字体设置：sans-serif、serif 和 monospace。你可以通过在 less 或 sass 中定义 $fam-type-default、$fam-type-serif 和 $fam-type-mono 三个变量，来自定义这三种字体的样式。
$fam-type-default: "Helvetica Neue", Helvetica, Arial, sans-serif; $fam-type-serif: Georgia, serif; $fam-type-mono: Menlo, Monaco, "Courier New", monospace;
Colors
fam-normalize 可以通过你的项目需要来自定义一些颜色相关的变量，如 $fam-link-color、$fam-link-hover-color、$fam-border-color 等等。你可以在 less 或 sass 中定义这些变量，从而达到自己的视觉效果。
$fam-link-color: #00bfff; $fam-link-hover-color: #00a5ff; $fam-border-color: #dfe2e5;
Misc
除了上述配置选项之外，fam-normalize 还提供了一些其他的配置选项，比如：
$fam-description-list-margin: 控制列表元素之间的间距。$fam-table-border-collapse: 控制表格的边框是否合并。$fam-selection-background-color: 控制文本选中时的背景颜色。$fam-external-link-background-color: 控制外部链接的背景颜色。
示例
-- -------------------- ---- ------- -- ------------ --- --------- -- ------------------ ---------- ------ ---------- ------ ----------- ---------------- -------- ------ --------------- ------ ------- -------- ----- ---------- -- --- ---- - ---------- --- ---------------- -------- ---------------------- -------- -- --- ------ -- ------------------ -------- -- ----------- ----------------------------- ---- -- ----------- --------------------------- --------- -- ------------ -------------------------------- -------- -- ----------- ------------------------------------ ------------
结语
通过本文，你已经了解了 fam-normalize 的基本使用方法和一些配置选项。希望这些内容能够帮助你在日常的前端开发工作中，处理好常见的样式问题。
如果想要了解更多 fam-normalize 的使用技巧，可以参考它的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7881e8991b448d8fb4