SE奮闘記

fontcustomがエラーを吐くようになったので、 fontforgeを使った svgからwoff2へ変換する方法を探しているときの覚書。 環境： CentOS Stream 8, fontforge 20200314, Node.js v18.9.1 最近も更新されている下記Node.js(Grunt)製ツールを試してみた。 L2jLiga/grunt-webfonts: SVG to webfont converter for Grunt ドキュメントに従い依存関係のあるソフトのインストール # dnf install fontforge ttfautohint ttfautohintはリポジトリになかった。 そのまま進める。 grunt-webfontをインストールする。 gruntをglobalにインストール済みならgrunt-webfontだけでいい。 # su - node $ cd /path/to/project/ $ npm install grunt grunt-webfont --save-dev npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE   package: 'svg-pathdata@1.0.0', npm WARN EBADENGINE   required: { node: '0.10.*' }, npm WARN EBADENGINE   current: { node: 'v18.9.1', npm: '8.19.3' } npm WARN EBADENGINE } WARNINNGが出たけどとりあえず進める。 Gruntfile.jsを作る $ vi Gruntfile.js module.exports = function(grunt) {   grunt.loadNpmTasks('grunt-webfont');   grunt.initConfig ({     webfont: {       icons: {         src: 'fonts/svg/*.svg',         dest: 'fonts/icons'

fontcustomがエラーで変換に失敗するようになったので代替コマンドを探しているときの覚書。 環境： CentOS Stream 8, Node.js v18.9.1 Node.jsを使うのが汎用的で良さそう。 tancredi/fantasticon: Icon font generation tool jaywcjlove/svgtofont: Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font. シンプルそうなfantasticonを試す。 インストール。 $ npm install fantasticon --save-dev package.jsonにコマンドを書く。   "scripts": {     "font": "fantasticon ./fonts/svg --output ./fonts/icons --name icons --font-types woff2 woff --asset-types css html"   } 実行 $ npm run font 一部 iconmonstr でダウンロードしたsvgの変換が上手くいっていない。 変換には内部でfontforgeを使うツールがないか探すことにした。 【関連記事】 CentOS Stream 8 + Ruby + fontcustomをインストール 【CentOS】SVGをWOFFなどのWebフォントへ変換するfontcustomをインストール

WebPとAVIFの比較をしようとLinux向けの変換ツールを調査しているときの覚書。 環境： CentOS Stream 8, Node.js v14.18.2 -> v18.9.1 AVIFの対応状況 "avif" | Can I use... Support tables for HTML5, CSS3, etc Edge以外は対応している。 Node.jsをv18に変更 開発環境のNode.jsがv14だったので最新のv18にアップグレードする。 確認 # dnf module list nodejs v14からv18に変更 # dnf module reset nodejs # dnf module enable nodejs:18 # dnf --allowerasing distro-sync 確認 # node --version v18.9.1 Squoosh CLI Chrome teamが開発している画像圧縮ウェブツール「Squoosh 」をコマンドラインで使えるようにしたもの。 squoosh/cli at dev · GoogleChromeLabs/squoosh · GitHub Globalでインストール # npm i -g @squoosh/cli AVIFに変換してみる。 $ squoosh-cli --avif '{quality: 30}' key-visual.jpg TypeError: Failed to parse URL from /usr/local/lib/node_modules/@squoosh/cli/node_modules/@squoosh/lib/build/imagequant_node-a4aafbae.wasm エラーになった。 ウェブアプリ版のSquoosh でAVIF変換したら問題なく完了した。 Quality: 30 Effort: 4 ファイルサイズ比較 Jpeg: 281KB WebP: 70KB AVIF: 26KB Jpegの10分の1でWebPの半分なのにGoogle Chromeで表示して並べてみても違いが分からない。 とりあえずsquoosh-cliはアンインストール。 # npm uninstall -g @squoosh/cli