font-family 設定を動的に変更して確認できるページを作った

前回の記事でオレオレパーフェクト設定を導いた font-family 指定。

• 2018年以降はコレで決まり！Web サイトで指定するゴシック体・明朝体・等幅の font-family 設定

検証用に以下のようなページを作っていた。

• デモ：Sans-Serif Fonts Test
• コード：frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

左のメニューで、適用したいフォントのチェックボックスを入れ、ドラッグして適用順を並べ替えられる。右側にはそうして生成される font-family のコードと、適用サンプルが表示されている。コレで動的に font-family 指定が変更できるので、動作チェックができた。

また、Angular Utilities という GitHub Pages でも、Font Family Tester というページを作っており、コチラは明朝体や等幅フォントも取り揃えている。独自でフォント名を追加して適用してみることもできるので、コチラをぜひお試しいただきたい。

• Angular Utilities

前述の方は、jQuery と jQuery UI の Sortable、それとスマホでも Sortable でのドラッグができるようにするための jQuery UI Touch Punch を導入している。

Angular Utilities の方は ng2-dnd というライブラリでドラッグ & ドロップを実現していたのだが、Touch Punch のようなスマホ対応ができなかったので、ボタン操作に変えた。