List of Font [text.Baldanders.info]

変体仮名をサポートした

2025-10-03T04:08:59+00:00

昨年の古い話題になるのだが Google NOTO フォントが変体仮名¹ をリリースした。

というわけで変体仮名を Web フォントとして組み込むことができる。このサイトでの設定はこんな感じ。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=BIZ+UDMincho:wght@400;700&family=Intel+One+Mono:wght@400;700&family=Noto+Color+Emoji&family=Noto+Sans:wght@400;700&family=Noto+Serif+Hentaigana:wght@400;700&family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet">

これで CSS の font-family に 'Noto Serif Hentaigana' を追加すればよい。

body {
  font-family: 'Noto Serif', 'BIZ UDMincho', 'Noto Serif Hentaigana', serif;
}

ちょっと表示させてみよう。以前「Unicode のカタカナを調べる」で書いたコードを流用して Unicode で変体仮名を含む仮名補助（Kana Supplement; U+1B000 - U+1B0FF）および仮名拡張A（Kana Extended-A; U+1B100 – U+1B12F）を列挙してみる。こんな感じ。

package main

import (
    "fmt"
    "unicode"
)

func main() {
    i := 0
    for c := rune(0x1b000); c <= rune(0x1b12f); c++ {
        if unicode.In(c, unicode.Hiragana) || unicode.In(c, unicode.Katakana) {
            fmt.Printf("%#U ", c)
            i++
            i &= 0x0f
            if i == 0 {
                fmt.Println()
            }
        }
    }
    fmt.Println()
}

実行結果は以下の通り。

$ go run main.go
U+1B000 '𛀀' U+1B001 '𛀁' U+1B002 '𛀂' U+1B003 '𛀃' U+1B004 '𛀄' U+1B005 '𛀅' U+1B006 '𛀆' U+1B007 '𛀇' U+1B008 '𛀈' U+1B009 '𛀉' U+1B00A '𛀊' U+1B00B '𛀋' U+1B00C '𛀌' U+1B00D '𛀍' U+1B00E '𛀎' U+1B00F '𛀏' 
U+1B010 '𛀐' U+1B011 '𛀑' U+1B012 '𛀒' U+1B013 '𛀓' U+1B014 '𛀔' U+1B015 '𛀕' U+1B016 '𛀖' U+1B017 '𛀗' U+1B018 '𛀘' U+1B019 '𛀙' U+1B01A '𛀚' U+1B01B '𛀛' U+1B01C '𛀜' U+1B01D '𛀝' U+1B01E '𛀞' U+1B01F '𛀟' 
U+1B020 '𛀠' U+1B021 '𛀡' U+1B022 '𛀢' U+1B023 '𛀣' U+1B024 '𛀤' U+1B025 '𛀥' U+1B026 '𛀦' U+1B027 '𛀧' U+1B028 '𛀨' U+1B029 '𛀩' U+1B02A '𛀪' U+1B02B '𛀫' U+1B02C '𛀬' U+1B02D '𛀭' U+1B02E '𛀮' U+1B02F '𛀯' 
U+1B030 '𛀰' U+1B031 '𛀱' U+1B032 '𛀲' U+1B033 '𛀳' U+1B034 '𛀴' U+1B035 '𛀵' U+1B036 '𛀶' U+1B037 '𛀷' U+1B038 '𛀸' U+1B039 '𛀹' U+1B03A '𛀺' U+1B03B '𛀻' U+1B03C '𛀼' U+1B03D '𛀽' U+1B03E '𛀾' U+1B03F '𛀿' 
U+1B040 '𛁀' U+1B041 '𛁁' U+1B042 '𛁂' U+1B043 '𛁃' U+1B044 '𛁄' U+1B045 '𛁅' U+1B046 '𛁆' U+1B047 '𛁇' U+1B048 '𛁈' U+1B049 '𛁉' U+1B04A '𛁊' U+1B04B '𛁋' U+1B04C '𛁌' U+1B04D '𛁍' U+1B04E '𛁎' U+1B04F '𛁏' 
U+1B050 '𛁐' U+1B051 '𛁑' U+1B052 '𛁒' U+1B053 '𛁓' U+1B054 '𛁔' U+1B055 '𛁕' U+1B056 '𛁖' U+1B057 '𛁗' U+1B058 '𛁘' U+1B059 '𛁙' U+1B05A '𛁚' U+1B05B '𛁛' U+1B05C '𛁜' U+1B05D '𛁝' U+1B05E '𛁞' U+1B05F '𛁟' 
U+1B060 '𛁠' U+1B061 '𛁡' U+1B062 '𛁢' U+1B063 '𛁣' U+1B064 '𛁤' U+1B065 '𛁥' U+1B066 '𛁦' U+1B067 '𛁧' U+1B068 '𛁨' U+1B069 '𛁩' U+1B06A '𛁪' U+1B06B '𛁫' U+1B06C '𛁬' U+1B06D '𛁭' U+1B06E '𛁮' U+1B06F '𛁯' 
U+1B070 '𛁰' U+1B071 '𛁱' U+1B072 '𛁲' U+1B073 '𛁳' U+1B074 '𛁴' U+1B075 '𛁵' U+1B076 '𛁶' U+1B077 '𛁷' U+1B078 '𛁸' U+1B079 '𛁹' U+1B07A '𛁺' U+1B07B '𛁻' U+1B07C '𛁼' U+1B07D '𛁽' U+1B07E '𛁾' U+1B07F '𛁿' 
U+1B080 '𛂀' U+1B081 '𛂁' U+1B082 '𛂂' U+1B083 '𛂃' U+1B084 '𛂄' U+1B085 '𛂅' U+1B086 '𛂆' U+1B087 '𛂇' U+1B088 '𛂈' U+1B089 '𛂉' U+1B08A '𛂊' U+1B08B '𛂋' U+1B08C '𛂌' U+1B08D '𛂍' U+1B08E '𛂎' U+1B08F '𛂏' 
U+1B090 '𛂐' U+1B091 '𛂑' U+1B092 '𛂒' U+1B093 '𛂓' U+1B094 '𛂔' U+1B095 '𛂕' U+1B096 '𛂖' U+1B097 '𛂗' U+1B098 '𛂘' U+1B099 '𛂙' U+1B09A '𛂚' U+1B09B '𛂛' U+1B09C '𛂜' U+1B09D '𛂝' U+1B09E '𛂞' U+1B09F '𛂟' 
U+1B0A0 '𛂠' U+1B0A1 '𛂡' U+1B0A2 '𛂢' U+1B0A3 '𛂣' U+1B0A4 '𛂤' U+1B0A5 '𛂥' U+1B0A6 '𛂦' U+1B0A7 '𛂧' U+1B0A8 '𛂨' U+1B0A9 '𛂩' U+1B0AA '𛂪' U+1B0AB '𛂫' U+1B0AC '𛂬' U+1B0AD '𛂭' U+1B0AE '𛂮' U+1B0AF '𛂯' 
U+1B0B0 '𛂰' U+1B0B1 '𛂱' U+1B0B2 '𛂲' U+1B0B3 '𛂳' U+1B0B4 '𛂴' U+1B0B5 '𛂵' U+1B0B6 '𛂶' U+1B0B7 '𛂷' U+1B0B8 '𛂸' U+1B0B9 '𛂹' U+1B0BA '𛂺' U+1B0BB '𛂻' U+1B0BC '𛂼' U+1B0BD '𛂽' U+1B0BE '𛂾' U+1B0BF '𛂿' 
U+1B0C0 '𛃀' U+1B0C1 '𛃁' U+1B0C2 '𛃂' U+1B0C3 '𛃃' U+1B0C4 '𛃄' U+1B0C5 '𛃅' U+1B0C6 '𛃆' U+1B0C7 '𛃇' U+1B0C8 '𛃈' U+1B0C9 '𛃉' U+1B0CA '𛃊' U+1B0CB '𛃋' U+1B0CC '𛃌' U+1B0CD '𛃍' U+1B0CE '𛃎' U+1B0CF '𛃏' 
U+1B0D0 '𛃐' U+1B0D1 '𛃑' U+1B0D2 '𛃒' U+1B0D3 '𛃓' U+1B0D4 '𛃔' U+1B0D5 '𛃕' U+1B0D6 '𛃖' U+1B0D7 '𛃗' U+1B0D8 '𛃘' U+1B0D9 '𛃙' U+1B0DA '𛃚' U+1B0DB '𛃛' U+1B0DC '𛃜' U+1B0DD '𛃝' U+1B0DE '𛃞' U+1B0DF '𛃟' 
U+1B0E0 '𛃠' U+1B0E1 '𛃡' U+1B0E2 '𛃢' U+1B0E3 '𛃣' U+1B0E4 '𛃤' U+1B0E5 '𛃥' U+1B0E6 '𛃦' U+1B0E7 '𛃧' U+1B0E8 '𛃨' U+1B0E9 '𛃩' U+1B0EA '𛃪' U+1B0EB '𛃫' U+1B0EC '𛃬' U+1B0ED '𛃭' U+1B0EE '𛃮' U+1B0EF '𛃯' 
U+1B0F0 '𛃰' U+1B0F1 '𛃱' U+1B0F2 '𛃲' U+1B0F3 '𛃳' U+1B0F4 '𛃴' U+1B0F5 '𛃵' U+1B0F6 '𛃶' U+1B0F7 '𛃷' U+1B0F8 '𛃸' U+1B0F9 '𛃹' U+1B0FA '𛃺' U+1B0FB '𛃻' U+1B0FC '𛃼' U+1B0FD '𛃽' U+1B0FE '𛃾' U+1B0FF '𛃿' 
U+1B100 '𛄀' U+1B101 '𛄁' U+1B102 '𛄂' U+1B103 '𛄃' U+1B104 '𛄄' U+1B105 '𛄅' U+1B106 '𛄆' U+1B107 '𛄇' U+1B108 '𛄈' U+1B109 '𛄉' U+1B10A '𛄊' U+1B10B '𛄋' U+1B10C '𛄌' U+1B10D '𛄍' U+1B10E '𛄎' U+1B10F '𛄏' 
U+1B110 '𛄐' U+1B111 '𛄑' U+1B112 '𛄒' U+1B113 '𛄓' U+1B114 '𛄔' U+1B115 '𛄕' U+1B116 '𛄖' U+1B117 '𛄗' U+1B118 '𛄘' U+1B119 '𛄙' U+1B11A '𛄚' U+1B11B '𛄛' U+1B11C '𛄜' U+1B11D '𛄝' U+1B11E '𛄞' U+1B11F '𛄟' 
U+1B120 '𛄠' U+1B121 '𛄡' U+1B122 '𛄢'

