ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSSでOS標準のフォントを使いたいときには

system-ui
という指定を行います。ただし古いWebブラウザで使えなかったり、解釈においてまだ課題があるようです。各OSともフォントにはこだわりを持っているはずで、その標準フォントはOSにマッチして表示されるはずです。

そこで使ってみたいのがSystem Font CSSです。

system
でシステム標準フォントを適用してくれるCSSです。

System Font CSSの使い方

使い方は前述の通り、フォントとして

system
を指定します。

body {
    font-family: system;
}

適用した表示例です。

macOSやWindows、Androidなどの各OSではバージョンごとに標準フォントが異なります。System Font CSSではその辺りを吸収して

system
だけで使えるようになります。なお
system
はW3Cでも導入検討が進められているとのことです(一度失敗して
system-ui
に落ち着いた過去があるようですが)。

System Font CSSはCSS製のオープンソース・ソフトウェア(Creative Commons)です。

System Font CSS

jonathantneal/system-font-css: Use the native system font of the OS running the browser

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2