在前端开发中，我们常常会使用 CSS Reset 消除默认样式，从而使网页呈现出我们想要的样式。但有时在使用 CSS Reset 时，如果网页中引入了外部字体，就可能出现显示异常的情况，这时我们就需要解决这个问题。
问题原因
CSS Reset 本质上是一种覆盖式的样式，它会将 HTML 元素的默认样式覆盖掉，从而使样式更加统一和规范。但是，在 CSS Reset 中并没有考虑到外部字体的影响，因此如果我们在 CSS Reset 后引入外部字体，该字体可能会被 Reset 中的样式所覆盖，从而导致显示异常。
解决方法
要解决 CSS Reset 导致的外部字体显示异常问题，我们可以采取以下两种方法：
1. 使用 @font-face 定义字体
@font-face 是 CSS3 中的一个模块，它可以让网页开发者使用自己的字体，而不必依赖用户的系统字体。我们可以使用 @font-face 定义字体，并在 CSS Reset 之前引入该字体，从而避免样式覆盖问题。
下面是一个 @font-face 的示例代码：
@font-face {
font-family: 'My Custom Font';
src: url('mycustomfont.ttf');
}2. 将 Reset 样式应用于特定的元素
如果我们仅仅想要应用 Reset 样式到一些特定的元素上，我们也可以通过 CSS 选择器来实现。比如，我们可以在 Reset 样式之后，使用一个 class 选择器来定义特定元素的样式，从而避免外部字体的影响。
下面是一个将 Reset 样式应用于特定元素的示例代码：
-- -------------------- ---- ------- -- --- ----- -- -- ---------- -------- - ------- -- -------- -- ----------- ----------- - -- --------- -- ----------- - ------------ ------ ----------- ---------- ----- -
在上述代码中，我们使用了一个 .reset-font 的 class 选择器来定义特定元素的样式，从而避免 Reset 样式对外部字体的影响。
总结
通过使用 @font-face 或将 Reset 样式应用于特定元素，我们可以有效地解决 CSS Reset 对外部字体导致的显示异常问题。在开发中，我们应该根据具体需求来选择适当的方法，并注意外部字体与 Reset 样式之间的互动，以达到更好的网页显示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475bb4c968c7c53b02bd227