如何在 Nuxt 中高效加载 google 字体
How to efficiently load google fonts in Nuxt
我正在使用这个 google 字体 font-family: 'Saira Semi Condensed', sans-serif;
Link: https://fonts.google.com/specimen/Saira+Semi+Condensed
我正在从事 NuxtJS 项目。我必须在两个不同的组件中使用这种字体,但字体粗细不同。我已经在 Layout.vue
.
中导入了所有 google 字体链接
对于组件 A,font-weight
是 600
& 对于组件 B,font-weight
是 800
。所以我认为在各个组件中提供不同的字体粗细会起作用。但它不起作用。应用了唯一的基本字体,即 Saira Semi Condensed, sans-serif;
,但未反映字体粗细值。要解决这个问题,我需要在 Layout.vue
中导入两个具有相同字体但字体粗细不同的 google 字体链接,这使得它变得多余。
字体粗细:600
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap%27);
字体粗细:800
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap%27);
我认为我为相同字体导入两个链接的方式不太好看。你们能帮我解决这个问题吗?
先谢谢你了。
代码:
Layout.vue
<template>
<div>
<Nuxt />
</div>
</template>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
index.vue
<template>
<div>
<Navbar />
<ComponentA />
<ComponentB />
<Footer />
</div>
</template>
<script>
import Navbar from '../components/Navbar.vue'
import Clock from '../components/ComponentA.vue'
import Days from '../components/ComponentB.vue'
import Footer from '../components/Footer.vue'
export default {
components: {
Navbar,
ComponentA,
ComponentB,
Footer,
},
}
</script>
ComponentA.vue
<template>
<div>
<h1>I am component A</h1>
</div>
</template>
<script>
export default {
name: 'ComponentA',
}
</script>
<style scoped>
footer {
color: blue;
font-family: 'Saira Semi Condensed', sans-serif;
font-size: 20px;
text-align: center;
}
</style>
ComponentB.vue
<template>
<div>
<h1>I am component B</h1>
</div>
</template>
<script>
export default {
name: 'ComponentB',
}
</script>
<style scoped>
footer {
color: red;
font-family: 'Saira Semi Condensed', sans-serif;
font-size: 24px;
text-align: center;
}
</style>
您正在从 CDN 加载字体,这不是推荐的做事方式。
这里引用 Vitaly Friedman
写的awesome performance checklist 2021
Now, many of us might be using a CDN or a third-party host to load web fonts from. In general, it’s always better to self-host all your static assets if you can, so consider using google-webfonts-helper, a hassle-free way to self-host Google Fonts. And if it’s not possible, you can perhaps proxy the Google Font files through the page origin.
看到这里,我推荐使用@nuxtjs/google-fonts
,这是一个很酷的Nuxt模块。
其实我已经问过我的模块配置是否正确,这里是 github 问题:https://github.com/nuxt-community/google-fonts-module/issues/26
这里是 nuxt.config.js
中的用法示例
export default {
buildModules: [
[
'@nuxtjs/google-fonts',
{
families: {
Mali: {
wght: [400, 600, 700],
},
},
subsets: ['latin'],
display: 'swap',
prefetch: false,
preconnect: false,
preload: false,
download: true,
base64: false,
},
],
]
}
我正在使用这个 google 字体 font-family: 'Saira Semi Condensed', sans-serif;
Link: https://fonts.google.com/specimen/Saira+Semi+Condensed
我正在从事 NuxtJS 项目。我必须在两个不同的组件中使用这种字体,但字体粗细不同。我已经在 Layout.vue
.
对于组件 A,font-weight
是 600
& 对于组件 B,font-weight
是 800
。所以我认为在各个组件中提供不同的字体粗细会起作用。但它不起作用。应用了唯一的基本字体,即 Saira Semi Condensed, sans-serif;
,但未反映字体粗细值。要解决这个问题,我需要在 Layout.vue
中导入两个具有相同字体但字体粗细不同的 google 字体链接,这使得它变得多余。
字体粗细:600
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap%27);
字体粗细:800
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap%27);
我认为我为相同字体导入两个链接的方式不太好看。你们能帮我解决这个问题吗? 先谢谢你了。
代码:
Layout.vue
<template>
<div>
<Nuxt />
</div>
</template>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
index.vue
<template>
<div>
<Navbar />
<ComponentA />
<ComponentB />
<Footer />
</div>
</template>
<script>
import Navbar from '../components/Navbar.vue'
import Clock from '../components/ComponentA.vue'
import Days from '../components/ComponentB.vue'
import Footer from '../components/Footer.vue'
export default {
components: {
Navbar,
ComponentA,
ComponentB,
Footer,
},
}
</script>
ComponentA.vue
<template>
<div>
<h1>I am component A</h1>
</div>
</template>
<script>
export default {
name: 'ComponentA',
}
</script>
<style scoped>
footer {
color: blue;
font-family: 'Saira Semi Condensed', sans-serif;
font-size: 20px;
text-align: center;
}
</style>
ComponentB.vue
<template>
<div>
<h1>I am component B</h1>
</div>
</template>
<script>
export default {
name: 'ComponentB',
}
</script>
<style scoped>
footer {
color: red;
font-family: 'Saira Semi Condensed', sans-serif;
font-size: 24px;
text-align: center;
}
</style>
您正在从 CDN 加载字体,这不是推荐的做事方式。
这里引用 Vitaly Friedman
写的awesome performance checklist 2021Now, many of us might be using a CDN or a third-party host to load web fonts from. In general, it’s always better to self-host all your static assets if you can, so consider using google-webfonts-helper, a hassle-free way to self-host Google Fonts. And if it’s not possible, you can perhaps proxy the Google Font files through the page origin.
看到这里,我推荐使用@nuxtjs/google-fonts
,这是一个很酷的Nuxt模块。
其实我已经问过我的模块配置是否正确,这里是 github 问题:https://github.com/nuxt-community/google-fonts-module/issues/26
这里是 nuxt.config.js
export default {
buildModules: [
[
'@nuxtjs/google-fonts',
{
families: {
Mali: {
wght: [400, 600, 700],
},
},
subsets: ['latin'],
display: 'swap',
prefetch: false,
preconnect: false,
preload: false,
download: true,
base64: false,
},
],
]
}