投稿

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ファイルを１つのファイルにまとめて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 { ...
続きを読む