皆さんの環境では見えるだろうか。

ちなみに U+1B000 (𛀀) および U+1B001 (𛀁) は Unicode 6 で “Historic Katakana” および “Historic Hiragana” として収録されたそうで，これまでの NOTO 日本語フォント等で表示できる。また U+1B120 (𛄠), U+1B121 (𛄡), U+1B122 (𛄢) は “Historic Katakana” として Unicode 14 で追加されたそうだ。

同じく Unicode 14 で追加された U+1B11F は表示されないのか？いや U+1B11F は “Historic Hiragana” に分類されているから “Hentaigana” ではないという判定なのかな？でもでも，上述の “Historic Katakana” は U+1B122 まで表示できるんだよな。うーむ，よく分からん。

まっ，細かいことは置いておいて，例として蕎麦屋の看板や暖簾に書かれている変体仮名「𛁛𛂦゙」を挙げてみる。あれって元は「楚（そ）」「者（は）」なんだそうで

楚 → 𛁛 (U+1B05B)
者 → 𛂦゙ (U+1B0A6 + U+3099; 濁点が付いてる)

ってな感じらしい。勉強になりました。

「変体仮名一覧」に変体仮名の各文字に対応する読みと元になる漢字を表にまとめてみた。参考にどうぞ。 𛂙（乃）や 𛃀（本）といった文字は今でもたまに見かける。そういえば，花札の赤短に書かれている「あかよろし²」の「か」は変体仮名で「𛀙（可）」と表記されているため，つい「あのよろし」とか読んでしまう（笑）こんな感じで変体仮名がしれっと紛れていることがあるので油断できない。

ブックマーク

参考図書

プログラミング言語Go (ADDISON-WESLEY PROFESSIONAL COMPUTING SERIES): Alan A.A. Donovan (著), Brian W. Kernighan (著), 柴田芳樹 (翻訳); 丸善出版 2016-06-20; 単行本（ソフトカバー）; 4621300253 (ASIN), 9784621300251 (EAN), 4621300253 (ISBN); 評価

著者のひとりは（あの「バイブル」とも呼ばれる）通称 “K&R” の K のほうである。この本は Go 言語の教科書と言ってもいいだろう。と思ったら絶版状態らしい（2025-01 現在）。復刊を望む！

reviewed by Spiegel on 2016-07-13 (powered by PA-APIv5)

変体仮名とは，簡単に言うと仮名の異体字のこと。変体仮名は明治時代に廃止されたが，店の看板などで依然使われている。コンピュータ・システムでは，地名や古い戸籍の人名などで使われていることがあるそうで「住民基本台帳収録変体仮名」として一部の変体仮名が運用されていたらしい。その後 Unicode 10 から本格的に変体仮名がサポートされるようになった。フォントとしては「IPAmj明朝フォント」が変体仮名を含む異体字を幅広くカバーしている。 ↩︎
「あかよろし」は「めっちゃいい！」くらいの意味（笑） ↩︎

Intel One Mono フォントに換装する

2025-09-16T03:31:07+00:00

五十路に入ってからから近視・乱視・老眼の三重苦になり，2種類の眼鏡を使い分けてるのだが，特にモニタでプログラム・コードを読むのがしんどくなりつつある。

というところで以下の記事を見かけた。

Intelが開発したフォント「Intel One Mono」、目が悪くても読みやすいコーディング向けフォント【レビュー】 - 窓の杜

