Angular应用全局Arial字体设置及CSS不生效问题咨询

遇到这种情况，大概率是这几个常见问题导致的，咱们一个个排查：

• 样式封装限制：Angular组件默认开启了样式封装（ViewEncapsulation.Emulated），组件内的CSS只能作用于当前组件的元素。如果你在某个组件的样式文件里写了其他组件的选择器，自然不会生效。可以试试在选择器前加:host ::ng-deep来穿透封装，或者干脆把样式放到全局样式文件里。
• 选择器优先级不够：如果你的CSS选择器特异性比Angular自带的样式（比如第三方UI库的默认样式）低，就会被覆盖。你可以检查下选择器的特异性，比如用更具体的选择器（比如.app-container body），或者临时加!important测试下是不是优先级问题（不过不推荐长期用!important，最好调整选择器结构）。
• 样式文件没正确导入：如果是全局样式，得确保在angular.json的styles数组里配置了对应的文件路径；如果是组件样式，要确认组件元数据里的styleUrls或styles字段正确指向了样式文件，别写错路径了。
• 浏览器缓存搞鬼：有时候修改了样式，但浏览器还缓存着旧文件，你可以强制刷新页面（Ctrl+F5），或者打开开发者工具勾选“禁用缓存”选项再刷新试试。
• 选择器或元素写错了：仔细检查下你的CSS选择器拼写对不对，目标元素是不是真的存在于DOM里，比如类名有没有拼错、标签名写错这种低级错误。

你的CSS声明有没有问题？ #

先给你吃个定心丸：你写的body { font-family:arial; font-size:12px; }本身没有语法错误，完全可以生效。不过更严谨的写法是加上降级字体，比如font-family: Arial, sans-serif;，这样如果用户系统里没有Arial字体，会自动 fallback 到系统默认的无衬线字体，体验更好。

最简设置步骤 #

在Angular里设置全局样式最直接的方式就是用默认的全局样式文件：

1. 找到项目根目录下的src/styles.css（如果用SCSS就是styles.scss），这是Angular默认的全局样式入口，所有全局样式都可以往这里写。
2. 把你的body样式直接粘贴进去：

body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

3. 保存后，如果开发服务器已经启动，可能需要重启一下（有时候热重载没那么及时），刷新页面就能看到效果了。

Angular中的注意事项 #

• 别在单个组件的样式文件里写body样式，因为组件样式有封装性，除非你用:host ::ng-deep，但完全没必要，全局样式文件就是干这个活儿的。
• 确认angular.json里的styles数组包含了src/styles.css，默认创建的项目已经配置好了，如果没配置的话，手动加进去就行：

"styles": [
  "src/styles.css"
]

• 如果你的项目用了第三方UI库（比如Angular Material），可能需要把你的全局样式放在第三方样式之后引入，这样你的样式优先级更高，能覆盖第三方的默认字体设置。

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