Support view woff2 font.

README.md

@@ -8,7 +8,7 @@ This extension supports previewing these common office file formats.
 - Word: .docx
 - Svg: .svg
 - Pdf: .pdf
-- Font: .ttf, .otf, .woff
+- Font: .ttf, .otf, .woff, .woff2
 - Markdown: .md
 - HttpRequest: .http
 - Windows Reg: .reg

package.json

@@ -349,6 +349,9 @@
 					{
 						"filenamePattern": "*.woff"
 					},
+					{
+						"filenamePattern": "*.woff2"
+					},
 					{
 						"filenamePattern": "*.otf"
 					},

resource/font/index.html

@@ -5,6 +5,7 @@
     <base target="_frame"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>CharMap - Powered by OpenType.js</title>
+    <base href="{{baseUrl}}/">
     <link href='css/index.css' rel='stylesheet' type='text/css'/>
     <script src="js/opentype.min.js"></script>
     <script src="../lib/vscode.js" type="text/javascript"></script>

resource/font/js/index.js

@@ -32,6 +32,16 @@ onload = () => {
     if (vscodeEvent) {
         vscodeEvent.emit("init")
         vscodeEvent.on("open", (content) => {
+            if (content.path.includes('woff2')) {
+                const loadScript = (src) => new Promise((onload) => document.documentElement.append(
+                    Object.assign(document.createElement('script'), { src, onload })
+                ));
+                loadScript('js/woff2_decompress_binding.js')
+                    .then(() => fetch(content.path))
+                    .then(f => f.arrayBuffer())
+                    .then((buffer) => Module.decompress(buffer))
+                    .then((buffer) => onFontLoaded(opentype.parse(Uint8Array.from(buffer).buffer)));
+            }
             opentype.load(content.path, function (err, font) {
                 var amount, glyph, ctx, x, y, fontSize;
                 if (err) {
@@ -470,5 +480,5 @@ function hidpi(canvas, height, width) {
 }
 
 function showErrorMessage(message) {
-    if (message) alert(message);
+    if (message) console.error(message);
 }

src/provider/officeViewerProvider.ts

@@ -83,6 +83,7 @@ export class OfficeViewerProvider implements vscode.CustomReadonlyEditorProvider
                 break;
             case ".ttf":
             case ".woff":
+            case ".woff2":
             case ".otf":
                 this.handleFont(handler)
                 break;
@@ -145,19 +146,22 @@ export class OfficeViewerProvider implements vscode.CustomReadonlyEditorProvider
 
 
     private handlePdf(webview: vscode.Webview) {
-        const baseUrl = webview.asWebviewUri(vscode.Uri.file(this.extensionPath + "/resource/pdf"))
-            .toString().replace(/\?.+$/, '').replace('https://git', 'https://file');
+        const baseUrl = this.getBaseUrl(webview, 'pdf')
         webview.html = readFileSync(this.extensionPath + "/resource/pdf/viewer.html", 'utf8').replace("{{baseUrl}}", baseUrl)
     }
 
     private handleFont(handler: Handler) {
         const webview = handler.panel.webview;
-        webview.html = Util.buildPath(
-            readFileSync(`${this.extensionPath}/resource/font/index.html`, 'utf8'),
-            webview, `${this.extensionPath}/resource/font`
-        )
+        const baseUrl = this.getBaseUrl(webview, 'font')
+        webview.html = readFileSync(`${this.extensionPath}/resource/font/index.html`, 'utf8')
+            .replace('{{baseUrl}}', baseUrl)
     }
 
+    private getBaseUrl(webview: vscode.Webview, path: string) {
+        const baseUrl = webview.asWebviewUri(vscode.Uri.file(`${this.extensionPath}/resource/${path}`))
+            .toString().replace(/\?.+$/, '').replace('https://git', 'https://file')
+        return baseUrl;
+    }
 
     private handleXlsx(uri: vscode.Uri, handler: Handler) {
         const enc = new TextEncoder();