vue 引入字体

<template>
  <div class="font-example">
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'FontExample'
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.font-example {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-weight: 700;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 这里定义了一个简单的 HTML 结构，包含一个 div 和一个 h1 标签。div 使用了类名 font-example，以便应用自定义的字体样式。

2. 脚本部分 (<script>):

   • 这里定义了一个 Vue 组件，命名为 FontExample。这部分没有特别与字体引入相关的逻辑，主要是为了展示如何在 Vue 中组织代码。

3. 样式部分 (<style>):

   • 使用 @import 规则从 Google Fonts 引入了名为 "Roboto" 的字体，并指定了两个字重（400 和 700）。
   • 在 .font-example 类中，将字体族设置为 'Roboto'，并指定了回退字体为 sans-serif，以确保在 Roboto 字体不可用时仍能显示合适的字体。
   • 对 h1 标签设置了较粗的字重（700），以匹配 Roboto 字体的效果。

通过这种方式，你可以在 Vue 项目中轻松引入并使用自定义字体。