你好,(fontFamily: "wgsFont",//该字体是我自己引入的lcd字体,不知道怎么引入) 这个应该怎么引入呢
1条回答 默认 最新
- 南朝听月 2022-11-04 11:37关注
LCD字体在前端的实现
应项目需求需要实现如图效果(这也是实际效果图),做一个方法总结:
具体实现步骤:1、首先到https://www.dafont.com/theme.php?cat=302下载你需要的字体,它提供的字体很多不止有LCD字体一种。
==点击1:== 可以看到LCD字体下也有很多不同风格的
==点击2:== 下载,解压
2、打开https://www.fontsquirrel.com/tools/webfont-generator如图:
3、选择最右边的自定义配置,为了尽可能多的兼容各个浏览器,按照以下选择:
4、==点击最上面的upload fonts 上传==刚刚下载好(==自己所需==的那个)的TTF文件,==滑倒下方 点击我同意,然后开始下载==。
5、解压压缩包得到如下文件:
6、将此文件夹(整个文件夹)放入到对应的项目中的静态资源存放位置如 assets/font 文件夹下。
7、在你需要此字体的页面中的css中写入如下代码:/* 引入lcd字体 */ @font-face { font-family: "wgsFont"; src: url("../font/ds-digi-webfont.eot"); /* IE9 Compat Modes */ src: url("../font/ds-digi-webfont.eot?#iefix") format("embedded-opentype"), /*IE6-IE8 */ url("../font/ds-digi-webfont.woff") format("woff"), /* Modern Browsers */ url("../font/ds-digi-webfont.ttf") format("truetype"), /* Safari, Android, iOS */ url("../font/ds-digi-webfont.svg") format("svg"); /* Legacy iOS */ }
到此准备工作就完成了
代码中具体怎么用:(font-size,color,font-weight等都是可以正常使用的,只是字体增加了一种,当然字体名你可以在步骤7中自己起名字)本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥20 python忆阻器数字识别
- ¥15 无法输出helloworld
- ¥15 高通uboot 打印ubi init err 22
- ¥20 PDF元数据中的XMP媒体管理属性
- ¥15 R语言中lasso回归报错
- ¥15 网站突然不能访问了,上午还好好的
- ¥15 有没有dl可以帮弄”我去图书馆”秒选道具和积分
- ¥15 semrush,SEO,内嵌网站,api
- ¥15 Stata:为什么reghdfe后的因变量没有被发现识别啊
- ¥15 振荡电路,ADS仿真