能否通过CSS的@font-face替换系统字体？该行为是否为浏览器预期？

这是浏览器的预期行为，并非漏洞，也不是随时会消失的特性，具体说明如下：

1. 原理层面：CSS规范中，@font-face的作用就是自定义字体族名称。当你定义了一个与系统字体同名的font-family时，浏览器会优先使用你自定义的字体资源，而不是系统自带的字体——这是字体匹配机制的正常逻辑，浏览器会先查找页面内定义的@font-face规则，再降级使用系统字体。

2. 兼容性：所有支持CSS3 @font-face的现代浏览器（包括桌面端Chrome、Firefox、Safari、Edge，以及移动端主流浏览器）都支持该特性，不存在大范围设备不兼容的问题，@font-face是已经标准化多年的成熟特性。

需要注意的细节 #

• 这种做法虽然合法，但可能违背用户预期：用户看到font-family: Courier时，预期是系统自带的等宽字体，实际却加载了自定义字体，可能影响用户体验。
• 从CSS规范的稳定性来看，这个匹配逻辑不会轻易变更，后续出现兼容性问题的概率极低。
• 建议添加font-display属性优化字体加载体验，避免出现无样式文本闪烁（FOIT）的情况，比如：

  @font-face {
    font-family: Courier;
    src: url(...) format('woff2');
    font-display: swap;
  }
  

代码示例 #

CSS代码

.demo {
  padding: 10px;
  background: #eee;
}

/* 替换Courier为自定义网络字体 */
@font-face {
  font-family: Courier;
  src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
}

HTML代码

<div class="demo" style="font-family: Courier!important">
  This is Courier
</div>

内容的提问来源于stack exchange，提问作者Philipp