
はてなブログでふい字(漢字も使える手書き風の日本語フォント)が使える(はてなブログに組み込まれている)ことを知ったので、ためしにこの記事で使ってみました。
FOXISM|はてなブログでふい字が使えたのでメモ風cssを作ってみたを参考に、メモ風cssでふい字を表示しています(画像を使わないでCSSだけで表現できるのがすごい!)。
どこで生れたか頓(とん)と見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。
この書生というのは時々我々を捕(つかま)えて煮て食うという話である。
Qiita(@oreo)|CSSでwebフォントの読み込みが遅い問題を改善する方法を参考に、ふい字が読み込まれるまでは、ローカルフォント(sans-serif)でテキストを表示するように、CSSで「font-display: swap」を指定しています。
CSS
<style>
@font-face {
font-display: swap;
font-family: HuiFontP109;
src: url(http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.woff) format("woff");
}
</style>
ふい字のファイルサイズが大きい(1.5MB)ので、このページが重かったらごめんなさい。