メイリオをやめろ

特にMac使い、Windows用にfont-family: Meiryo, "メイリオ"を指定するな。今は游ゴシックがあるのだから余計な事をしないでくれ。游ゴシックも”Medium”無しでは細すぎるのでとにかく気安く指定するんじゃない。

と唸りながらStylusでメイリオサイトにfont-family: "Hiragino Kaku Gothic Pro" !important;を設定する事に疲れ、@font-faceで全てのメイリオをヒラギノ角ゴにしてやろうと思った。

CSS適用

@font-face {
	font-family: "メイリオ";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

@font-face {
	font-family: "Meiryo";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

@font-face {
	font-family: "MS Pゴシック";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

@font-face {
	font-family: "MS P Gothic";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

それぞれsrcは任意の一行に絞る。
ついでにMS Pゴシックも入れた(価格.com等で指定されている)。

効かない

游ゴシックは表示されるが、ヒラギノ角ゴやNoto Sans等が表示されない。

原因

chrome://flagsから#font-src-local-matchingが削除され、使用出来るフォントの範囲が制限されている。

参考:
Chromeのfont-faceでlocalのフォントが読み込めない問題の解決方法 (Windows) – Qiita
Chrome 84 で font-face が効かなくなった のこと

解決方法

フォントファイルを右クリック > すべてのユーザーに対してインストール(要管理者権限)。
その前に一度アンインストールする。
その前にフォント使用中のソフトを終了する。
システムフォントの場合は2回アンインストールと再起動する。
Adobe Fontsやmojimo等、サブスクフォントは使えない。
……。

メイリオをやめろ。

Web小説を任意のフォントで縦書き

Web小説の縦書き表示を模索。

CSS

単純な縦書きならCSSで可能だが、小説はフォントが最重要。ほとんどのフォントライセンスでWebフォントやEPUB埋め込みは許可されていない。源ノ明朝、しっぽり明朝は良いフォントだが、筑紫明朝系を使いたい。

PDF

PDF埋め込みは許可されている事が多い。WordPressプラグインのPDFビューアを複数試したが、資料やカタログが想定されていて書籍向きではない。モダンな3Dフリップ表示の物は見開き・RtL(縦書き向け)設定があったが、音やアニメの余分な演出が付き、ホイールスクロールが出来ず。

EPUB

EPUB埋め込み可能フォントであればリフロー型、不可であれば固定型(画像化)で作成。国産ビューアのBibiが高機能でセンスも良い。見開きと単頁のレスポンシブ表示、ホイール・スワイプに対応。ただモバイル版Sleipnirで開けなかったのと、数ページでもローディング時間が発生し、モーダル表示は非対応。「電子書籍」であればこれでいいと思う。Web小説は一瞬で開きたい。

画像化

固定型EPUBの拡張子をzipにすると中身の画像を取り出せるので、Web漫画ビューアを使う。laymicがレスポンシブ、ホイール・スワイプ対応、モーダル表示。機能的には申し分ないが、htmlに全ページ分の画像ファイル名を書き連ねる必要がある。

EPUBは「背景なし・余白なし」で作成し、CSSでデザインを調整する。
背景画像を乗算する事で容量を抑え、メディアクエリで余白を指定してレスポンシブにテキストサイズを調整。不要なツールボタンを隠してシンプルに。