为什么设置不同lang属性的HTML元素会显示不同的字体？

我有如下代码片段，运行时不同语言的元素会显示不同字体，该表现会随浏览器、操作系统的不同产生差异：部分浏览器中所有<code>元素/标签都使用相同字体，我并未修改任何浏览器设置。

<!DOCTYPE html>
<html lang="en-US">
  <meta charset="utf-8">
  <title> different font </title>
  <code lang="en">int i = 0;</code><br>
  <code lang="ru">int i = 0;</code><br>
  <code lang="ja">int i = 0;</code><br>

  <div lang="en">font family</div>
  <div lang="ru">font family</div>
  <div lang="ja">font family</div>
</html>

以下是我系统上的运行截图，你所在的设备输出可能存在差异：

请问出现该现象的原因是什么？

• 核心原因是浏览器内置的默认字体匹配规则和系统字体差异共同作用的结果
• 首先，现代浏览器的内置用户代理样式表（UA Stylesheet）普遍支持按lang属性为元素匹配对应语言的默认字体：没有自定义字体样式时，lang="ru"的元素会优先调用系统预设的俄语默认字体，lang="ja"的元素会优先调用日语默认字体，<code>标签默认归为等宽字体分类，所以会匹配对应语言的默认等宽字体，不同语言的默认等宽字体设计差异自然会导致显示效果不同。
• 其次，不同操作系统的预装默认字体存在差异，同一语言的默认等宽字体在Windows、macOS、Linux上可能完全不同，同一系统下不同浏览器的默认字体匹配逻辑也存在区别，部分浏览器没有实现按lang属性区分默认字体的逻辑，所以会出现所有<code>标签都用同一种字体的情况。
• 你没有修改浏览器设置，也没有给元素自定义font-family样式，所以浏览器会完全走默认的字体 fallback 逻辑，最终表现就会受lang属性值、浏览器类型、操作系统三重因素影响。

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