字体设置 字体导入 vue引入字体及字体文件的详细方法

📌

1. 字体设置 🎨

   

   • CSS font-family 属性
   • 系统默认字体 vs 自定义字体
   • 响应式字体大小（rem/vw）

2. 字体导入 📥

   • 本地字体文件（.ttf/.woff/.woff2）
   • @font-face 规则语法
   • 字体格式兼容性优化

3. Vue引入字体及字体文件 ⚙️

   

   • 步骤1：将字体文件放入 assets/fonts/ 目录
   • 步骤2：在全局CSS中定义 @font-face

     @font-face {
       font-family: 'CustomFont';
       src: url('@/assets/fonts/your-font.woff2') format('woff2');
     }

   • 步骤3：在组件中应用字体

     <style scoped>
     .text { font-family: 'CustomFont', sans-serif; }
     </style>

   • 优化：预加载字体（<link rel="preload">）

💡 小贴士：

• 使用 woff2 格式压缩字体体积！
• 测试不同浏览器的字体渲染效果 🌐