一、下载 .ttf 字体文件到本地，放在 src 中的 assets 文件下
下载液晶字体 DS-Digital.ttf
二、在 css 文件中引入字体
/* src/assets/fonts/dsfont.css */
@font-face {
font-family: 'electronicFont';
src: url(./DS-Digital.ttf);
font-weight: normal;
font-style: normal;
}
三、main.js 中引入
// 导入字体文件
import '@/assets/fonts/dsfont.css'
三、使用新字体
<div class="time"> {{currentTime}} </div>
.time {
color: "#ccc";
display: inline;
font-family: "led regular";
font-size: 2.3vh;
}
四、效果图
文章来源：https://www.toymoban.com/news/detail-672947.html
‼️注意：本项目使用的是 vue-cli 搭建的基础框架，webpack.base.conf.js 配置文件中已经配置好了，直接如上步骤使用即可，若是其他框架则需要检查一下 webpack.base.conf.js 配置文件中以下配置是否包括 ttf 格式。文章来源地址https://www.toymoban.com/news/detail-672947.html
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
到了这里，关于Vue3 中引入液晶数字字体（通常用于大屏设计）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
