字体包的基础使用

RAY_CHEN.

于 2025-04-30 15:26:25 发布

阅读量148

点赞数 1

文章标签：字体

本文链接：https://blog.csdn.net/weixin_44707050/article/details/147633757

版权

常见字体格式

.ttf (TrueType)

.otf (OpenType)

.woff (Web Open Font Format)

.woff2 (WOFF 2.0 - 推荐格式，压缩率更高)

将下载的字体文件存放于assets/fonts文件中

在style/index.css中定义字体
@font-face {
  font-family: 'CustomFont';
  src: url('../fonts/custom-regular.woff2') format('woff2')；
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 优化字体加载显示 */
}
main.js中引入index.css

组件中使用

<template>
  <div class="custom-text">使用自定义字体</div>
</template>

<style scoped>
.custom-text {
  font-family: 'CustomFont';
}

.bold-text {
  font-family: 'CustomFont';
  font-weight: 700; /* 使用粗体 */
}
</style>