Angular 4中使用roboto-fontface时如何阻止浏览器加载字体？

我之前也碰到过一模一样的问题——直接导入整个roboto-fontface包的CSS文件时，浏览器会自动下载所有声明的字体文件，哪怕你只用到了其中一种字重。下面是几个亲测有效的解决办法：

方法1：只声明你实际用到的字体字重 #

问题根源在于你导入的roboto-fontface.css里包含了Roboto全系列字重（100到900、斜体等）的@font-face声明，浏览器解析到这些声明就会触发下载。我们可以只保留自己需要的部分：

代替原来的整包导入，在main.css里手动编写需要的字体声明：

/* 仅声明你实际使用的字重，比如Medium(500)和Regular(400) */
@font-face {
  font-family: 'Roboto';
  src: url('../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

body { 
  font-family: Roboto, Arial, sans-serif; 
  /* 默认font-weight是400，只会加载Regular字体；如果需要Medium，再单独设置对应元素的font-weight:500 */
}

这样浏览器只会下载你明确用到的字体文件，不会再自动加载多余的。

方法2：改用系统自带的Roboto字体（无需下载） #

如果你的项目对字体一致性要求不是特别严格，可以优先使用用户系统中已有的Roboto字体， fallback到其他通用字体：

body {
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

这样如果用户设备已经预装了Roboto，浏览器会直接使用本地字体，不会触发下载；如果没有，才会 fallback到后面的备用字体。

额外注意事项 #

• 检查项目中所有使用font-weight的地方，确保没有用到你未声明的字重（比如font-weight:700会触发Bold字体的下载）；
• 可以通过浏览器的网络面板查看字体加载情况，验证解决方案是否生效。

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