Angular应用中Angular Material核心主题字体加载位置及默认字重咨询

我来针对你使用Angular 5.2.5 + Angular Material 5.2.1的场景，解答这两个问题：

首先要明确：mat-core()这个混合宏本身不会自动帮你加载字体文件——它只是在全局设置了CSS的font-family规则（也就是你在检查器里看到的Roboto, "Helvetica Neue", sans-serif），但字体文件的引入需要你手动配置。

结合你的场景，字体大概率是通过以下两种方式之一加载的：

• 检查.angular-cli.json（Angular 5的配置文件，对应新版的angular.json）的styles数组，里面可能包含了Google Fonts的Roboto字体链接，比如：

  "styles": [
    "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700",
    "styles.scss"
  ]
  

• 或者在项目的index.html文件的<head>标签里，直接添加了字体引入的<link>标签：

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  

如果以上两种都没有，那可能是项目里本地存放了Roboto字体文件，通过自定义CSS/SCSS里的@font-face规则加载的，你可以在全局样式文件里搜索@font-face来确认。

Angular Material 5.x的mat-core()混合宏，默认适配Material Design规范，指定了Roboto字体的这几个字重：

• 300（轻量）：用于次要提示文本、辅助说明等场景
• 400（常规）：用于大部分正文内容
• 500（中等）：用于卡片标题、按钮文本等需要突出但不生硬的场景
• 700（粗体）：用于页面主标题、强调性文本等

你可以通过浏览器开发者工具的元素检查器，查看对应组件（比如mat-card、mat-title）的font-weight属性，来验证这些默认值。

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