文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 ====== Web フォント ====== [[:open_source:fonts|フォント]] (オープンソース) も参照🤤\\ ===== Web フォントの形式 ===== ^ 拡張子 ^ 形式 ^ 説明 ^ | .woff2 | [[https://www.w3.org/TR/WOFF2/|Web Open Font Format 2.0]] | [[wwjp>Web_Open_Font_Format|Web Open Font Format (WOFF)]] 2.0 は、Google によるリファレンス実装と共に公開された。フォントの圧縮に [[wwjp>Brotli|Brotli]] を使用するように改善された。 | | .woff | [[https://www.w3.org/TR/WOFF/|Web Open Font Format 1.0]] | [[wwjp>Web_Open_Font_Format|Web Open Font Format (WOFF)]] は、ウェブページで使用するためのフォント形式である。WOFF は OpenType 又は TrueType 形式のフォントを圧縮し、XMLによるメタデータを追加したものとなっている。 | | .ttf | [[wwjp>TrueType|TrueType]] | TrueType (トゥルータイプ) はデジタルフォントの規格である。Windows や macOS、Linux で標準的に利用されている。 | | .eof | [[wwjp>Embedded_OpenType|Embedded OpenType]] | Web ページの埋め込みフォントとして使用するために Microsoft が設計したコンパクトな OpenType フォントである。MS IE でのみサポートされる。 | * EOT 形式と TTF 形式はデフォルトで圧縮されていない。\\ これらの形式を提供する場合は GZIP 圧縮を適用するように Web サーバーを設定する必要がある。 * WOFF はビルトインの圧縮付きである。WOFF 圧縮ツールで最適な圧縮設定を使用していることを確認すること。 * WOFF2 では独自の前処理アルゴリズムと圧縮アルゴリズムが使用されており、WOFF 形式よりも約 30% ファイルサイズが削減されている。 ===== TrueType(.ttf) から Web Open Font Format(.woff, .woff2) への変換 (Linux)🤤 ===== Linux では sfnt2woff (ttf => woff) と woff2_compress (ttf => woff2) コマンドが必要...🤔\\ <WRAP color_term> <WRAP color_command><html><pre> <font color="#0087FF"><b>$</b></font> <font color="#26A269">dnf</font> provides sfnt2woff woff2_compress </pre></html></WRAP> <WRAP color_result><html><pre> メタデータの期限切れの最終確認: 0:00:07 時間前の 2023年03月13日 16時00分49秒 に実施しました。 woff-0.20091126-26.fc37.x86_64 : Encoding and Decoding for Web Open Font Format(Woff) Repo : fedora 一致: ファイル名 : /usr/bin/<b class=MAG>sfnt2woff</b> woff2-tools-1.0.2-15.fc37.x86_64 : Web Open Font Format 2.0 tools Repo : fedora 一致: ファイル名 : /usr/bin/<b class=MAG>woff2_compress</b> </pre></html></WRAP> </WRAP> Fedora では woff と woff2-tools のパッケージをインストールする🤔\\ <WRAP color_term> <WRAP color_command><html><pre> <font color="#0087FF"><b>$</b></font> <font color="#26A269"><u style="text-decoration-style:solid">sudo</u></font> <font color="#26A269">dnf</font> install <font color="#A347BA">-y</font> woff woff2-tools </pre></html></WRAP> <WRAP color_result><html><pre> リポジトリの更新を読み込み中: リポジトリを読み込みました。 <b>Package </b> <b>Arch </b> <b>Version </b> <b>Repository </b> <b> Size</b> Installing: <font color="#26A269"> woff </font> x86_64 0.20091126-41.fc41 fedora 72.2 KiB <font color="#26A269"> woff2-tools </font> x86_64 1.0.2-20.fc41 fedora 51.8 KiB Transaction Summary: Installing: 2 packages パッケージサイズ 57 KiB 、ダウンロードサイズ 57 KiB 。 完了後、124 KiB のサイズが利用されます（インストール 124 KiB、削除 0 B）。 [1/2] woff-0:0.20091126-41.fc41.x86_64 100% | 37.0 KiB/s | 32.8 KiB | 00m01s [2/2] woff2-tools-0:1.0.2-20.fc41.x86_64 100% | 25.8 KiB/s | 23.7 KiB | 00m01s ------------------------------------------------------------------------------------------------------------------ [2/2] Total 100% | 16.5 KiB/s | 56.6 KiB | 00m03s トランザクションを実行中 [1/4] パッケージ ファイルを検証 100% | 500.0 B/s | 2.0 B | 00m00s [2/4] トランザクションの準備 100% | 1.0 B/s | 2.0 B | 00m01s [3/4] インストール中 woff2-tools-0:1.0.2-20.fc41.x86_64 100% | 264.3 KiB/s | 53.4 KiB | 00m00s [4/4] インストール中 woff-0:0.20091126-41.fc41.x86_64 100% | 35.4 KiB/s | 73.9 KiB | 00m02s 完了しました！ </pre></html></WRAP> </WRAP> ==== オープンなライセンスの 白源/HackGen さんを Web フォントに変換する🤤 ==== [[git>yuru7/HackGen|白源/HackGen]] さんをダウンロードする🤔\\ [[git>yuru7/HackGen/blob/master/LICENSE|Copyright (c) 2019, Yuko OTAWARA. with Reserved Font Name "白源", "HackGen"]]\\ [[wwjp>SIL_Open_Font_License|SIL Open Font License]] Version 1.1.\\ {{page>linux:fonts#フォントのダウンロード}} ==== TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤 ==== <WRAP color_term> <WRAP color_command><html><pre> <font color="#0087FF"><b>$</b></font> <font color="#26A269">cd</font> <u style="text-decoration-style:solid">HackGen_NF_v2.10.0</u> <font color="#0087FF"><b>$</b></font> <font color="#26A269">ls</font> <font color="#2A7BDE"><b>*</b></font>.ttf <font color="#2A7BDE"><b>|</b></font> <font color="#26A269">xargs</font> <font color="#A347BA">-i</font> sh <font color="#A347BA">-c</font> <font color="#A2734C">'sfnt2woff </font><font color="#2A7BDE"><b>{}</b></font><font color="#A2734C"> && woff2_compress </font><font color="#2A7BDE"><b>{}</b></font><font color="#A2734C">'</font> </pre></html></WRAP> <WRAP color_result><html><pre> Processing HackGen35ConsoleNF-Bold.ttf => HackGen35ConsoleNF-Bold.woff2 Compressed 10875327 to 4569738. Processing HackGen35ConsoleNF-Regular.ttf => HackGen35ConsoleNF-Regular.woff2 Compressed 10427620 to 4393224. Processing HackGenConsoleNF-Bold.ttf => HackGenConsoleNF-Bold.woff2 Compressed 10876056 to 4571220. Processing HackGenConsoleNF-Regular.ttf => HackGenConsoleNF-Regular.woff2 Compressed 10426503 to 4395310. </pre></html></WRAP> <WRAP color_command><html><pre> <font color="#0087FF"><b>$</b></font> <font color="#26A269">ll</font> </pre></html></WRAP> <WRAP color_result><html><pre> 合計 94328 -rw-r--r-- 1 tomoyan tomoyan 13462380 12月 29 16:04 HackGen35ConsoleNF-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 6531888 4月 12 10:54 HackGen35ConsoleNF-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 4569844 4月 12 10:55 HackGen35ConsoleNF-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 12922844 12月 29 16:04 HackGen35ConsoleNF-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 6398440 4月 12 10:55 HackGen35ConsoleNF-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 4393332 4月 12 10:56 HackGen35ConsoleNF-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 13464288 12月 29 16:04 HackGenConsoleNF-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 6534948 4月 12 10:56 HackGenConsoleNF-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 4571328 4月 12 10:57 HackGenConsoleNF-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 12922800 12月 29 16:04 HackGenConsoleNF-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 6401656 4月 12 10:57 HackGenConsoleNF-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 4395416 4月 12 10:58 HackGenConsoleNF-Regular.woff2 </pre></html></WRAP> <WRAP color_command><html><pre> <font color="#0087FF"><b>$</b></font> <font color="#26A269">cd</font> <u style="text-decoration-style:solid">../HackGen_v2.10.0</u> <font color="#0087FF"><b>$</b></font> <font color="#26A269">ls</font> <font color="#2A7BDE"><b>*</b></font>.ttf <font color="#2A7BDE"><b>|</b></font> <font color="#26A269">xargs</font> <font color="#A347BA">-i</font> sh <font color="#A347BA">-c</font> <font color="#A2734C">'sfnt2woff </font><font color="#2A7BDE"><b>{}</b></font><font color="#A2734C"> && woff2_compress </font><font color="#2A7BDE"><b>{}</b></font><font color="#A2734C">'</font> </pre></html></WRAP> <WRAP color_result><html><pre> Processing HackGen-Bold.ttf => HackGen-Bold.woff2 Compressed 9098739 to 3604203. Processing HackGen-Regular.ttf => HackGen-Regular.woff2 Compressed 8646368 to 3431454. Processing HackGen35-Bold.ttf => HackGen35-Bold.woff2 Compressed 9098354 to 3603655. Processing HackGen35-Regular.ttf => HackGen35-Regular.woff2 Compressed 8645686 to 3430103. Processing HackGen35Console-Bold.ttf => HackGen35Console-Bold.woff2 Compressed 9118148 to 3611814. Processing HackGen35Console-Regular.ttf => HackGen35Console-Regular.woff2 Compressed 8670425 to 3441278. Processing HackGenConsole-Bold.ttf => HackGenConsole-Bold.woff2 Compressed 9118925 to 3614983. Processing HackGenConsole-Regular.ttf => HackGenConsole-Regular.woff2 Compressed 8669356 to 3442626. </pre></html></WRAP> <WRAP color_command><html><pre> <font color="#0087FF"><b>$</b></font> <font color="#26A269">ll</font> </pre></html></WRAP> <WRAP color_result><html><pre> 合計 154060 -rw-r--r-- 1 tomoyan tomoyan 11239136 12月 29 16:04 HackGen-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5282724 4月 12 10:59 HackGen-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 3604308 4月 12 11:00 HackGen-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 10694536 12月 29 16:04 HackGen-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5149508 4月 12 11:00 HackGen-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3431560 4月 12 11:00 HackGen-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 11238016 12月 29 16:04 HackGen35-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5281588 4月 12 11:01 HackGen35-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 3603760 4月 12 11:01 HackGen35-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 10693068 12月 29 16:04 HackGen35-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5147932 4月 12 11:01 HackGen35-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3430208 4月 12 11:02 HackGen35-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 11249376 12月 29 16:04 HackGen35Console-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5288700 4月 12 11:02 HackGen35Console-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 3611920 4月 12 11:02 HackGen35Console-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 10709828 12月 29 16:04 HackGen35Console-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5155420 4月 12 11:02 HackGen35Console-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3441384 4月 12 11:03 HackGen35Console-Regular.woff2 -rw-r--r-- 1 tomoyan tomoyan 11251244 12月 29 16:04 HackGenConsole-Bold.ttf -rw-r--r-- 1 tomoyan tomoyan 5291272 4月 12 11:03 HackGenConsole-Bold.woff -rw-r--r-- 1 tomoyan tomoyan 3615088 4月 12 11:04 HackGenConsole-Bold.woff2 -rw-r--r-- 1 tomoyan tomoyan 10709744 12月 29 16:04 HackGenConsole-Regular.ttf -rw-r--r-- 1 tomoyan tomoyan 5158008 4月 12 11:04 HackGenConsole-Regular.woff -rw-r--r-- 1 tomoyan tomoyan 3442732 4月 12 11:04 HackGenConsole-Regular.woff2 </pre></html></WRAP> </WRAP> ===== WOFFConverter (Windows) ===== {{:web:woff_converter_001.png?80|WOFFConverter Icon}}\\ [[https://opentype.jp/woffconv.htm|WOFFコンバータ]] (武蔵システム)\\ {{:web:woff_converter_002.png?400|WOFFConverter 002}}\\ ===== 参考文献 ===== [[https://fonts.google.com|Google Fonts]]\\ [[https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja|ウェブフォントの最適化 | Web Fundamentals | Google Developers]]\\ [[https://01earth.jp/web-create/coding/web-font/|自社サーバーにフォントをアップロードして、Webフォントを使用する方法｜株式会社ゼロワンアース]]\\ [[https://en.wikipedia.org/wiki/Web_Open_Font_Format|Web Open Font Format - Wikipedia]]\\ [[https://developer.mozilla.org/ja/docs/Web/Guide/WOFF|WOFF (Web Open Font Format) - 開発者ガイド | MDN]]\\ [[https://www.willgate.co.jp/promonista/page-speed/|ページ表示速度の計測・改善方法｜Googleが重視する理由と対策 | ウィルゲート]]\\ [[https://christina04.hatenablog.com/entry/2017/04/12/002333|Webフォントのファイルサイズを小さくする - Carpe Diem]]\\ ==== 付録 ==== [[tw>tomoyan596sp/status/1567951237596983296|Linuxでパッケージ化されているので、sfnt2woffとwoff2_compressが含まれるパッケージはこれで良さそうですけど試します🤔 $ sudo dnf install woff woff2-tools]]\\ web/web_font.txt 最終更新: 2025/04/12 11:14by ともやん
ともやん ともやん