ひょっとしてこれは私向きか？

via intel/intel-one-mono: Intel One Mono font repository

私は古い人間なので，ゼロは “$\emptyset$” (empty set) みたいに斜線が入ってないと嫌なのよ（だから今までずっと Inconsolata を使っていた）。数字の 1 と大文字の I と小文字の l，小文字の i と j の区別も分かりやすいし，記号類もデフォルメされてる感じで見やすい。これならイケそうかな。早速ローカルにインストールしてみよう。

リポジトリのリリースページにある最新版の otf.zip (zip 圧縮されている) を取ってくる。 Ubuntu の場合は，展開して取得した *.otf ファイルを全て /usr/local/share/fonts/ または ~/.local/share/fonts/ ディレクトリに放り込めばOK。その後

$ fc-cache -fv

でフォントキャッシュを更新するのを忘れないように。上手くインストールできれば

$ fc-list | grep Intel
/usr/local/share/fonts/IntelOneMono-Light.otf: Intel One Mono,Intel One Mono Light:style=Light,Regular
/usr/local/share/fonts/IntelOneMono-Italic.otf: Intel One Mono:style=Italic
/usr/local/share/fonts/IntelOneMono-Medium.otf: Intel One Mono,Intel One Mono Medium:style=Medium,Regular
/usr/local/share/fonts/IntelOneMono-Regular.otf: Intel One Mono:style=Regular
/usr/local/share/fonts/IntelOneMono-MediumItalic.otf: Intel One Mono,Intel One Mono Medium:style=Medium Italic,Italic
/usr/local/share/fonts/IntelOneMono-LightItalic.otf: Intel One Mono,Intel One Mono Light:style=Light Italic,Italic
/usr/local/share/fonts/IntelOneMono-Bold.otf: Intel One Mono:style=Bold
/usr/local/share/fonts/IntelOneMono-BoldItalic.otf: Intel One Mono:style=Bold Italic

みたいな感じにリスト表示できる。

VS Code で Intel One Mono フォントを使うには “Font Family” 項目で

Font Family の設定例

という感じに 'Intel One Mono' または 'Intel One Mono Medium' を最初に指定すればよい。 VS Code は複数フォントを（並び順で優先順位を決めて）指定できるのが嬉しい。

リポジトリを見ると現在最新の V1.4.0 のリリースは 2024-07-26 らしい。これって Google Fonts にも収録されている？と思って探したらありました。

Intel One Mono - Google Fonts

ってことは，Web フォントとしても使えるってことか。このブログサイトでの設定は以下のようにしてみた。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=BIZ+UDMincho:wght@400;700&family=Intel+One+Mono:ital,wght@0,300..700;1,300..700&family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:wght@100..900&display=swap" rel="stylesheet">

試しに何かコードを表示してみよう。今年の始めに紹介した2025年の干支を求める Go プログラムを表示してみる。

package main

import (
    "fmt"

    "github.com/goark/koyomi/zodiac"
)

func main() {
    year := 2025
    干, 支 := zodiac.ZodiacYearNumber(year)
    fmt.Printf("%d年は%v%v，恵方は%v (%v°)", year, 干, 支, 干.DirectionJp(), 干.Direction())
}

2025年も心臓リハビリ＠がんばらないより

上手く表示できてるかな。皆さんの環境ではどうだろう。

括弧などの記号が見やすいのがよい。エディタと Web フォントは Intel One Mono でいこう。私文書は Inconsolata のままでいいかな。そもそも紙（含PDF）に書くような文書でコードを書くことは少ないしな。

ブックマーク

Typst の数式モード

2025-02-26T13:34:05+00:00

今回は今まで敢えて後回しにしていた数式モード（math mode）¹ の話。パッと見は $\mathrm{\LaTeX}$ 記法に似ているのだが色々と違っている。

LaTeX 記法とは似て非なる…

たとえば $\mathrm{\LaTeX}$ 記法では

エネルギーと質量には $E=mc^2$ の関係がある。

と書けば

エネルギーと質量には $E=mc^2$ の関係がある。

という感じに組版される。これをそのまま Typst で組版しようとすると

$ typst compile math.typ
error: unknown variable: mc
  ┌─ math.typ:1:14
  │
1 │ エネルギーと質量には $E=mc^2$ の関係がある。
  │                         ^^
  │
  = hint: if you meant to display multiple letters as is, try adding spaces between each letter: `m c`
  = hint: or if you meant to display this as text, try placing it in quotes: `"mc"`

てな感じで怒られる。どうも2つ以上の文字の綴りは何らかのシンボルと解釈されるらしい。たとえば $\mathrm{\LaTeX}$ 記法の以下の数式は

\[
  \left( \int_0^\infty \frac{\sin x}{\sqrt x} dx \right)^2 =
  \sum_{k=0}^\infty \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} =
  \prod_{k=1}^\infty \frac{4k^2}{4k^2-1} =
  \frac{\pi}{2}
\]

『［改訂第9版］LaTeX美文書作成入門』p.221より

equation (STIX2 Math)

Typst 記法だと以下のようになる。

$
  (integral_0^infinity (sin x) / sqrt(x) dif x)^2 =
  sum_(k=0)^infinity (2k)! / (2^(2k) (k!)^2) 1 / (2k+1) =
  product_(k=1)^(infinity) (4k^2) / (4k^2-1) =
  pi / 2
$

equation by Typst (STIX2 Math)

$\mathrm{\LaTeX}$ 記法の { ... } に相当するものが Typst 記法だと ( ... ) になってるのが紛らわしい。おそらく文脈で判別してるんだろうけど。あとインライン数式も別行立て数式もいずれも $ ... $ なのも紛らわしい。こちらは $E=m c^2$ と $ E=m c^2 $ の違い。数式の前後に空白文字や改行が入ってると別行立て数式と認識するらしい。

これは $\mathrm{\LaTeX}$ 記法に慣れている人はちょっと大変かもしれない。 Pandoc には $\mathrm{\LaTeX}$ 記法 → Typst 記法への変換機能があるそうだが，そもそも Typst を使うような人はわざわざ Pandoc を導入しないと思う。

フォントの設定

数式モードのフォントを指定する場合は以下のように記述する。

#show math.equation: set text(font: "New Computer Modern Math")

既定は New Computer Modern Math。数式モード用のフォントには通常のフォントファイルは使えないので注意。

Note that only special OpenType math fonts are suitable for typesetting maths.

via Math fonts

試しに Euler フォントで試そうと思ったが，そういやこれってグリフが全部揃ってなかったわ。 STIX2 フォントのほうはこんな感じで上手くいった²。

#set text(font: (
  (
    name: "STIX Two Text",
    covers: "latin-in-cjk",
  ),
  "Noto Serif CJK JP"
), lang: "ja")
#show math.equation: set text(font: ("STIX Two Math"))

アルベルト・アインシュタインは1905年に発表した特殊相対性理論を通して以下の関係を導き出した。

$
  E = m c^2 "（エネルギーと質量の等価性）"
$

