Web上でアスキーアート（以下AA）や顔文字を普通に見かけるようになって割と経つ。
最近では どこからこんな文字拾ってきたんだよ的な凝った顔文字も。
問題はページを見た人の環境によって表示が致命的にズレたり、変になってしまうということ。
Google FontsのようなWebフォントでAA/顔文字向けなものがあれば良いんだけど
以前Googleにあったものは どうやら今現在は存在していないようだ。
例えばメイリオで表示すると微妙な顔つきになるんだよなぁ・・・ｗ
(´･ω･｀)
メイリオだと少し左向いてるｗ
AAはMS Pゴシックに最適化されているから仕方ない部分もあるけど
今時だと見る人の多種多様な端末にMS Pゴシックが入っているわけじゃないから、
MS Pゴシックを設定して表示しろ という理論は通じない。
なんか良い方法はないか と調べていて見つけた記事。
モナー等のAAをずれずに表示するためのWebフォント設定 - Qiita
なるほど。
自分のサーバにフォントを置いて、それを読み込めば良いのか。
ここでは11のフォントが列挙されていて、どれも問題なく表示されている。
その中で一際容量の小さいフォントが aahub_light の woff2。
たった43.9KB。
これをダウンロードして自分のサイトに置いて、スタイルシートに定義すればOK。
スタイルシートの定義
font-family: "aahub_light";
url("https://※自分のサーバ＆パス※/aahub_light.woff2") format("woff2"),
url("https://※自分のサーバ＆パス※/aahub_light.woff") format("woff"),
url("https://※自分のサーバ＆パス※/aahub_light.ttf") format("ttf"); ;
font-display: swap;
}
で定義をして、セレクタは
font-family: 'aahub_light';
}
こんな感じに。
3つ定義しているのは woff2 や woff に対応していないブラウザのために。
※1行の顔文字しか使わない想定でspanタグになっているけど、ここはご自由に。
WordPressで使うときは、functionsの中に記載してプルダウンで選択できるようにすると
便利だと思う(･∀･)
使用した結果
(´･ω･｀) ←メイリオ
(´･ω･｀) ←aahub_light
なんか思っていたのと微妙に違う・・・。
オメガってそんな小さくなかった気がする。
／／／）
／,.=ﾞ''"／
／ i f ,.r='"-‐'つ＿＿＿_ こまけぇこたぁいいんだよ！！
/ / _,.-‐'~／⌒ ⌒＼
／ ,i ,二ﾆ⊃（ ●）. （●）＼
/ ﾉ ilﾞフ::::::⌒（__人__）⌒::::: ＼
,ｲ｢ﾄ､ ,!,!| |r┬-| |
/ iﾄヾヽ_/ｨ"＼ `ー'´ ／
確かに大きめのAAは綺麗だ。
ああ。そうか。
AAと顔文字を一緒に考えるからダメなんだ。
定義を分けよう。
またフォント探しの旅か！('A`)
