字体包的基础使用

常见字体格式

• .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>