如何在Nuxt中高效加载Google Fonts并正确使用不同字重

解决方案 #

1. 合并字体导入语句
   Google Fonts支持单条链接导入同一字体的多个字重，多个字重之间用分号分隔即可，直接替换Layout.vue中两条Saira Semi Condensed字体的导入语句：

/* 替换原来的两条Saira字体导入 */
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600;800&display=swap');

2. 修正组件样式
   你当前字重不生效有两个原因：

• 组件样式中没有添加font-weight配置
• 样式选择器和模板节点不匹配：模板中只有h1标签，但样式写的是footer选择器，样式无法命中对应节点

对应修改两个组件的样式即可：
ComponentA.vue样式修改：

<style scoped>
/* 如果是要作用到h1标签，修改选择器为h1，若实际需要作用到footer标签，对应在模板中添加footer节点即可 */
h1 {
    color: blue;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
 }
</style>

ComponentB.vue样式修改：

<style scoped>
h1 {
    color: red;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-weight: 800;
    font-size: 24px;
    text-align: center;
 }
</style>

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