vite plugin webfont dl
v3.10.3
Coleta links, importações e definições do Webfont do seu projeto Vite, baixará arquivos de CSS e Fonte (privacidade primeiro) , adicione as fontes ao seu pacote (ou serve através do servidor de dev) e injeta definições de fonte usando um método de bloqueio não renderizado , enquanto o Método de Blocking, entre outros, o desenvolvimento de arquivos externos .
npm i vite-plugin-webfont-dl -DExtratos, downloads e injeta fontes do snippet de código do Google Fonts originais .
<head> do bloco "Use na web" : < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap " rel =" stylesheet " >webfontDownload aos seus plugins de vite sem nenhuma configuração e o plug -in automaticamente cuidará de tudo: // vite.config.js
import webfontDownload from 'vite-plugin-webfont-dl' ;
export default {
plugins : [
webfontDownload ( ) ,
] ,
} ;dist/index.html : < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style > Extratos, downloads e injeta fontes dos URL (s) CSS (s) WebFont CSS configurado .
< link href =" [CSS URL] " rel =" stylesheet " >webfontDownload aos seus plugins de vite com os URLs CSS (s) do Google Fontes selecionados: // vite.config.js
import webfontDownload from 'vite-plugin-webfont-dl' ;
export default {
plugins : [
webfontDownload ( [
'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' ,
'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'
] ) ,
] ,
} ; Os webfonts estão injetados e prontos para uso .
O plug -in faz seu trabalho sem problemas, esteja você trabalhando no servidor de desenvolvimento local ou na construção da produção.
h1 {
font-family : 'Press Start 2P' , cursive;
}
h2 {
font-family : 'Fira Code' , monospace;
}Para fazê -lo funcionar com o plug -in Laravel Vite, adicione esta linha ao seu arquivo de lâmina:
@vite ( ' webfonts.css ' )
cdn.jsdelivr.net fontes de hackersms.me ): funciona com zero configuração ou configuração simples@font-face ) funciona com configuração simples injectAsStyleTag ( boolean , padrão: true ):
Injetar webfonts como tag <style> (CSS incorporado) ou como um arquivo .css externo
minifyCss ( boolean , Padrão: Valor de build.minify ):
Minificar o código CSS durante a construção.
embedFonts ( boolean , padrão: false ):
Incorporar fontes codificadas pela base64 em CSS.
Em alguns casos, podem causar aumento do arquivo se o CSS contém várias referências ao mesmo arquivo de font. Exemplo
async ( boolean , padrão: true ):
Evite o uso de manipuladores de eventos em linha ( webfonts.css ) que podem causar problemas de política de segurança de conteúdo.
Funciona apenas com injectAsStyleTag:false .
cache ( boolean , padrão: true ):
Armazenar persistentemente os arquivos CSS e font baixados no cache de arquivos locais.
Se definido como false o cache existente será excluído.
proxy ( false|AxiosProxyConfig , padrão: false ):
Configuração de proxy para solicitações de rede.
assetsSubfolder ( string , padrão: '' ):
Movimentos baixos de arquivos de fonte para separar a subpasta no diretório de ativos.
uso:
ViteWebfontDownload (
[ ] ,
{
injectAsStyleTag : true ,
minifyCss : true ,
embedFonts : false ,
async : true ,
cache : true ,
proxy : false ,
assetsSubfolder : '' ,
}
)ou:
ViteWebfontDownload (
[
'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap' ,
] ,
{
injectAsStyleTag : true ,
minifyCss : true ,
embedFonts : false ,
async : true ,
cache : true ,
proxy : false ,
assetsSubfolder : '' ,
}
)? Ao evitar recursos de bloqueio de renderização causados por webfonts de terceiros, você pode aumentar o desempenho da página , o que leva a uma melhor experiência do usuário e melhora os resultados do SEO .
O plug-in baixa as fontes fornecidas do serviço WebFont de terceiros (como o Google Fonts) e as injeta dinamicamente (como uma folha de estilo interna ou externa) em seu projeto Vite, transformando os webfonts de terceiros em auto-hospedados . ?
? Além do aumento significativo do desempenho , seus visitantes também se beneficiarão da proteção da privacidade , pois não há um servidor de terceiros envolvido.
O Google Fontes gera o código a seguir que você deve injetar no <head> do seu site, exemplo :
< link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code&display=swap " rel =" stylesheet " >O que acontece no lado do cliente com o Google Fontes :
fonts.googleapis.com . Isso acontece em segundo plano para melhorar o desempenho. [ preconnect ]fonts.gstatic.com . [ preconnect ]fonts.googleapis.com (com font-display:swap ) . [ stylesheet ]@font-face contendo URLs de fonte do servidor fonts.gstatic.com .fonts.gstatic.com .Pelo contrário, o plug-in do WebFont-DL faz a maior parte do trabalho no horário de construção, deixa o mínimo para o navegador.
Plugin webfont-dl
index.html e o CSS gerado)<style> ) ou um arquivo CSS externo / webfont / externo<head> do seu site usando um método de bloqueio não renderizado, exemplo : < style >
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
...
</ style > ou (usando o servidor de dev ou injectAsStyleTag: false )
< link rel =" preload " as =" style " href =" /assets/webfonts.b904bd45.css " >
< link rel =" stylesheet " media =" print " onload =" this.onload=null;this.removeAttribute('media'); " href =" /assets/webfonts.b904bd45.css " >O que acontece no lado do cliente com o plug-in WebFont-DL :
<style> ).ou
preload ]print " (bloqueio não-renderizado) . Depois de carregá -lo, promova a folha de estilo " all " do tipo de mídia (removendo o atributo " media "). [ stylesheet ] Projeto Vite Starter com
| ? | ||
|---|---|---|
| ? webfont.feat.agency | ? webfont-dl.feat.agency |
MIT Licença © 2022 feat.