数式表現（STIX2 フォント）

ただし，上の例では数式モードに日本語が入った場合に問題が出る。どうも最初の #set text( ... ) のルール設定が数式モードでは適用されないみたいで

数式表現（STIX2 フォント）プロパティ

という感じで予期しないフォントが埋め込まれてしまった。

これを回避するには

#show math.equation: set text(font: ("New Computer Modern Math", "NOTO Serif CJK JP"))

などと指定する。これで New Computer Modern Math ＞ NOTO Serif CJK JP という優先順位でフォントを選択する。

数式表現（STIX2 フォント）プロパティ

ありゃ。 Medium フォントが選択されてる。なんで？うーん。とりあえずこれは置いておこう。

立体か斜体か

数式の場合は基本的にイタリック体または斜体で記述するのが原則だが，以下の例外がある。

数字はローマン体にする（$\mathit{3.14}$ ではなく $3.14$）

複数文字からなる名前はローマン体にする（$sin\,x$ ではなく $\sin x$）

単位記号はローマン体にする（$3\,m$ ではなく $3\,\mathrm{m}$）

『［改訂第9版］LaTeX美文書作成入門』p.94より

ただ立体（upright）か斜体（slant）³ かの規準は学会等によっても違うようで，たとえば積分等に出てくる dx とかでも斜体の $dx$ とするか立体の $\mathrm{d}x$ とするか流儀があるらしい。ちなみに Typst では積分の dx を立体で表現するために dif x と記述する。

$\mathrm{\LaTeX}$ には unicode-math パッケージというのがあって，数式の書体についてはこのパッケージである程度コントロールできる。詳しくは拙文「数式用フォントで遊ぶ」を参考にどうぞ。 Typst には unicode-math パッケージに相当するものはないっぽい？

Typst では $\sin$ などの一般的な演算子（関数）はあらかじめ定義されていて，これらは立体で表示される。

Typst predefines the operators arccos, arcsin, arctan, arg, cos, cosh, cot, coth, csc, csch, ctg, deg, det, dim, exp, gcd, lcm, hom, id, im, inf, ker, lg, lim, liminf, limsup, ln, log, max, min, mod, Pr, sec, sech, sin, sinc, sinh, sup, tan, tanh, tg and tr.

via Text Operator Function – Typst Documentation

この一覧にない演算子（関数）は自分で定義できる。

#set text(font: "Noto Serif CJK JP", lang: "ja")
#show math.equation: set text(font: "STIX Two Math")

#let GF = math.op("GF")

位数が $q$ である有限体を $GF(q)$ などと表記します。

カスタム演算子（関数）

他に $\int$ などのシンボルは “Symbols” のページまたは sym の項を参照のこと。ちなみに emoji も使える。

#show math.equation: set text(font: "STIX Two Math")

$
  sum_(k=0)^infinity #text(red)[#emoji.suit.heart]^k
$

数学ガールの秘密ノート

シンボルについては $\mathrm{\LaTeX}$ の physica パッケージに近い physica パッケージがあるらしい。

メートル（$\mathrm{m}$）などの単位も立体で表記する。単位等の表現については $\mathrm{\LaTeX}$ の siunitx パッケージに近い metro または unify パッケージを使う手がある。 unify のほうが活況？

\[
  1\,\mathrm{atm} = 1.01325\,\mathrm{bar} = 101,325\,\mathrm{Pa}
\]

\[ 1\,\mathrm{atm} = 1.01325\,\mathrm{bar} = 101,325\,\mathrm{Pa} \]

MathJax だと泥臭い記述になるのはご容赦（MathJax 用の動く siunitx パッケージはないっぽい）。

#import "@preview/unify:0.7.1": qty
#show math.equation: set text(font: "STIX Two Math")

$
  qty("1", "atm") = qty("1.01325", "bar") = qty("101,325", "Pa")
$

気圧単位の換算

同じような感じになったかな。単位表記は値と単位の間のアキを調整する必要があるが unify パッケージなら上手いことやってくれているようだ。

最終手段として，強制的に立体または斜体にする場合は upright または italic 関数を使う。

#show math.equation: set text(font: "STIX Two Math")

$
  upright("Upright, not Italic") \
  "normal string" \
  italic("Italic, not Upright") \
  bold("Bold") \
  italic(bold("Bold Italic")) \
$

立体と斜体

おー。ちゃんと（単なる斜体でない）イタリック体になるんだな。

番号付けと参照

数式の番号付けは equation の設定で行う。

#set text(font: "Noto Serif CJK JP", lang: "ja")
#set math.equation(numbering: "(1)")
#show math.equation: set text(font: "STIX Two Math")

エネルギーと質量には以下の関係がある。

$
  E = m c^2
$

番号付け

また数式には以下のように <label_name> でラベルを付けることができ @label_name で参照できる。

#set text(font: "Noto Serif CJK JP", lang: "ja")
#set math.equation(numbering: "(1)")
#show math.equation: set text(font: "STIX Two Math")

エネルギーと質量には@eq.1 の関係がある。

$
  E = m c^2
$ <eq.1>

ラベルと参照

ラベルはあくまでもマークアップモードでのみ付けることができるみたい。数式モードの中では付けられなかった。参照については後日に改めて扱うことにする。

ブックマーク

ブックマークは「Typst に関するブックマーク」にてまとめています。

参考文献

Typst完全入門: LaTeXより簡単、Markdownより強力、美しいドキュメント作成術: doitsu (著); 2024-12-08 (Release 2024-12-08); Kindle版; B0DPXBNTRS (ASIN); 評価

マークアップ言語および組版ツールである Typst についての解説。 Kindle 版のみの提供。固定レイアウトではないためレイアウトが崩れまくって読みにくい。この手の技術解説書は固定レイアウトの Kindle 版か，いっそ PDF で出してほしい。でも Typst についてまとまった解説のある日本語の本は他に見当たらなかったのでありがたい。

reviewed by Spiegel on 2025-02-20 (powered by PA-APIv5)

［改訂第9版］LaTeX美文書作成入門: 奥村晴彦 (著), 黒木裕介 (著); 技術評論社 2023-12-09 (Release 2023-12-09); 単行本（ソフトカバー）; 4297138891 (ASIN), 9784297138899 (EAN), 4297138891 (ISBN); 評価

2023年末に出てるのに気が付かなかった orz 今回は版元で PDF 版を買った。

reviewed by Spiegel on 2024-04-07 (powered by PA-APIv5)

“Math mode” をどう訳すのか悩んだが（英語不得手なもので），「非公式日本語ドキュメント」を見ると「数学」ではなく「数式」となっていたので「数式モード」とした。 ↩︎
Typst のクラウドサービスではフォントアップロードなしに STIX2 フォントが使える。というか TeX Live に収録されている TTF/OTF ファイルは全部使えるっぽい。 ↩︎
厳密にはイタリック体と斜体は異なるのだが（イタリック体にも立体と斜体がある），この記事ではまとめて「斜体」と呼ぶことにする。 ↩︎

ローカルで Typst 環境を整える

