Update Noto Sans / Serif TC/CJK

bobbytung · Sep 29, 2024 · 6394d30 · 6394d30
1 parent fd13782
commit 6394d30
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@ Test Chinese Variable Font on browsers
 - [文鼎晶熙黑測試頁面](https://bobbytung.github.io/ChineseVariableFontTest/index.html)
 - [思源黑體VF測試頁面](https://bobbytung.github.io/ChineseVariableFontTest/index_SHsans.html)
 - [思源宋體VF測試頁面](https://bobbytung.github.io/ChineseVariableFontTest/index_SHserif.html)
+- [Noto Serif測試頁面](https://bobbytung.github.io/ChineseVariableFontTest/index_notoserif.html)
+- [Noto Sans測試頁面](https://bobbytung.github.io/ChineseVariableFontTest/index_notosans.html)
 - [自行測試頁面](https://bobbytung.github.io/ChineseVariableFontTest/index_test.html)
 
 （2022/11/6更新，以上頁面思源體指定Local Font，但Safari 16.1 [macOS Ventura 13.0]起可能因為隱私問題，不會調用Local Font，所以請用其他瀏覽器測試。）

diff --git a/index_notosans.html b/index_notosans.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="zh-TW" lang="zh-TW">
+    <head>
+        <meta charset="utf-8" />
+        <style>
+			p { font-family: "Noto Sans TC", "Noto Sans CJK";}
+			.thin {font-variation-settings: 'wght' 100;}
+			.ultralight {font-variation-settings: 'wght' 200;}
+			.light {font-variation-settings: 'wght' 300;}
+			.normal {font-variation-settings: 'wght' 400;}
+			.medium {font-variation-settings: 'wght' 500;}
+			.semibold {font-variation-settings: 'wght' 600;}
+			.bold {font-variation-settings: 'wght' 700;}
+			.ultrabold {font-variation-settings: 'wght' 800;}
+			.heavy {font-variation-settings: 'wght' 900;}
+			footer {font-family: sans-serif;text-align: center;font-size: 60%;margin-top: 3rem;
+			}
+	    </style>
+
+        <title>Chinese VF Test - Source Han Sans VF</title>
+    </head>
+    <body class="bodymatter" epub:type="bodymatter">
+
+<h4>Thin, 100</h4>
+<p class="thin">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Ultra Light, 200</h4>
+<p class="ultralight">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Light, 300</h4>
+<p class="light">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Normal, 400</h4>
+<p class="normal">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Medium, 500</h4>
+<p class="medium">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>SemiBold, 600</h4>
+<p class="semibold">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Bold, 700</h4>
+<p class="bold">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>UltraBold, 800</h4>
+<p class="ultrabold">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Heavy, 900</h4>
+<p class="heavy">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<footer>本頁字體指定<a href="https://github.com/adobe-fonts/source-han-sans/tree/release">思源黑體VF</a>(Source Han Sans TC VF)</footer>
+    </body>
+</html>
diff --git a/index_notoserif.html b/index_notoserif.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="zh-TW" lang="zh-TW">
+    <head>
+        <meta charset="utf-8" />
+        <style>
+			p { font-family: "思源宋體 VF";}
+			.thin {font-variation-settings: 'wght' 100;}
+			.ultralight {font-variation-settings: 'wght' 200;}
+			.light {font-variation-settings: 'wght' 300;}
+			.normal {font-variation-settings: 'wght' 400;}
+			.medium {font-variation-settings: 'wght' 500;}
+			.semibold {font-variation-settings: 'wght' 600;}
+			.bold {font-variation-settings: 'wght' 700;}
+			.ultrabold {font-variation-settings: 'wght' 800;}
+			.heavy {font-variation-settings: 'wght' 900;}
+			footer {font-family: sans-serif;text-align: center;font-size: 60%;margin-top: 3rem;
+			}
+	    </style>
+
+        <title>Chinese VF Test - Source Han Serif VF</title>
+    </head>
+    <body class="bodymatter" epub:type="bodymatter">
+
+<h4>Thin, 100</h4>
+<p class="thin">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Ultra Light, 200</h4>
+<p class="ultralight">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Light, 300</h4>
+<p class="light">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Normal, 400</h4>
+<p class="normal">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Medium, 500</h4>
+<p class="medium">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>SemiBold, 600</h4>
+<p class="semibold">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Bold, 700</h4>
+<p class="bold">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>UltraBold, 800</h4>
+<p class="ultrabold">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<h4>Heavy, 900</h4>
+<p class="heavy">濃愁：小猶豫小時候的煩惱很清澈，長大的煩惱卻很混濁。如果以湯頭比喻煩惱這件事，小時候的像是昆布鰹魚湯，滾燙的血騷動著整鍋的情緒，但一眼就看出端倪來、長大了莫名就變成南瓜牛奶湯，就算再煮下去，也只會，唉，越來越「濃愁」。</p>
+
+<footer>本頁字體指定<a href="https://github.com/adobe-fonts/source-han-serif/tree/release#downloading-source-han-serif">思源宋體VF</a>(Source Han Serif TC VF)</footer>
+    </body>
+</html>