Vue3 中引入液晶数字字体（通常用于大屏设计）

一、下载 .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'

三、使用新字体

<divclass="time"> {{currentTime}} </div>

.time{color:"#ccc";display: inline;font-family:"led regular";font-size: 2.3vh;}

四、效果图

‼️注意：本项目使用的是

vue-cli

搭建的基础框架，

webpack.base.conf.js

配置文件中已经配置好了，直接如上步骤使用即可，若是其他框架则需要检查一下

webpack.base.conf.js

配置文件中以下配置是否包括

ttf

格式。

{test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader:'url-loader',options:{limit:10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}},