diff --git a/Cargo.toml b/Cargo.toml index 0402213f..dba519ad 100755 --- a/Cargo.toml +++ b/Cargo.toml @@ -22,6 +22,7 @@ pathfinder_content = { version = "0.5.0", default-features = false } pathfinder_simd = { version = "0.5.1", features = ["pf-no-simd"] } futures = "0.3.21" usvg-writer = { git = "https://github.com/zimond/resvg", rev = "6201182c" } +woff2 = "0.3.0" [target.'cfg(all(not(all(target_os = "linux", target_arch = "aarch64", target_env = "musl")), not(all(target_os = "windows", target_arch = "aarch64")), not(target_arch = "wasm32")))'.dependencies] mimalloc-rust = { version = "0.2" } @@ -57,3 +58,4 @@ codegen-units = 1 [patch.crates-io] resvg = { git = "https://github.com/zimond/resvg", rev = "6201182c" } +woff2 = { git="https://github.com/yisibl/woff2-rs", branch="fix-total-compressed-size" } diff --git a/__test__/wasm.spec.ts b/__test__/wasm.spec.ts index cdd6c054..d9f0b4a0 100755 --- a/__test__/wasm.spec.ts +++ b/__test__/wasm.spec.ts @@ -309,6 +309,27 @@ test('should be load custom multiple fontBuffers', async (t) => { t.is(originPixels.join(',').match(/0,0,255/g)?.length, 8938) }) +test('should be load custom WOFF2 font', async (t) => { + const svg = ` + + + Hello resvg-js + + + ` + const pacificoBuffer = await fs.readFile(join(__dirname, '../wasm/fonts/', 'Pacifico-Regular.woff2')) + const resvg = new Resvg(svg, { + font: { + fontBuffers: [pacificoBuffer], + }, + }) + const pngData = resvg.render() + const originPixels = Array.from(pngData.pixels) + + // Find the number of blue `rgb(0,255,255)`pixels + t.is(originPixels.join(',').match(/0,0,255/g)?.length, 6067) +}) + test('should generate a 80x80 png and opaque', async (t) => { const svg = ` diff --git a/src/fonts.rs b/src/fonts.rs index 90c71c36..eb7d4a91 100644 --- a/src/fonts.rs +++ b/src/fonts.rs @@ -14,6 +14,9 @@ use resvg::usvg_text_layout::fontdb::{Family, Query, Source}; #[cfg(target_arch = "wasm32")] use wasm_bindgen::JsCast; +#[cfg(target_arch = "wasm32")] +use woff2::decode::{convert_woff2_to_ttf, is_woff2}; + /// Loads fonts. #[cfg(not(target_arch = "wasm32"))] pub fn load_fonts(font_options: &JsFontOptions) -> Database { @@ -62,7 +65,13 @@ pub fn load_wasm_fonts( for font in font_buffers.values().into_iter() { let raw_font = font?; let font_data = raw_font.dyn_into::()?.to_vec(); - fontdb.load_font_data(font_data); + + let font_buffer = if is_woff2(&font_data) { + convert_woff2_to_ttf(&mut std::io::Cursor::new(font_data)).unwrap() + } else { + font_data + }; + fontdb.load_font_data(font_buffer); } } diff --git a/wasm/fonts/Pacifico-Regular.woff2 b/wasm/fonts/Pacifico-Regular.woff2 new file mode 100644 index 00000000..df468aba Binary files /dev/null and b/wasm/fonts/Pacifico-Regular.woff2 differ diff --git a/wasm/index.html b/wasm/index.html index b910dc0b..35471f86 100644 --- a/wasm/index.html +++ b/wasm/index.html @@ -34,6 +34,14 @@ align-items: center; } + .site-title { + font-size: 36px; + background-image: linear-gradient(80deg, #FF8253, #DA1BC6); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + background-clip: text; + } + main { display: flex; flex-direction: column; @@ -55,7 +63,7 @@ user-select: none; } - input:not([type="color"]) { + input:not([type="color"]), select { height: 30px; padding: 0 .5em; font-size: 16px; @@ -105,7 +113,7 @@ #output .body { flex: 1; display: flex; - align-items: center; + align-items: flex-start; justify-content: center; } @@ -135,7 +143,14 @@ .opts-cell label { margin-right: .5em; + white-space: nowrap; } + + #slt-svg, + #slt-font { + max-width: 230px; + } + .github { fill: #151513; color: #fff; @@ -155,18 +170,124 @@ animation: octocat-wave 560ms ease-in-out; } +
-

resvg-js playground

+

resvg-js playground

- - + +
+
+ + +
+
+ + +
@@ -296,26 +535,7 @@

resvg-js playground

- +
diff --git a/wasm/index_bg.wasm b/wasm/index_bg.wasm index 76aedf2e..6b955d1d 100644 Binary files a/wasm/index_bg.wasm and b/wasm/index_bg.wasm differ