combinación de fuentes de encargo del front-end

Creo que todo el trabajo cumplido con los requisitos para utilizar algunos de los requisitos de diseño de fuentes extrañas, y porque el archivo de fuente es demasiado grande , seleccionar el mapa de corte.

Me gustaría mucho esta demanda, el usuario puede optar por enviar la fuente del artículo . Este artículo de la palabra puede parecer demasiado, al parecer, el último programa es inadecuado, entonces lo estamos haciendo?

Preámbulos, la primera demo.

implementación

analizar los problemas

Sólo hay un problema, y que es el archivo de fuente es demasiado grande (10 MB) . No hablaré flujo no es caro, por lo que los archivos grandes correo no deseado , He leído su fuente artículo no ha vuelto a aparecer.

soluciones

Por supuesto, el archivo de fuente se reduce, entonces hay dos opciones

Proporcionar ficheros generador de palabras comunes

palabras en inglés es relativamente simple, como sólo 26 letras.

Pero las profundas caracteres chinos, demasiado duro, entonces podemos proporcionar algunas palabras de uso común .

ventajas:

1. Sólo un recurso puede ser almacenado en caché pública.
2. sencillo

desventajas:

1. Debido a que es una palabra común, por lo que puede haber algunas palabras comunes no mostrarán la fuente predeterminada, una mala experiencia.
2. Debido a que los archivos de fuentes son grandes, por lo que la primera vez que se carga un poco más lento. Pero es porque no es el monto total será un poco más rápido.

generado dinámicamente archivo de fuente

El plan es presentar todas las palabras en el artículo, y luego generar un archivo de fuentes para su uso.
De hecho, este programa se utiliza comúnmente en las páginas estáticas, ejecutar un análisis de secuencia de comandos genera un archivo de fuentes.

ventajas:

1. Los archivos pequeños, rápido
2. Lograr un poco más complicado, debido a la necesidad de generar dinámicamente el archivo de fuentes, las necesidades de los servidores a participar en un servicio de generación de fuentes.

desventajas:

1. Cada artículo debe ser modificado para generar un nuevo archivo de fuente, la utilización de los recursos de edad no es muy alta, la tasa de utilización de caché no es muy alta.

Por supuesto, finalmente elegido este programa de archivo de fuente generado de forma dinámica, en un pequeño archivo para cargar más rápido .

biblioteca fontmin

Muy por encima de dicho esquema, el siguiente comenzó a decir cómo participar.

Estoy utilizando un fontmin bibliotecas para implementar funciones.

instalar

 

npm install --save fontmin

uso

 

var Fontmin = require('fontmin');

new Fontmin()
    .src('/static/font/font.ttf') // 载入字体
    .use(rename(txtMD5+'.ttf')) // 修改输出的文件名
    .use(Fontmin.glyph({text: txt,hinting: false})) //子集化 text 参数就是输出时要的字体
    .use(Fontmin.ttf2eot())     // eot 转换插件
    .use(Fontmin.ttf2woff())    // woff 转换插件     
    .use(Fontmin.ttf2svg())     // svg 转换插件
    .use(Fontmin.css())         // css 生成插件
    .dest('/static/fontmin'); // 设置字体输出路径
    .run(function (err, files) {
        if (err) throw err;
        console.log('success');
    });

Modificar el nombre de archivo generado

 

var rename = require('gulp-rename');

.use(rename(txtMD5+'.ttf')) // 修改输出的文件名

Modificar la fuente archivo CSS font-family

 

.use(Fontmin.css(
    fontFamily: 'MD5'
))

otros recursos

1. font-araña
   puede analizar automáticamente el archivo HTML que puede ser colocado en uso trago.
2. font-portadora
   puede hacer subconjuntos de fuentes, también puede modificar la forma de cada palabra (que puede entenderse como confundir).