Realization of LCD fonts on the front end
According to the needs of the project, you need to achieve the effect shown in the figure (this is also the actual effect diagram), and make a method summary:
specific implementation steps:
1. First go to dafont to download the fonts you need. Many fonts it provides are more than LCD fonts.
Click 1: You can see that there are also many different styles under the LCD font
Click 2:Download, unzip
2. Open fontsquirrel as shown in the figure:
3. Select the custom configuration on the far right, in order to be compatible with as many browsers as possible, follow the selections below:
4.Click upload fonts at the top to uploadJust downloaded (What you needTTF file of the one),Click I agree under the slip and start downloading.
5. Unzip the compressed package to get the following files:
6. Put this folder (the entire folder) into the static resource storage location of the corresponding project, such as the assets/font folder.
7. Write the following code in the css of the page where you need this font:
/* 引入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 */
}
At this point, the preparation work is completed
. How to use the code: (font-size, color, font-weight, etc. are all available normally, but one font has been added. Of course, you can name the font yourself in step 7. )
