投稿

3月, 2020の投稿を表示しています

ttfをwoff2に変換

アイコンフォントを作成した際にwoff2へ変換するやり方を調査したときの覚書。

環境: CentOS 7.7.1908

Google先生がGitHubで公開しているプログラムがあったのでインストールしてみた。
google/woff2 | GitHub
$ git clone --recursive https://github.com/google/woff2.git
$ cd woff2
$ make clean all

試しに実行してみる。
./woff2_compress BootstrapIcons.ttf

変換元と同じディレクトリに出力された。

容量比較
svg: 421kb
ttf: 121kb
woff: 121kb
woff2: 29.7kb

思ったより圧縮された。


【関連記事】
Bootstrap IconsのSVGアイコンを使うCentOS6にfontcustomをInstallしてWebフォントを作成

Bootstrap IconsのSVGアイコンを使う

Bootstrap v3からそろそろv5に向けて移行しようかと調査しているときの覚書。
今まではアイコンフォントを便利に使っていたけど、これからはSVGアイコンの時代らしい。

環境: Node.js 10.19.0

参考
WEB制作のワンポイント! SVGアイコンを使うワケ | PINTO!アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう |  WebクリエイターボックスCan I use... Support tables for HTML5, CSS3, etc
使いたいのはBootstrap Icon。2020年3月時点でalpha3
Bootstrap Icons · Official open source SVG icon library for Bootstrap
使い方はsvgファイルを1つのファイルにまとめてIDで呼び出す。
Icon System with SVG Sprites | CSS-Tricks

実際にやってみる。
まずはBootstrap Iconsをインストール
$ npm install bootstrap-icons --save-dev

node_modules/bootstrap-icons/icons/にsvgファイルがある。
これを一つのsvgファイルにまとめる。
コマンドライン版のsvgstoreをインストール。
GitHub | svgstore/svgstore-cli$ npm install -g svgstore-cli

下記コマンドを実行
$ svgstore -p 'bi-' --inline -o bootstrap-icons.svg node_modules/bootstrap-icons/icons/*.svg

作成されたbootstrap-icons.svgをエディタで開いて確認する。
一つにまとめたsvgファイルは非表示にするため、svgタグにclassを追加しておく。

bodyタグの直下でsvgファイルを読み込む。


適当なところにID記述。


CSS(SCSS)に追記。
//
// Bootstrap Icons
//
svg.defs {
  display: none;
}
.bi {
  display: inline-block;
  position: rela…