2025-02-21T09:58:37+00:00

さっそくチュートリアルを見ながら Typst を触っていこうと思ったのだが，ちょっと動かしてみたところ，クラウドサービスの環境では日本語がショボすぎて先へ進める気にならないので，ローカルに環境を作ってしまうことにした。

【2025-02-22 追記】

前回の記事に追記して，クラウドサービスの環境で日本語フォントが指定できることを確認した。改めてクラウドサービスの環境で使えるフォントをよく見てみたが TeX Live に収録されている TTF/OTF フォントは全て使えるようだ。原ノ味フォントも使える。

OS にバンドルされているフォントは OS の種類やバージョンによって異なるため，複数人で異なるプラットフォームでドキュメントを作成する場合はフォントを合わせるのに苦労する。書籍出版とかではなく文字のデザインそのものに拘りがないのなら，クラウドサービスを使った協働作業にするとか Docker 等の仮想環境を使うなど，環境の方を合わせてしまったほうがいいかもしれない。今回は私の個人的な作業なので好き勝手絶頂にやるけど（笑）

今回の環境は以下の通り：

OS は Ubuntu 24.10
Typst は Snap からインストール
VS Code 用の拡張機能 Tinymist Typst を導入する¹

動作確認しておこう。

$ typst --version
typst 0.13.0 (8dce676d)

$ typst --help
Typst 0.13.0 (8dce676d)

Usage: typst [OPTIONS] <COMMAND>

Commands:
  compile  Compiles an input file into a supported output format [aliases: c]
  watch    Watches an input file and recompiles on changes [aliases: w]
  init     Initializes a new project from a template
  query    Processes an input file to extract provided metadata
  fonts    Lists all discovered fonts in system and custom font paths
  help     Print this message or the help of the given subcommand(s)

Options:
      --color <COLOR>  Whether to use color. When set to `auto` if the terminal
                       to supports it [default: auto] [possible values: auto,
                       always, never]
      --cert <CERT>    Path to a custom CA certificate to use when making
                       network requests [env: TYPST_CERT=]
  -h, --help           Print help
  -V, --version        Print version

Resources:
  Tutorial:                 https://typst.app/docs/tutorial/
  Reference documentation:  https://typst.app/docs/reference/
  Templates & Packages:     https://typst.app/universe/
  Forum for questions:      https://forum.typst.app/

おっ。 typst fonts コマンドで利用可能なフォントの一覧が出るのか。試してみよう。

$ typst fonts | grep Computer
New Computer Modern
New Computer Modern Math

$ typst fonts | grep "CJK JP"
Noto Sans CJK JP
Noto Sans Mono CJK JP
Noto Serif CJK JP

$ typst fonts | grep Inconsolata
Inconsolata

ふむむ。 Ubuntu に最初から入ってるフォントは使えるみたいだな。 Inconsolata フォントはコードを表示するために後から入れたフォント。これもちゃんと使えるようだ。 New Computer Modern フォントは OS には入ってない筈だけど (fc-list コマンドで確認した) Typst 側で持ってるフォントなのかな？

【2025-02-26 追記】

公式ドキュメントによると Libertinus Serif, New Computer Modern, New Computer Modern Math, DejaVu Sans Mono は Typst 内に埋め込まれているフォントらしい。同名のフォントが被ってる場合は --font-paths で指定したディレクトリにあるフォント＞システムフォント＞ Typst 内に埋め込まれたフォントの優先順位で選択されるとのこと。

ちなみにコマンドラインの --font-paths オプションの代わりに環境変数 TYPST_FONT_PATHS でディレクトリを指定することもできる。 TeX Live をインストールしている人は TYPST_FONT_PATHS でフォントファイルが入っているディレクトリを指定するのがいいかもしれない。

この状態で簡単な文章を組版してみよう。入力文書は前回と同じ。

= アルベルト・アインシュタインについて

アルベルト・アインシュタインは1879年3月14日，ドイツ生まれの理論物理学者です。
彼による革命的な3つの論文「光電効果の理論」「ブラウン運動の理論」「特殊相対性理論」が発表された1905年は「奇跡の年」と呼ばれています。

これを sample-1.typ ファイルに保存して以下のように typst compile する²。

$ typst compile sample-1.typ

組版結果は以下の通り：

組版結果 (1)

フォントは以下のようになっていた。

組版結果 (1)

FirgeNerd ？そんなもん入れたっけ？ ~~いやこれ OS に最初っから入ってたやつだな。てか，入ってるのか。凄いな Ubuntu。~~ 勘違い。このフォントは自分で入れてたわ。よく分からないが，フォントリストから日本語コードが入ってるフォントを（アルファベット順で）探して割り当てたって感じ？

Typst では set キーワードとそれに続く関数実行により文書スタイルを設定できる。フォントの場合は以下のように設定する。

#set text(font: "Noto Serif CJK JP")

= アルベルト・アインシュタインについて

アルベルト・アインシュタインは1879年3月14日，ドイツ生まれの理論物理学者です。
彼による革命的な3つの論文「光電効果の理論」「ブラウン運動の理論」「特殊相対性理論」が発表された1905年は「奇跡の年」と呼ばれています。

この場合の組版結果は以下の通り：

組版結果 (2)

Typst 0.13 ではラテン文字を別のフォントに割り当てられるようになった。こんな感じに指定するらしい。

// for main text
#set text(font: (
  (
    name: "New Computer Modern",
    covers: "latin-in-cjk",
  ),
  "Noto Serif CJK JP"
))

= アルベルト・アインシュタインについて

アルベルト・アインシュタインは1879年3月14日，ドイツ生まれの理論物理学者です。
彼による革命的な3つの論文「光電効果の理論」「ブラウン運動の理論」「特殊相対性理論」が発表された1905年は「奇跡の年」と呼ばれています。

組版結果は以下の通り：

組版結果 (3)

組版結果 (2)

パッと見では分かりにくいだろうけど，数字部分が New Computer Modern フォントに変わっている。

見出しの書体が明朝体のままなのは面白くないので，これをゴシック体に変えたい。色々と調べてみると以下のようにするのがいいらしい。

// for main text
#set text(font: (
  (
    name: "New Computer Modern",
    covers: "latin-in-cjk",
  ),
  "Noto Serif CJK JP"
))

// for headings
#let heading_font(body) = { // heading_font 関数を定義
  set text(font: (
    (
      name: "Noto Sans",
      covers: "latin-in-cjk",
    ),
    "Noto Sans CJK JP"
  ))
  body
}
#show heading: heading_font  // heading_font を適用する

= アルベルト・アインシュタインについて

アルベルト・アインシュタインは1879年3月14日，ドイツ生まれの理論物理学者です。
彼による革命的な3つの論文「光電効果の理論」「ブラウン運動の理論」「特殊相対性理論」が発表された1905年は「奇跡の年」と呼ばれています。

まず let キーワードを使って body のフォントを変更する heading_font 関数を定義し，次に show キーワードを使って見出し（heading）要素の表示時の処理として heading_font 関数を適用する，という流れである。見出し要素に直接フォントを指定できれば簡単だったろうに，それはできないみたい（ルール設定については「Typst における関数とルール」を参照のこと）。

