大屏展示LCD液晶字体—css3 @font-face属性自定义字体

2024-06-02 09:38:07

显示效果：

实现步骤：

到 dafont 下载.ttf 格式字体，选择LCD，点download下载，得到压缩包，需解压。
通过fontsquirrel来生成.woff等格式的字体。
上传.ttf格式文件，生成其他文件格式，得到压缩包，需解压。
将字体文件放在一个文件夹中。
css中用@font-face定义字体：

// 兼容写法
@font-face {font-family: 'myFont';src: url('~@/assets/styles/my-font/ds-digi-webfont.eot'); /* IE9 Compat Modes */src: url('~@/assets/styles/my-font/ds-digi-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('~@/assets/styles/my-font/ds-digi-webfont.woff') format('woff'), /* Modern Browsers */url('~@/assets/styles/my-font/ds-digi-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */url('~@/assets/styles/my-font/ds-digi-webfont.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
}

使用：

.number{font-family: 'myFont'; // 使用自定义字体
}

兼容问题：

Webkit/Safari(3.2+)

TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；

Webkit/Safari(3.2+)Opera (10+)

TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；

Internet Explorer

自ie4开始，支持EOT格式的字体文件；ie9支持WOFF；

Firefox(3.5+)

TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、WOFF (since Firefox 3.6)

Google Chrome

TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持

更多参考：
CSS3 @font-face 规则
https://blog.csdn.net/sunshine_han/article/details/78258880

大屏展示LCD液晶字体—css3 @font-face属性自定义字体相关推荐

matplotlib的Text、FontProperties对象、字体（font）属性|中文字体的设置|图像标题、label字体的设置
matplotlib.text.Text对象见文档描述matplotlib.text 设置Text字体性质的方法有两个: Text.set(xxx=value) Text.set_xxx(value ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...
Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~ 项目地址:Vue3 可视化大屏展示,点颗星星吧~ 界面展示(这个是动 ...
砼匠商砼ERP大屏展示效果图
匠商砼ERP大屏展示效果图作为搅拌站经营站或站长或CEO或老板,在办公室里挂一台电视机,上面展示的内容像下面一样,可以很直观地看到企业的生产情况,有客户或合作伙伴来参观也很有面子,他们马上觉得公司牛 ...
html多图自动展示,基于echarts+html+css+jq的数据可视化大屏展示炫酷看板
默认你已经具备前端基础 html,css,js,jq这些基本知识都已经掌握. 什么是echarts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动 ...
Qt制作大数据可视化大屏展示电子看板
Qt制作大数据可视化大屏展示电子看板解决当前最火的大数据可视化大屏展示,整个项目通过Qt开发,集成了QML/QChart/ECharts及自定义控件等模块,所有的可视化控件都可以集成到其中.可以随意 ...
web大屏展示用到的组件_基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...
PowerBI 秒级实时大屏展示方案全面助力双十一
双十一来了,你准备好了吗?不管你是否准备完毕,我们带来了全网首发的 PowerBI 秒级实时大屏展示方案,你可以直接用来展示双十一的实时状况. 我们一步步来说明这个套件模板教程. 真实效果功能如下: ...
数据可视化、模板框架、动态控件、可视化大屏、数据监管、监控平台、图表元件库、数据看板、驾驶舱、统计图表、园区、大屏展示、安防、智慧城市、旅游、健康、医疗卫生、交通、农业、政务、AI、食品、医院、安全
数据可视化.模板框架.动态控件.可视化大屏.数据监管.监控平台.图表元件库.数据看板.驾驶舱.统计图表.园区.大屏展示.安防.智慧城市.旅游.健康.医疗卫生.交通.农业.政务.AI.食品.医院.数据安 ...

最新文章

热门文章