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'

三、使用新字体

<div class="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]')}},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！