常见字体格式
.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>