fondo
El proyecto utiliza fuentes Alibaba Pratt & Whitney 2.0, los modelos son 35 delgados y 45 livianos respectivamente. Estos dos paquetes de fuentes pesan aproximadamente 8 MB. Cuando se
carga localmente, la velocidad puede no verse afectada. Cuando se envía a producción y prueba Entorno, la velocidad será muy lenta, especialmente en el entorno de prueba, el paquete de fuentes se cargará durante un minuto y la fuente en la página web cambiará después de un minuto, lo cual es indignante.
mejoramiento
Complemento: font-spider, el esquema se utiliza en todos los proyectos, incluido vue react jquery, etc.
Primero hablemos del principio de font-spider, porque nuestro propio archivo .ttf del paquete de fuentes contiene todo el texto. La
función de font-spider es ayudarnos a convertir el texto que necesitamos en la fuente que queremos, por ejemplo, en todo el proyecto. , solo tenemos
Si desea utilizar la fuente Alibaba Pratt & Whitney para los tres caracteres "鸡汤辉", font-spider convertirá estos tres caracteres en la fuente Alibaba Pratt & Whitney y generará un nuevo archivo .ttf, lo que significa que carácter que desea convertir Cuanto menos, más pequeño será el archivo de fuente .ttf resultante
Pasos
1. Instalar dependencias de font-spider
npm install font-spider -g
2. Cree una nueva carpeta con el nombre que desee. Esta carpeta debe contener el archivo de fuente que desea importar, archivo Ttf, y luego cree un nuevo archivo CSS en la carpeta, como font.css.
@font-face {
font-family: 'AlibabaPuHuiTi-2-35-Thin';
src: url('./AlibabaPuHuiTi-2-35-Thin.ttf');
font-weight: normal;
font-style: normal;
}
.thin {
font-family: 'AlibabaPuHuiTi-2-35-Thin';
}
@font-face {
font-family: 'AlibabaPuHuiTi-2-45-Light';
src: url('./AlibabaPuHuiTi-2-45-Light.ttf');
font-weight: normal;
font-style: normal;
}
.light {
font-family: 'AlibabaPuHuiTi-2-45-Light';
}
La URL aquí utiliza su archivo inicialización.ttf sin comprimir
3. Agregue un nuevo archivo html (énfasis)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font.css">
</head>
<body>
<div>
<!-- 这里对应的是thin的压缩包 -->
<div class="thin">
鸡汤辉
</div>
<!-- 这里对应的是light的压缩包 -->
<div class="light">
鸡汤辉
</div>
</div>
</body>
</html>
Introduzca el archivo css recién agregado en el archivo html y luego escriba dos divs para usar las dos nuevas clases en el archivo css respectivamente. El
texto, caracteres, números y letras que ingresa en estos dos divs indican que necesita font-spider para ayudar conviértalos a la fuente que desee, si usa texto fuera de estos dos divs en su proyecto, entonces estos textos que no están dentro del rango no usarán la fuente que desea
Por ejemplo: escribí los tres caracteres "鸡汤辉" en estos dos divs, luego el archivo .ttf final generado solo puede reconocer Jitanghui
y configurar Jitanghui para cualquier otro carácter chino en la fuente Alibaba Pratt & Whitney. Los números, símbolos y letras son todas las fuentes que vienen con el sistema
4. El último paso, cd a su paquete de archivos para usar
font-spider index.html
El index.html aquí es su archivo html recién agregado, puede usar el nombre que elija
Finalmente, esta carpeta generará un nuevo archivo .ttf y una carpeta .font-spider. Esta carpeta .font-spider almacena sus archivos .ttf sin comprimir. En este momento, la ubicación del archivo ha sido procesada
para usted. Comprímelo El antiguo ttf El archivo reemplazará directamente al original, y su archivo CSS no necesita cambiar la ubicación del archivo referenciado, solo úselo directamente.
fin
Dígame, escribí 3500 caracteres chinos de uso común, letras en inglés, mayúsculas, minúsculas, símbolos chinos e ingleses en el archivo html div aquí, que básicamente pueden cubrir elementos generales. Si hay símbolos especiales o palabras poco comunes, se pueden agregar por separado. , y finalmente comprimido de 8mb a 900kb