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]')
        }
      },
相关推荐
西洼工作室21 小时前
CSS高效开发三大方向
前端·css
昔人'21 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
不叫猫先生1 天前
中秋连连看小游戏开发完整教程
javascript·css·小游戏·连连看
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
sniper_fandc2 天前
Vue3双向数据绑定v-model
前端·vue
西洼工作室2 天前
SSE与轮询技术实时对比演示
前端·javascript·css
Dontla3 天前
Tailwind CSS介绍(现代CSS框架,与传统CSS框架Bootstrap对比)Tailwind介绍
前端·css·bootstrap
知识分享小能手3 天前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
向上的车轮3 天前
CSS 预处理器:Sass的基本用法、核心特性
css·sass