Realización de fuentes LCD en el front-end
De acuerdo con las necesidades del proyecto, debe lograr el efecto que se muestra en la figura (este también es el diagrama de efecto real) y hacer un resumen del método:
pasos de implementación específicos:
1. Primero vaya a dafont para descargar las fuentes que necesita. Muchas fuentes que proporciona son más que fuentes LCD.
Haga clic en 1: Puede ver que también hay muchos estilos diferentes debajo de la fuente LCD
Haga clic en 2:Descargar, descomprimir
2. Abra fontsquirrel como se muestra en la figura:
3. Seleccione la configuración personalizada en el extremo derecho, para que sea compatible con tantos navegadores como sea posible, siga las selecciones a continuación:
4.Haga clic en cargar fuentes en la parte superior para cargarRecién descargado (Que necesitasArchivo TTF del uno),Haga clic en Acepto debajo de la hoja y comience a descargar.
5. Descomprima el paquete comprimido para obtener los siguientes archivos:
6. Coloque esta carpeta (la carpeta completa) en la ubicación de almacenamiento de recursos estáticos del proyecto correspondiente, como la carpeta assets / font.
7. Escriba el siguiente código en el CSS de la página donde necesita esta fuente:
/* 引入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 */
}
En este punto, el trabajo de preparación está completo
. Cómo usar el código: (tamaño de fuente, color, peso de fuente, etc.están disponibles normalmente, pero se ha agregado un tipo de fuente. Por supuesto, puede nombrar la fuente). fuente usted mismo en el paso 7.)
