feat: Reduced font requests via subsets

Erimus-Koo · Sep 25, 2023 · 2726340 · 2726340
1 parent f6ba851
commit 2726340
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 18 deletions.
diff --git a/erimus-note-styles.code-workspace b/erimus-note-styles.code-workspace
@@ -0,0 +1,13 @@
+{
+  "folders": [
+	{
+		"path": "../../notebook/.obsidian/snippets"
+	},
+	{
+		"path": "."
+	}
+],
+  "settings": {
+    "liveServer.settings.multiRootWorkspaceName": "theme_typora_docsify"
+  }
+}
diff --git a/typora-docsify.css b/typora-docsify.css
@@ -1,23 +1,46 @@
-@import url("typora-docsify/codeblock.css");
+@import "typora-docsify/codeblock.css";
 @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,600;1,400;1,600&display=swap");
 /* 数字部分使用 Barlow
-字重500跟400的Poppins比较配
-https://fonts.googleapis.com/css2?family=Barlow:wght@400;600
-https://transfonter.org
+适配数字范围 ------------------------------
 1234567890.,-+\/@
 [0-9]U+30-39, [%]U+25, [+,-./]U+2B-2F, [\]U+5C, [@]U+40 
+
+字重500的Barlow跟400的Poppins比较配
+
+如果需要Barlow所有字符 用👇 然后取 Latin ------------------------------
+https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700
+
+Barlow latin 👇
+
+400 Barlow
+https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3_-gs51os.woff2
+
+500 Barlow
+https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3_-gs51os.woff2
+
+600 Barlow Semibold
+https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E30-8s51os.woff2
+
+700 Barlow Bold
+https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3t-4s51os.woff2
+
+如果只需要指定的少数字符 用👇 ------------------------------
+https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&text=1234567890.,-+\/@
+
+转换base64版本内嵌字体 ------------------------------
+https://transfonter.org
 */
 @font-face {
   font-family: "Number";
-  src: local("Barlow"), url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3_-gs51os.woff2) format("woff2");
+  src: local("Barlow Medium"), url(https://fonts.gstatic.com/l/font?kit=7cHqv4kjgoGqM7E3_-gc5Ug4vRMOWJ6MD8KJkq_lkyBzFuY&skey=4c8d0d0b13516148&v=v12) format("woff2");
   font-weight: 400;
-  unicode-range: U+30-39, U+25, U+2B-2F, U+5C;
+  unicode-range: U+30-39, U+25, U+2B-2F, U+5C, U+40;
 }
 @font-face {
   font-family: "Number";
-  src: local("Barlow"), url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E30-8s51ostz0rdg.woff2) format("woff2");
+  src: local("Barlow Semibold"), url(https://fonts.gstatic.com/l/font?kit=7cHqv4kjgoGqM7E30-8c5Ug4vRMOWJ6MD8KJkq_lkyBzFuY&skey=a9a2225c15335812&v=v12) format("woff2");
   font-weight: 600;
-  unicode-range: U+30-39, U+25, U+2B-2F, U+5C;
+  unicode-range: U+30-39, U+25, U+2B-2F, U+5C, U+40;
 }
 /* 优先启用表情图标 避免被 Nerd Font 等大字符集覆盖，比如⚠️
 但emoji会覆盖数字，所以要限定一下emoji的适用范围，避开常用拉丁文。

diff --git a/typora-docsify.less b/typora-docsify.less
@@ -1,38 +1,70 @@
 // write by vscode, format by prettier
 
 // import code block css
-@import url("typora-docsify/codeblock.css");
+@import "typora-docsify/codeblock.css";
 
 // import google fonts
 // @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,600;1,400;1,600&display=swap');
 @import (css)
   url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,600;1,400;1,600&display=swap");
 
 /* 数字部分使用 Barlow
-字重500跟400的Poppins比较配
-https://fonts.googleapis.com/css2?family=Barlow:wght@400;600
-https://transfonter.org
+适配数字范围 ------------------------------
 1234567890.,-+\/@
 [0-9]U+30-39, [%]U+25, [+,-./]U+2B-2F, [\]U+5C, [@]U+40 
+
+字重500的Barlow跟400的Poppins比较配
+
+如果需要Barlow所有字符 用👇 然后取 Latin ------------------------------
+https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700
+
+Barlow latin 👇
+
+400 Barlow
+https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3_-gs51os.woff2
+
+500 Barlow
+https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3_-gs51os.woff2
+
+600 Barlow Semibold
+https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E30-8s51os.woff2
+
+700 Barlow Bold
+https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3t-4s51os.woff2
+
+如果只需要指定的少数字符 用👇 ------------------------------
+https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&text=1234567890.,-+\/@
+
+转换base64版本内嵌字体 ------------------------------
+https://transfonter.org
 */
 @font-face {
   font-family: "Number";
-  src: local("Barlow"),
-    url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3_-gs51os.woff2)
+  src: local("Barlow Medium"),
+    url(https://fonts.gstatic.com/l/font?kit=7cHqv4kjgoGqM7E3_-gc5Ug4vRMOWJ6MD8KJkq_lkyBzFuY&skey=4c8d0d0b13516148&v=v12)
       format("woff2");
   font-weight: 400;
-  unicode-range: U+30-39, U+25, U+2B-2F, U+5C;
+  unicode-range: U+30-39, U+25, U+2B-2F, U+5C, U+40;
 }
 
 @font-face {
   font-family: "Number";
-  src: local("Barlow"),
-    url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E30-8s51ostz0rdg.woff2)
+  src: local("Barlow Semibold"),
+    url(https://fonts.gstatic.com/l/font?kit=7cHqv4kjgoGqM7E30-8c5Ug4vRMOWJ6MD8KJkq_lkyBzFuY&skey=a9a2225c15335812&v=v12)
       format("woff2");
   font-weight: 600;
-  unicode-range: U+30-39, U+25, U+2B-2F, U+5C;
+  unicode-range: U+30-39, U+25, U+2B-2F, U+5C, U+40;
 }
 
+// @font-face {
+//   font-family: "Number";
+//   src: local("Barlow Bold"),
+//     url(https://fonts.gstatic.com/l/font?kit=7cHqv4kjgoGqM7E3t-4c5Ug4vRMOWJ6MD8KJkq_lkyBzFuY&skey=f60e73b1bbf362f3&v=v12)
+//       format("woff2");
+//   font-weight: 700;
+//   unicode-range: U+30-39, U+25, U+2B-2F, U+5C, U+40;
+// }
+
 /* 优先启用表情图标 避免被 Nerd Font 等大字符集覆盖，比如⚠️
 但emoji会覆盖数字，所以要限定一下emoji的适用范围，避开常用拉丁文。
 苹果: "AppleColorEmoji", Win: "Segoe UI Emoji" */