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

一、下载 .ttf 字体文件到本地,放在 src 中的 assets 文件下

下载液晶字体 DS-Digital.ttf

二、在 css 文件中引入字体

css 复制代码
/*  src/assets/fonts/dsfont.css   */
@font-face {
    font-family: 'electronicFont';
    src: url(./DS-Digital.ttf);
    font-weight: normal;
    font-style: normal;
}

三、main.js 中引入

js 复制代码
// 导入字体文件
import '@/assets/fonts/dsfont.css'

三、使用新字体

html 复制代码
<div class="time"> {{currentTime}} </div>
css 复制代码
.time {
  color: "#ccc";
  display: inline;
  font-family: "led regular";
  font-size: 2.3vh;
}

四、效果图


‼️注意:本项目使用的是 vue-cli 搭建的基础框架,webpack.base.conf.js 配置文件中已经配置好了,直接如上步骤使用即可,若是其他框架则需要检查一下 webpack.base.conf.js 配置文件中以下配置是否包括 ttf 格式。

js 复制代码
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
相关推荐
华仔啊2 小时前
无需UI库!50行CSS打造丝滑弹性动效导航栏,拿来即用
前端·css
小九今天不码代码3 小时前
CSS 实现酷炫的不规则圆角与斜角边框效果(四种方法详解)
css·css3·radial-gradient·clip-path·linear-gradient·border-image·切角效果
T___T4 小时前
从原生 CSS 到 Stylus:用弹性布局实现交互式图片面板
前端·css
Zyx20074 小时前
Stylus 进阶:从“能用”到“精通”,打造企业级 CSS 架构(下篇)
前端·css
浪裡遊6 小时前
css面试题1
开发语言·前端·javascript·css·vue.js·node.js
淮北49415 小时前
html + css +js
开发语言·前端·javascript·css·html
3秒一个大19 小时前
掌握 Stylus:让 CSS 编写效率倍增的预处理器
css
inx17719 小时前
深入理解 CSS 弹性布局:从传统布局到 Flex 的优雅演进
css·flexbox
白兰地空瓶21 小时前
用 Stylus 写 CSS 有多爽?从响应式面板案例看透它的优雅
css·stylus
叫我詹躲躲1 天前
CSS Flex 布局比 float 更值得学
css·flexbox