組版結果は以下の通り：

組版結果 (4)

よしよし。

別の書き方として

// for main text
#set text(font: (
  (
    name: "New Computer Modern",
    covers: "latin-in-cjk",
  ),
  "Noto Serif CJK JP"
))

// for headings
#show heading: it => {
  set text(font: (
    (
      name: "Noto Sans",
      covers: "latin-in-cjk",
    ),
    "Noto Sans CJK JP"
  ))
  it
}

= アルベルト・アインシュタインについて

アルベルト・アインシュタインは1879年3月14日，ドイツ生まれの理論物理学者です。
彼による革命的な3つの論文「光電効果の理論」「ブラウン運動の理論」「特殊相対性理論」が発表された1905年は「奇跡の年」と呼ばれています。

という書き方もある。やってることは同じ。フォントを変更する処理を無名関数として定義しているだけである。

ところで，最近は日本語フォントとしてモリサワ BIZ UD 明朝/ゴシックがお気に入りである。このブログの Web フォントとしても使っている。

モリサワ BIZ UD 明朝/ゴシック Web フォント

Typst でもこれを日本語フォントとして使いたい。また見出しで使う欧文フォントには Helvetica を使いたい。モリサワ BIZ UD フォントは Ubuntu にはないため，手動でインストールする。

ダウンロードした TTF ファイルを /usr/local/share/fonts/ ディレクトリに入れる。 fc-cache -fv コマンドでフォントキャッシュを更新するのを忘れずに。

$ fc-cache -fv

$ fc-list | grep "BIZ UD"
/usr/local/share/fonts/BIZUDMincho-Bold.ttf: BIZ UD明朝,BIZ UDMincho:style=Bold
/usr/local/share/fonts/BIZUDPMincho-Bold.ttf: BIZ UDP明朝,BIZ UDPMincho:style=Bold
/usr/local/share/fonts/BIZUDPGothic-Regular.ttf: BIZ UDPゴシック,BIZ UDPGothic:style=Regular
/usr/local/share/fonts/BIZUDPGothic-Bold.ttf: BIZ UDPゴシック,BIZ UDPGothic:style=Bold
/usr/local/share/fonts/BIZUDPMincho-Regular.ttf: BIZ UDP明朝,BIZ UDPMincho:style=Regular
/usr/local/share/fonts/BIZUDMincho-Regular.ttf: BIZ UD明朝,BIZ UDMincho:style=Regular
/usr/local/share/fonts/BIZUDGothic-Bold.ttf: BIZ UDゴシック,BIZ UDGothic:style=Bold
/usr/local/share/fonts/BIZUDGothic-Regular.ttf: BIZ UDゴシック,BIZ UDGothic:style=Regular

Ubuntu では Helvetica の代替として Liberation Sans が最初から入っているのでこれを使う³。

これでフォント指定の最終形を以下とする。

// for main text
#set text(font: (
  (
    name: "New Computer Modern",
    covers: "latin-in-cjk",
  ),
  "BIZ UDMincho"
))

// for headings
#show heading: it => {
  set text(font: (
    (
      name: "Liberation Sans",
      covers: "latin-in-cjk",
    ),
    "BIZ UDGothic"
  ))
  it
}

= Albert Einsteinについて

Albert Einsteinは1879年3月14日，ドイツ生まれの理論物理学者です。
彼による革命的な3つの論文「光電効果の理論」「ブラウン運動の理論」「特殊相対性理論」が発表された1905年は「奇跡の年」と呼ばれています。

フォント指定の効果を確認するために人名部分を英字に置き換えてみた。

組版結果は以下の通り：

組版結果 (5)

んー。やっぱモリサワ BIZ UD フォントは見やすくていいねぇ。

というわけで，ローカルマシンへの環境構築と日本語フォントの指定について試してみた。フォント指定は要素ごとに指定する必要があり，ちょっと面倒くさい感じだな。数式やコードなどのフォント指定については後日ということで。

ブックマーク

ブックマークは「Typst に関するブックマーク」へ移動しました。

参考文献

Typst完全入門: LaTeXより簡単、Markdownより強力、美しいドキュメント作成術: doitsu (著); 2024-12-08 (Release 2024-12-08); Kindle版; B0DPXBNTRS (ASIN); 評価

reviewed by Spiegel on 2025-02-20 (powered by PA-APIv5)

［改訂第9版］LaTeX美文書作成入門: 奥村晴彦 (著), 黒木裕介 (著); 技術評論社 2023-12-09 (Release 2023-12-09); 単行本（ソフトカバー）; 4297138891 (ASIN), 9784297138899 (EAN), 4297138891 (ISBN); 評価

2023年末に出てるのに気が付かなかった orz 今回は版元で PDF 版を買った。

reviewed by Spiegel on 2024-04-07 (powered by PA-APIv5)

ググってみると VS Code 用の拡張機能として Typst LSP を紹介しているところが多かったが，2025-02-21 現在では Typst LSP はなくなっていて Tinymist Typst に統合されているらしい。 ↩︎
VS Code 用の拡張機能 Tinymist Typst を導入している場合はコマンドパレットから “Typst: Exports the Opened File as PDF” を起動することで typst compile できる。 ↩︎
Windows では Helvetica の代替として Arial フォントがよく使われる。 ↩︎

The Social Butterfly

2023-12-23T11:08:46+00:00

今朝 Bluesky アプリのアイコンが蝶になってることに気がついた。 Web UI も含めてアイコンを変えたらしい。

A New Look for Bluesky: The Social Butterfly - Bluesky

ブランドロゴとしてはどうなるか分からないが，とりあえず絵文字の 🦋 で代替できるっぽい。

他に重要な変更といえば，ユーザのプロファイルおよび投稿がログインしなくても見れるようになった。

We built Bluesky to be a home for public conversation — breaking news, commentary and analysis, jokes and more. And we’re taking one step closer to this goal by releasing a public web view, which means that you don’t have to be logged in to view posts on Bluesky.

Starting today, you can easily view Bluesky posts without being logged in. Sharing will be more convenient — whether it’s a joke you want to text a friend, or a post you want to embed in an article.

via A New Look for Bluesky: The Social Butterfly

不特定から見られたくない場合は Settings の Moderation にある “Discourage apps from showing my account to logged-out users” のスイッチをオンにすればよい（既定はオフ）。

via Moderation — Bluesky

ただし，この設定に従うかどうかはアプリ次第らしいので，公式のアプリや Web UI 以外では無視される可能性もある。 𝕏 (旧 Twitter) で言うところの鍵垢とは違うので注意が必要である。

というわけで，フッタ部に暫定で Bluesky のアイコンを追加してみた。 ~~そうそう。招待状が余ってるので，私と直接連絡がつけれる方は言ってください。融通できます（転売禁止）。~~ ちなみに 𝕏 での活動は休眠中で殆どアクセスしないのであしからず。

