vue使用外部字体自定义LCD字体（晶管体）

大屏监控中常用到液晶字体效果，如下图所示：

一、下载字体格式

1、下载地址【Techno > LCD fonts | dafont.com】

二、解压字体

1、下载后，解压后都是.ttf文件，在Font Squirrel （这个地址打开，直接可以转换字体）可将字体文件转换成woff2,svg,woff格式等，将下载后的文件解压至项目文件夹中直接使用。点击最上面的upload fonts 上传刚刚下载好(自己所需的那个)的TTF文件，滑倒下方点击我同意，然后开始下载。
2、打开fontsquirrel如图：

转换字体的步骤：
--->①点击“UPLOAD FONTS”按钮上传文件
--->②选择要转换的类型
--->③点击“ Yes, the fonts I'm uploading are legally eligible for web embedding.”，出现下载按钮
--->④点击“download your kit”，即可将转换后得到的字体下载下来。
如下图：

3、当然，选择最右边的自定义配置，是更详细的设置，为了尽可能多的兼容各个浏览器，按照以下选择：如下：

4、点击最上面的upload fonts 上传刚刚下载好(自己所需的那个)的TTF文件，滑倒下方点击我同意，然后开始下载。
5、解压压缩包得到如下文件：

6、将此文件夹(整个文件夹)放入到对应的项目中的静态资源存放位置如 assets/font 文件夹下。

7、在需要此字体的页面中的stylesheet.css中写入如下代码：

.lcd-font {font-family: 'seven_segmentregular';
}

8、在main.js中引入这个css文件

import '@/assets/font/seven_segmentregular/stylesheet.css';

9、到此准备工作就完成了代码中具体怎么用：（font-size，color，font-weight等都是可以正常使用的，只是字体增加了一种，当然字体名你可以在步骤7中自己起名字）

  <div>实时时间显示</div><div class="lcd-font" style="color: #337ecc;">{{ nowTime }}</div>

vue使用外部字体自定义LCD字体（晶管体）相关推荐

vue.js自定义LCD字体及字体压缩
大屏监控中常用到液晶字体效果,如下图所示: 首先下载lcdd.ttf字体: 在 webpack.config.js中设置对.ttf字体模块的处理,webpack视一切文件为模块,.ttf字体文件也不例 ...
vue使用自定义字体LcdD液晶字体
vue使用自定义字体LcdD液晶字体需求:在vue项目中是用到自定义字体,下面直接上干货步骤一:网上下载字体包或者找ui小伙伴要字体包步骤二:在assets文件夹中创建一个新的文件夹,我这里取名 ...
vue 富文本vue-quill-editor 自定义字号大小和字体样式
一.先创建一个名为font的.css文件,然后引入自定义css // 字体样式大小 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=&q ...
页面显示LCD液晶字体，特殊字体，@font-face属性详细用法，配图
如果web项目中需要用到LCD液晶字体显示数值(如下图所示)该怎么办? 在这就需要用到@font-face(具体看一下语法) /* 定义 */ @font-face {font-family:'Mic ...
LCD字体前端实现(最详细)
LCD字体在前端的实现应项目需求需要实现如图效果(这也是实际效果图),做一个方法总结: 具体实现步骤: 1.首先到dafont下载你需要的字体,它提供的字体很多不止有LCD字体一种. 点击1: 可以 ...
vue-quill-editor自定义字体大小和字体样式
不用修改下载的源文件,直接在editorquill.vue文件中修改即可重点部分如下 [{ size: ['10px', '12px', false, '16px', '18px', '20px', ...
php如何导入字体样式,css怎么引入外部字体？css 字体样式设置的方法（实例）...
在浏览器显示中,页面上不同的字体样式,不仅提升了页面的美观度,也提升了用户的浏览交互性.那么这些不同的字体样式是怎么用css设置的?本章就给大家带来css如何引入外部字体?css 字体样式设置的方法( ...
Python使用matplotlib函数subplot可视化多个不同颜色的折线图、为多个子图添加总标题（main title）、自定义设置主标题字体类型、字体大小、字体颜色等
Python使用matplotlib函数subplot可视化多个不同颜色的折线图.为多个子图添加总标题(main title).自定义设置主标题字体类型.字体大小.字体颜色等目录
python使用matplotlib可视化、为可视化图像添加标题（title）、自定义标题的字体格式、字体大小、字体颜色等
python使用matplotlib可视化.为可视化图像添加标题(title).自定义标题的字体格式.字体大小.字体颜色等目录