antvis/Graphin

官网字体图标首次加载不显示

Aperta

#248 aperta il 30 apr 2021

Vedi su GitHubGuida contributor
 (2 commenti) (0 reazioni) (0 assegnatari)TypeScript (276 fork)auto 404
good first issue

Metriche repository

Star
 (1096 stelle)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

Describe the bug 浏览器禁用缓存情况下，首次加载@antv/graphin-icons提供的字体时，图标不显示，缩放或鼠标悬停一下后，图标出现

To Reproduce

  • 禁用浏览器缓存
  • 刷新页面
  • 图标显示为空
  • 缩放画布或鼠标悬浮到节点上，图表显示出来

开启缓存的情况下，除第一次外，无上述情况 Expected behavior 图标正常加载出来

Desktop (please complete the following information):

  • OS: [Mac OS]
  • Browser [chrome]
  • Version [chrome 90.0.4430.93]

Additional context 字体加载时机的问题，从network里可以看出，字体文件at.alicdn.com/t/font_1522921_m3irqw8ynx.woff2请求顺序靠后

临时解决办法为，绘制之前，在页面标签内预先使用一个字体，例

<span style={{fontFamily:'graphin',transform:'scale(0)',opacity:0}}>&#xe7ce;</span>`

附版本信息

 "@antv/graphin": "^2.0.6",
 "@antv/graphin-icons": "^1.0.0",

Guida contributor

Direzione di ricerca
Esamina il meccanismo di caricamento dei font nel sistema di icone di Graphin. Il file del font `https://at.alicdn.com/t/font 1522921 m3irqw8ynx.woff2` viene caricato tardi. Indaga il componente che utilizza l'icona del font e trova dove è dichiarato il font face. Considera di precaricare il font usando un `<link rel="preload">` o l'API Font Loading. Controlla anche se c'è un modo per garantire che il font sia caricato prima che il grafico venga renderizzato.
Tech stack
typescriptreact
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
Git
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
75