アイコンの蝶ように蛹から羽化して青空に上手く飛び立てればいいねぇ。個人的には「分散型 SNS」というものに対して今ひとつ懐疑的ではあるが，少なくとも 𝕏 の代替としては期待している（Mastodon は 𝕏 の代替にはなれないと思う。もっと違う何か）。

【2024-04-04 追記】 Font Awesome 6.5.2 に Social Butterfly 登場！

Bluesky Icon | Font Awesome

早速対応した。

アイコン	コード例
	`<span class="fa-4x" style="color:#0C5CB0;"><i class="fa-brands fa-bluesky"></i></span>`

よーし，うむうむ，よーし。

ブックマーク

Mastodon と Bluesky でボット運用はじめました

もうちょこっと Mastodon

2022-11-20T05:45:05+00:00

前回に引き続き，もうちょこっとだけ Mastodon の話。

Font Awesome

Font Awesome に Mastodon のアイコンがないかなぁと思ってたら，ありました。

Mastodon Icon | Font Awesome

たとえば，こんな感じに使える。

アイコン	コード例
	`<span class="fa-4x" style="color:#3088d4;"><i class="fa-brands fa-mastodon"></i></span>`

サイト連携

プロフィールの補足情報として各種サイトの URL を載せることができるのだが

プロフィール補足情報

上の図の右側にも書かれている通り，指定 URL の Web ページで

<a rel="me" href="https://hostname/@username">Mastodon</a>

のように Mastodon プロフィール・ページを <a> 要素で指示するか，あるいは <head> 要素内に

<link rel="me" href="https://hostname/@username">

などと <link> 要素を設定することで Mastodon と（緩い）連携ができる。ポイントは rel="me" の属性を必ず付けること。上手くいけばプロフィール・ページで

プロフィール補足情報

のように認証された URL にチェックマークが付くようだ。先に連携先のサイトで rel="me" 属性付きのリンクを設定し，そのあとでプロフィール補足情報を設定すると上手くいくっぽい。

公式アプリ

他の方の toot を見て初めて知ったのだが，スマホ用の公式アプリがあるらしい。

Get an app for Mastodon - Mastodon

試しにインストールして使ってみたが意図的に機能を簡略化してるように見える。まぁ，ローカルとか連合（federation）とか follow してもないユーザの toots とか要らんよね。

というわけで，しばらくこれで遊んでみることにしよう。

Share ボタンを付けてみたかったのだが…

Web ページに Mastodon への share ボタンがあれば面白いと一瞬思ったのだが…

たとえばブラウザで

https://mstdn.jp/share?text=hello+world

という URL を叩けば

てな感じに Toot 画面が開く。ただしこれは mstdn.jp にアカウントを持っていてサインインしている状態であれば，の話。分散型の Mastodon ではユーザごとに所属しているサーバは異なるんだから，上のような固定の URL をボタンに紐付けても意味がない。まぁ，ブラウザに自分専用のブックマークレットでも設置すればいけるのかもしれないが。

あと web+mastodon scheme ってのがあるそうで，この scheme による連携が Mastodon アプリとブラウザとの間でできていれば

web+mastodon://share?text=hello+world

などと指定することでいけるらしい。でも，これも一般的じゃないよなぁ…

Android 機のブラウザであればシェア機能で任意のアプリと連携できるし， Web ページ側でボタンを設置するのは諦めるかな。

【追記】 Mastoshare を使う

と思ったが Mastoshare というサービスを使うといいみたい。ちなみに Hostdon を運営している企業によるサービスのようだ。

早速このブログ記事の右上にマークのボタンを設置してみた。このボタンを押すと

Mastoshare

という画面が開く。ここでサーバを選択して [Toot] ボタンを押すと各サーバごとの Toot 画面に遷移するわけだ。とりあえずこれで運用してみるか。

似たサービスで donshare ってのもあるらしい。お好みで。

【2022-12-02 追記】 Mastoshare が証明書期限切れで使えなくなってしまったので donshare に乗り換えた。

Go による Mastodon クライアント・パッケージ

そうそう。 Go のパッケージに

mattn/go-mastodon: mastodon client for golang

というのがあるのだが，今もこまめにメンテナンスされてるっぽい。 Go で Mastodon クライアント機能を組み込みたいのであれば参考になるかもしれない。

ブックマーク

Mastodon向け簡易シェアボタン - Qiita

結局 Google Fonts に巻き戻した。そしてモリサワ BIZ UD フォント採用へ

2022-09-18T12:31:41+00:00

実はさっき2022年3月に公開された

「BIZ UD」フォントが「Google Fonts」へ～モリサワのユニバーサルフォント - 窓の杜

という記事を見つけたのだが，この中で

TrueType版に関しては教育現場で利用されることを考慮し、「IPAフォント」v003（最新）に収録されている全文字をカバーしているという

「BIZ UD」フォントが「Google Fonts」へより

という記述¹ を見て「え？じゃあ神（U+FA19）とか㈱（U+3231）とかが表示できないのおかしくね？」と思い，もう少し真面目に調べてみた。

したら，収録文字を制限してるのはどうやら Bunny Fonts 側のようなのだ。 Google Fonts で BIZ UD フォントを検索したら「神」も「㈱」も「①」もちゃんと表示してくれた。

たぶん Bunny Fonts は文字数を抑えるためにわざと JIS X 0208 の範囲しか収録してないんだろうね（邪推）。でも異体字セレクタで指示する「葛󠄀（U+845B U+E0100）」なんかは Bunny Fonts でも表示できるっぽいんだよなぁ。基準が分からん。

とりあえず BIZ UD フォント側を疑ってまじすんません 🙇

正直このブログでは機種依存文字（古語）や異体字等は割と使うので削られると困るし Bunny Fonts を使う限り NOTO JP フォントでも同じようになるみたいなので，泣く泣く Google Fonts に戻すことにした。そんで，どうせ Google Fonts に戻すならモリサワ BIZ UD フォントで全然問題ないやろ，ということで最終的に以下の指定で Web フォントを読み込んでいる。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=BIZ+UDMincho&family=Inconsolata:wght@400;700&family=Noto+Color+Emoji&family=Noto+Sans:wght@400;700&family=Noto+Serif&display=swap" rel="stylesheet">

簡単に言うと日本語部分のみ BIZ UD ゴシック/明朝フォントを使い，それ以外は従来の NOTO フォント及び Inconsolata フォントを使う感じ。これで英文の引用や

As a best practice, remember to consume software from the official project repos and watch out for potential typosquats or repository forks/clones that may appear identical to the original project but hide malware.

via 35,000 code repos not hacked—but clones flood GitHub to serve malware

プログラム・コードは

package main

import "fmt"

func main() {
    fmt.Println("Hello, 世界")
}

従来どおりに表示するようにしている。

ほんじゃあ，まぁ，これからこれで行きますかね。モリサワ BIZ UD フォントで表示できない文字が出てきたら最終的に NOTO JP フォントにまで巻き戻すかも知れんけど（笑）

【2025-09-16 追記】 コード用のフォントを Inconsolata から Intel One Mono に換装した。

