Noto Sans JP の別名を全部列挙

Author: na-trium-144

app/globals.css

@@ -90,6 +90,19 @@ mycdark:
 
 /* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */
 @theme {
-  --font-mono: "Inconsolata Variable", "Noto Sans JP Variable", monospace;
-  --font-sans: 'M PLUS Rounded 1c', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  /*
+  Variable がついているほうはlayout.tsxでインポートしているwebフォント、
+  それ以外はフォールバック (インストールされていればwebフォントをダウンロードする必要はないため)
+
+  NotoSansJPの指定は正直なくても良い気はするが、
+  あまり変なフォントが選ばれるとターミナルやコードエディターの表示が崩れる可能性があるので適当に指定している
+  */
+  --font-mono:
+    "Inconsolata", "Inconsolata Variable", "Noto Sans JP", "Noto Sans CJK JP",
+    "Source Han Sans JP", "源ノ角ゴシック", "Noto Sans JP Variable", monospace;
+  /*
+  */
+  --font-sans:
+    "M PLUS Rounded 1c", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
 }

app/terminal/terminal.tsx

@@ -72,12 +72,19 @@ export function useTerminal(props: TerminalProps) {
   useEffect(() => {
     if (typeof window !== "undefined") {
       const abortController = new AbortController();
-      // globals.cssでフォントを指定し読み込んでいるが、
-      // それが読み込まれる前にterminalを初期化してしまうとバグる。
+      /*
+      globals.cssでフォントを指定し読み込んでいるが、
+      それが読み込まれる前にterminalを初期化してしまうとバグるので、
+      ここで fonts.load() をawaitしている。
+      
+      TODO: Inconsolataがインストール済みの環境の場合ダウンロードしなくて済むように
+      "Inconsolata", "Inconsolata Variable" という指定にしているのに、
+      ここで Inconsolata Variable をloadしたら意味ねえじゃん
+      */
       Promise.all([
         import("@xterm/xterm"),
         import("@xterm/addon-fit"),
-        document.fonts.load("0.875rem Inconsolata Variable"),
+        document.fonts.load("1rem Inconsolata Variable"),
       ]).then(([{ Terminal }, { FitAddon }]) => {
         if (!abortController.signal.aborted) {
           const fromCSS = (varName: string) =>
@@ -93,7 +100,8 @@ export function useTerminal(props: TerminalProps) {
             ), // 1rem
             lineHeight: 1.2,
             letterSpacing: 0,
-            fontFamily: "'Inconsolata Variable','Noto Sans JP Variable'",
+            fontFamily:
+              "'Inconsolata', 'Inconsolata Variable', 'Noto Sans JP', 'Noto Sans CJK JP', 'Source Han Sans JP', '源ノ角ゴシック', 'Noto Sans JP Variable', monospace",
             theme: {
               // DaisyUIの変数を使用してテーマを設定している
               // TODO: ダークテーマ/ライトテーマを切り替えたときに再設定する?