The “System” Font Shortcut

様々なOSのシステム・フォントを参照するショートカットを作成し、表示を確認するテスト・ページです。OS X El CapitanやiOS 9で追加された-apple-systemキーワードが@font-faceルールのsrcデスクリプターでも利用できるかどうかのテスト・ページも兼ねています。

The System Font

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet, justo eget malesuada hendrerit, metus ligula feugiat nulla, nec euismod mi eros commodo justo. Fusce nec posuere dui. Pellentesque convallis rhoncus purus, sed pretium ipsum consectetur aliquam. Aliquam iaculis a ante nec ullamcorper. Duis in purus sed magna molestie fringilla vel ac odio. Sed varius ullamcorper mi sit amet eleifend. In at aliquam odio. Nam finibus felis in massa ornare, id suscipit tellus imperdiet. Nulla dignissim auctor eros, id placerat urna mattis eget. Mauris nec purus in diam cursus laoreet a at urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec purus neque, aliquam varius ipsum quis, ullamcorper venenatis justo. Phasellus nulla nunc, egestas vitae ex id, pretium pulvinar magna. Donec scelerisque justo id sapien ullamcorper, at vestibulum metus elementum. Praesent finibus odio et eleifend facilisis. Mauris malesuada a nunc et tincidunt.

@font-face {
  font-family: "System";
  src: local("-apple-system"),
    local("Helvetica Neue"),
    local("Noto Sans"),
    local("Roboto"),
    local("Segoe UI"),
    local("Tahoma");
}

.test {
  font-family: "System", sans-serif;
}