admin管理员组文章数量:1594974
大屏监控中常用到液晶字体效果,如下图所示:
一、下载字体格式
1、下载地址【Techno > LCD fonts | dafont】
二、解压字体
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字体(晶管体) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728203621a1149698.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论