Intel One Mono フォントに換装する

ブックマーク

IPAex フォントのほうは2019年に Ver.004.01 が出ている。例の令和の合字「㋿（U+32FF）」への対応である。ただ BIZ UD フォントはこの字もちゃんと含んでいるように見える。 ↩︎

モリサワ BIZ UD 明朝/ゴシック Web フォント

2022-09-03T10:39:48+00:00

Twitter 経由で知ったのだが Google Fonts にモリサワ BIZ UD 明朝/ゴシックフォントってのがあるらしい。

2022年春に公開されたのか。それなら Bunny Fonts にもあるかなぁ，と検索してみたら

Bunny Fonts | Explore Faster & GDPR friendly Fonts

おー，あるやないかい！というわけで，手元の環境でさっそく試してみた。

こっちは従来の NOTO フォント（クリックで拡大）

こっちがモリサワ BIZ UD 明朝フォント（クリックで拡大）

んー，やっぱモリサワのほうが見やすいかなぁ。全体的に詰まってる感じだが窮屈には見えない。 Web ブラウザで見やすいようにチューニングされている？役物はモリサワのほうはプロポーショナルフォントっぽく詰めているようだ。

英文でも試してみよう。

こっちは従来の NOTO フォント（クリックで拡大）

こっちがモリサワ BIZ UD 明朝フォント（クリックで拡大）

英字だとモリサワのほうが幅広に見えるんだな。日本語フォントとのバランスを取ってるからか？この辺は好みだろうな。

というわけでモリサワ BIZ UD 明朝/ゴシックにしようかな，と一瞬思ったのだが，どうも一部表示できない文字があるらしい。「神（U+FA19）」とか「㈱（U+3231）」とか。 ~~これって JIS X 0208 にない文字は収録されてないってことかな。~~ ~~ひょっとして収録グリフ数を制限することで有料ライセンス版¹ との差別化を図ってる？うーむ。~~

~~このブログは Unicode の変わった文字もたまに使うのでモリサワ BIZ UD 明朝/ゴシックは向かないか。~~ ~~というわけで，今回は諦めた。~~ ~~「機種依存文字（古語）なんか使わないぜ」という方は検討してみてもいいだろう。~~

【2022-09-18 追記】

JIS X 0208 以外の文字が出ないのは Bunny Fonts 側の問題だったようだ。疑ってごめんペコン 🙇

なので Unicode 日本語の文字を全て Web フォントで表示したいなら今のところ Google Fonts 一択のようだ。「機種依存文字（古語）なんか使わないぜ」という方は Bunny Fonts を検討してみてもいいだろう。

ブックマーク

モリサワ BIZ UD 明朝/ゴシックは SIL Open Font License, Version 1.1 でライセンスされている。このライセンス下のフォントは販売目的でなければ自由に再配布できる（ただし Attribution & Share Alike 条件がつく）。なお，ソフトウェアにバンドルするのであれば販売も許可される。ドキュメントへの埋め込みもOK。 ↩︎

Google Fonts から Bunny Fonts に乗り換える

2022-06-25T05:57:34+00:00

EU 圏に Bunny Fonts という Web フォントの CDN サービスがあるそうな。

Bunny Fonts | Explore Faster & GDPR friendly Fonts

With a zero-tracking and no-logging policy, Bunny Fonts helps you stay fully GDPR compliant and puts your user’s personal data into their own hands. Additionally, you can enjoy lightning-fast load times thanks to bunny.net’s global CDN network to help improve SEO and deliver a better user experience.

via About Bunny Fonts | Faster & GDPR friendly Fonts

素晴らしい！早速試してみることにした。まずは日本語混じりサンプルテキストを用意して NOTO Serif JP フォントを探してみる。

via Bunny Fonts

おー，あるやないかい！

via Bunny Fonts

詳細を眺めてみると

via Bunny Fonts

という感じに複数のウェイトが用意されているのが分かる。画面右側の [Add variant] ボタン押下でインポートするフォント・ウェイトを選択する。

ちなみに目安としては

ウェイト	名称
200	ExtraLight
300	Light
400	Regular
500	Medium
600	SemiBold
700	Bold
900	Black

といった感じ。通常の文章であれば 400 と 700 があれば十分だろう。

NOTO Sans JP フォントでも同様にフォント・ウェイトを選択する。

画面右上の [Fonts+] ボタンを押下すると

via Bunny Fonts

という感じに選択したフォント・ウェイトが一覧表示される。上部の

@import url(https://fonts.bunny.net/css?family=noto-sans-jp:400,700|noto-serif-jp:400,700);

のコードを CSS ファイルのどこかに書いておけば Web フォントの情報がインポートされる。また [Switch to HTML] ボタン押下で

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=noto-sans-jp:400,700|noto-serif-jp:400,700" rel="stylesheet" />

と HTML の <link> 要素の表現に切り替わるので，これを HTML ファイルの <head> に組み込んでもよい。

この URL の中身を覗いてみると

/* japanese */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.bunny.net/noto-serif-jp/files/noto-serif-jp-japanese-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/noto-serif-jp/files/noto-serif-jp-japanese-400-normal.woff) format('woff'); 
}

/* latin */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.bunny.net/noto-serif-jp/files/noto-serif-jp-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/noto-serif-jp/files/noto-serif-jp-latin-400-normal.woff) format('woff'); 
}

てな感じになっている。どうやら Google Fonts のようにファイル分割はされないようだ。しかも font-display プロパティも設定されないので日本語フォントのようにグリフ数が多いものはちょっと不利かも知れない。

まぁ，ちょっとでも (個人のプライバシーに敵対的な) Google 依存を減らしたいのであれば Bunny Fonts は悪くない選択肢だと思う。というわけで，うちのサイトは Bunny Fonts で統一することにした。でも，まだ，フォントに関しては Font Awesome への依存があるので完全に追跡を振り切ってるわけでもないんだけどね。

【2022-09-18 追記】

結局 Google Fonts に戻した。詳しくはこちら

結局 Google Fonts に巻き戻した。そしてモリサワ BIZ UD フォント採用へ

とほほ orz

ブックマーク

Font Awesome 6 を導入した

2022-02-23T05:44:22+00:00

先日 Font Awesome 6 がリリースされた。

Font Awesome 6 Is Live! See the New Icons, Styles and Upgrade Without the Hassle

というわけで，このブログにも導入した。まぁ，見た目はほぼ変わらないんだけどね。

Font Awesome 6 の目玉は Thin Style が登場したことだろうか。これはなかなか面白いと思う。

なんとなく思いついて検索してみたら Go 言語のアイコンもあった。

via Go - brands | Font Awesome

たとえば，こんな感じに使える。

`<span class="fa-4x" style="color:#00aed9;"><i class="fa-brands fa-golang"></i></span>`

HTML + Font Awesome でスライドを書いてる人は，はかどるかもしれない（笑）ちなみに Rust とかのアイコンは以前からあったんだよねぇ。

ブックマーク

Go’s New Brand - The Go Programming Language : Go ロゴの取り扱いについてはこちらを参照のこと