perf: embed only used fonts

[tuhm1]

Optimized by embedding only the fonts that are actually used.

Description

The document may have many fonts that are not used by the nodes to be processed. Currently, all fonts are embedded.

Added an optimization that recursively traverses the nodes to find the fonts that are used, then filters out the fonts that are not used before embedding them.

Motivation and Context

This can significantly reduce processing time and the size of the SVG.

Resolves #405, resolves #389, resolves #310

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Enhancement (changes that improvement of current feature or performance)
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Test Case (changes that add missing tests or correct existing tests)
• Code style optimization (changes that do not affect the meaning of the code)
• Docs (changes that only update documentation)
• Chore (changes that don't modify src or test files)

Self Check before Merge

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[codecov]

Codecov Report

Attention: Patch coverage is 75.00000% with 4 lines in your changes missing coverage. Please review.

Project coverage is 63.10%. Comparing base (b751cbf) to head (efc0db7).
Report is 13 commits behind head on master.

Files with missing lines	Patch %	Lines
src/embed-webfonts.ts	75.00%	1 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #476      +/-   ##
==========================================
+ Coverage   62.93%   63.10%   +0.17%     
==========================================
  Files          10       10              
  Lines         580      580              
  Branches      143      143              
==========================================
+ Hits          365      366       +1     
  Misses        151      151              
+ Partials       64       63       -1     

Flag	Coverage Δ
	63.10% <75.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[biiibooo]

👋 @tuhm1

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

• fix: don't overwrite prevent_default if default wasn't prevented
• feat: add graph.scale() method
• docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

• Follow the TypeScript coding style.
• Run npm run lint locally to catch formatting errors earlier.
• Document any user-facing changes you've made.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[tuhm1]

Added this line because we must use the font which will be tested in:

html-to-image/test/spec/options.spec.ts

Lines 141 to 152 in 128dc3e

	it('should embed only the preferred font', (done) => {
	bootstrap('fonts/web-fonts/empty.html', 'fonts/web-fonts/remote.css')
	.then((node) => toSvg(node, { preferredFontFormat: 'woff2' }))
	.then(getSvgDocument)
	.then((doc) => {
	const [style] = Array.from(doc.getElementsByTagName('style'))
	expect(style.textContent).toMatch(/url\([^)]+\) format\("woff2"\)/)
	expect(style.textContent).not.toMatch(/url\([^)]+\) format\("woff"\)/)
	})
	.then(done)
	.catch(done)
	})

[tuhm1]

@bubkoo could you spare some time? I’d really appreciate it!