差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
web:web_font [2022/09/09 05:49] – [オープンなライセンスの HackGen さんを Web フォントに変換する] ともやん | web:web_font [2023/09/23 11:05] (現在) – [TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤] ともやん | ||
---|---|---|---|
行 4: | 行 4: | ||
===== Web フォントの形式 ===== | ===== Web フォントの形式 ===== | ||
^ 拡張子 | ^ 拡張子 | ||
- | | .woff2 | + | | .woff2 |
- | | .woff | [[https:// | + | | .woff | [[https:// |
- | | .ttf | [[https:// | + | | .ttf | [[wwjp>TrueType|TrueType]] |
- | | .eof | [[https:// | + | | .eof | [[wwjp>Embedded_OpenType|Embedded OpenType]] |
* EOT 形式と TTF 形式はデフォルトで圧縮されていない。\\ これらの形式を提供する場合は GZIP 圧縮を適用するように Web サーバーを設定する必要がある。 | * EOT 形式と TTF 形式はデフォルトで圧縮されていない。\\ これらの形式を提供する場合は GZIP 圧縮を適用するように Web サーバーを設定する必要がある。 | ||
行 13: | 行 13: | ||
* WOFF2 では独自の前処理アルゴリズムと圧縮アルゴリズムが使用されており、WOFF 形式よりも約 30% ファイルサイズが削減されている。 | * WOFF2 では独自の前処理アルゴリズムと圧縮アルゴリズムが使用されており、WOFF 形式よりも約 30% ファイルサイズが削減されている。 | ||
- | ===== TrueType(.ttf) から Web Open Font Format(.woff, | + | ===== TrueType(.ttf) から Web Open Font Format(.woff, |
Linux では sfnt2woff (ttf => woff) と woff2_compress (ttf => woff2) コマンドが必要...🤔\\ | Linux では sfnt2woff (ttf => woff) と woff2_compress (ttf => woff2) コマンドが必要...🤔\\ | ||
<WRAP color_term> | <WRAP color_term> | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ dnf provides sfnt2woff woff2_compress | + | <b class=GRN> |
</ | </ | ||
<WRAP color_result>< | <WRAP color_result>< | ||
- | メタデータの期限切れの最終確認: | + | メタデータの期限切れの最終確認: |
- | woff-0.20091126-25.fc36.x86_64 : Encoding and Decoding for Web Open Font Format(Woff) | + | woff-0.20091126-26.fc37.x86_64 : Encoding and Decoding for Web Open Font Format(Woff) |
Repo : fedora | Repo : fedora | ||
一致: | 一致: | ||
ファイル名 | ファイル名 | ||
- | woff2-tools-1.0.2-14.fc36.x86_64 : Web Open Font Format 2.0 tools | + | woff2-tools-1.0.2-15.fc37.x86_64 : Web Open Font Format 2.0 tools |
Repo : fedora | Repo : fedora | ||
一致: | 一致: | ||
行 36: | 行 36: | ||
<WRAP color_term> | <WRAP color_term> | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ sudo dnf install woff woff2-tools | + | <b class=GRN> |
</ | </ | ||
<WRAP color_result_long>< | <WRAP color_result_long>< | ||
- | メタデータの期限切れの最終確認: | + | メタデータの期限切れの最終確認: |
依存関係が解決しました。 | 依存関係が解決しました。 | ||
============================================================================================================== | ============================================================================================================== | ||
- | | + | |
============================================================================================================== | ============================================================================================================== | ||
インストール: | インストール: | ||
- | <b class=GRN> | + | <b class=GRN> |
- | <b class=GRN> | + | <b class=GRN> |
トランザクションの概要 | トランザクションの概要 | ||
行 52: | 行 52: | ||
インストール | インストール | ||
- | ダウンロードサイズの合計: | + | ダウンロードサイズの合計: |
- | インストール後のサイズ: | + | インストール後のサイズ: |
これでよろしいですか? | これでよろしいですか? | ||
パッケージのダウンロード: | パッケージのダウンロード: | ||
- | (1/2): woff-0.20091126-25.fc36.x86_64.rpm | + | (1/2): woff-0.20091126-35.fc37.x86_64.rpm |
- | (2/2): woff2-tools-1.0.2-14.fc36.x86_64.rpm | + | (2/2): woff2-tools-1.0.2-15.fc37.x86_64.rpm |
-------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ||
- | 合計 | + | 合計 |
トランザクションの確認を実行中 | トランザクションの確認を実行中 | ||
トランザクションの確認に成功しました。 | トランザクションの確認に成功しました。 | ||
行 66: | 行 66: | ||
トランザクションを実行中 | トランザクションを実行中 | ||
準備 | 準備 | ||
- | インストール中 | + | インストール中 |
- | インストール中 | + | インストール中 |
- | scriptletの実行中: | + | scriptletの実行中: |
- | 検証 | + | 検証 |
- | 検証 | + | 検証 |
インストール済み: | インストール済み: | ||
- | woff-0.20091126-25.fc36.x86_64 | + | woff-0.20091126-35.fc37.x86_64 |
完了しました! | 完了しました! | ||
行 79: | 行 79: | ||
</ | </ | ||
- | ==== オープンなライセンスの HackGen さんを Web フォントに変換する ==== | + | ==== オープンなライセンスの |
- | HackGen さんをダウンロードする🤤\\ | + | [[git> |
+ | [[git> | ||
+ | [[wwjp> | ||
<WRAP color_term> | <WRAP color_term> | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ curl -LO https:// | + | <span style=" |
</ | </ | ||
<WRAP color_result>< | <WRAP color_result>< | ||
- | | + | % Total % Received % Xferd Average Speed |
| | ||
0 | 0 | ||
- | 100 38.5M | + | 100 23.0M |
</ | </ | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ curl -LO https:// | + | <span style=" |
</ | </ | ||
<WRAP color_result>< | <WRAP color_result>< | ||
- | | + | % Total % Received % Xferd Average Speed |
| | ||
0 | 0 | ||
- | 100 42.0M | + | 100 38.5M |
</ | </ | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ unzip HackGen_v2.7.0.zip | + | <span style=" |
</ | </ | ||
<WRAP color_result>< | <WRAP color_result>< | ||
- | Archive: | + | Archive: |
- | | + | |
- | inflating: HackGen_v2.7.0/ | + | inflating: HackGen_v2.9.0/ |
- | inflating: HackGen_v2.7.0/ | + | inflating: HackGen_v2.9.0/ |
- | inflating: HackGen_v2.7.0/ | + | inflating: HackGen_v2.9.0/ |
- | inflating: HackGen_v2.7.0/ | + | inflating: HackGen_v2.9.0/ |
- | inflating: HackGen_v2.7.0/ | + | inflating: HackGen_v2.9.0/ |
- | inflating: HackGen_v2.7.0/ | + | inflating: HackGen_v2.9.0/ |
- | inflating: HackGen_v2.7.0/ | + | inflating: HackGen_v2.9.0/ |
- | inflating: HackGen_v2.7.0/ | + | inflating: HackGen_v2.9.0/ |
</ | </ | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ unzip HackGen_NF_v2.7.0.zip | + | <span style=" |
</ | </ | ||
<WRAP color_result>< | <WRAP color_result>< | ||
- | Archive: | + | Archive: |
- | | + | |
- | inflating: HackGen_NF_v2.7.0/ | + | inflating: HackGen_NF_v2.9.0/ |
- | inflating: HackGen_NF_v2.7.0/ | + | inflating: HackGen_NF_v2.9.0/ |
- | inflating: HackGen_NF_v2.7.0/ | + | inflating: HackGen_NF_v2.9.0/ |
- | inflating: HackGen_NF_v2.7.0/ | + | inflating: HackGen_NF_v2.9.0/ |
- | inflating: HackGen_NF_v2.7.0/ | + | |
- | inflating: HackGen_NF_v2.7.0/ | + | |
- | inflating: HackGen_NF_v2.7.0/ | + | |
- | inflating: HackGen_NF_v2.7.0/ | + | |
</ | </ | ||
</ | </ | ||
- | TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換する🤤\\ | + | ==== TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤 |
<WRAP color_term> | <WRAP color_term> | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ cd HackGen_v2.7.0 | + | <span style=" |
- | $ ls *.ttf | xargs -i sh -c 'sfnt2woff {} && woff2_compress {}' | + | <span style=" |
</ | </ | ||
<WRAP color_result>< | <WRAP color_result>< | ||
Processing HackGen-Bold.ttf => HackGen-Bold.woff2 | Processing HackGen-Bold.ttf => HackGen-Bold.woff2 | ||
- | Compressed | + | Compressed |
Processing HackGen-Regular.ttf => HackGen-Regular.woff2 | Processing HackGen-Regular.ttf => HackGen-Regular.woff2 | ||
- | Compressed | + | Compressed |
Processing HackGen35-Bold.ttf => HackGen35-Bold.woff2 | Processing HackGen35-Bold.ttf => HackGen35-Bold.woff2 | ||
- | Compressed 9099743 to 3604808. | + | Compressed 9099743 to 3605098. |
Processing HackGen35-Regular.ttf => HackGen35-Regular.woff2 | Processing HackGen35-Regular.ttf => HackGen35-Regular.woff2 | ||
- | Compressed 8647249 to 3429783. | + | Compressed 8647249 to 3431110. |
Processing HackGen35Console-Bold.ttf => HackGen35Console-Bold.woff2 | Processing HackGen35Console-Bold.ttf => HackGen35Console-Bold.woff2 | ||
- | Compressed 9119537 to 3612645. | + | Compressed 9119537 to 3613699. |
Processing HackGen35Console-Regular.ttf => HackGen35Console-Regular.woff2 | Processing HackGen35Console-Regular.ttf => HackGen35Console-Regular.woff2 | ||
- | Compressed 8671988 to 3441571. | + | Compressed 8671988 to 3441818. |
Processing HackGenConsole-Bold.ttf => HackGenConsole-Bold.woff2 | Processing HackGenConsole-Bold.ttf => HackGenConsole-Bold.woff2 | ||
- | Compressed | + | Compressed |
Processing HackGenConsole-Regular.ttf => HackGenConsole-Regular.woff2 | Processing HackGenConsole-Regular.ttf => HackGenConsole-Regular.woff2 | ||
- | Compressed | + | Compressed |
</ | </ | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ ll | + | <span style=" |
</ | </ | ||
<WRAP color_result>< | <WRAP color_result>< | ||
合計 153772 | 合計 153772 | ||
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan 11239408 | + | -rw-r--r-- 1 tomoyan tomoyan 11239408 |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan 10694628 | + | -rw-r--r-- 1 tomoyan tomoyan 10694628 |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan 11250760 | + | -rw-r--r-- 1 tomoyan tomoyan 11250760 |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan 10711388 | + | -rw-r--r-- 1 tomoyan tomoyan 10711388 |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
</ | </ | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ cd HackGen_NF_v2.7.0 | + | <span style=" |
- | $ ls *.ttf | xargs -i sh -c 'sfnt2woff {} && woff2_compress {}' | + | <span style=" |
</ | </ | ||
<WRAP color_result>< | <WRAP color_result>< | ||
Processing HackGen35ConsoleNF-Bold.ttf => HackGen35ConsoleNF-Bold.woff2 | Processing HackGen35ConsoleNF-Bold.ttf => HackGen35ConsoleNF-Bold.woff2 | ||
- | Compressed | + | Compressed |
Processing HackGen35ConsoleNF-Regular.ttf => HackGen35ConsoleNF-Regular.woff2 | Processing HackGen35ConsoleNF-Regular.ttf => HackGen35ConsoleNF-Regular.woff2 | ||
- | Compressed | + | Compressed |
- | Processing HackGen35ConsoleNFJ-Bold.ttf => HackGen35ConsoleNFJ-Bold.woff2 | + | |
- | Compressed 9776078 to 3987074. | + | |
- | Processing HackGen35ConsoleNFJ-Regular.ttf => HackGen35ConsoleNFJ-Regular.woff2 | + | |
- | Compressed 9328505 to 3816237. | + | |
Processing HackGenConsoleNF-Bold.ttf => HackGenConsoleNF-Bold.woff2 | Processing HackGenConsoleNF-Bold.ttf => HackGenConsoleNF-Bold.woff2 | ||
- | Compressed | + | Compressed |
Processing HackGenConsoleNF-Regular.ttf => HackGenConsoleNF-Regular.woff2 | Processing HackGenConsoleNF-Regular.ttf => HackGenConsoleNF-Regular.woff2 | ||
- | Compressed | + | Compressed |
- | Processing HackGenConsoleNFJ-Bold.ttf => HackGenConsoleNFJ-Bold.woff2 | + | |
- | Compressed 9778374 to 3988063. | + | |
- | Processing HackGenConsoleNFJ-Regular.ttf => HackGenConsoleNFJ-Regular.woff2 | + | |
- | Compressed 9329740 to 3814213. | + | |
</ | </ | ||
<WRAP color_command>< | <WRAP color_command>< | ||
- | $ ll | + | <span style=" |
</ | </ | ||
<WRAP color_result>< | <WRAP color_result>< | ||
- | 合計 | + | 合計 |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan 11542040 | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan | + | -rw-r--r-- 1 tomoyan tomoyan |
- | -rw-r--r-- 1 tomoyan tomoyan 12058104 | + | |
- | -rw-r--r-- 1 tomoyan tomoyan | + | |
- | -rw-r--r-- 1 tomoyan tomoyan | + | |
- | -rw-r--r-- 1 tomoyan tomoyan | + | |
- | -rw-r--r-- 1 tomoyan tomoyan | + | |
- | -rw-r--r-- 1 tomoyan tomoyan | + | |
- | -rw-r--r-- 1 tomoyan tomoyan 12084872 | + | |
- | -rw-r--r-- 1 tomoyan tomoyan | + | |
- | -rw-r--r-- 1 tomoyan tomoyan | + | |
- | -rw-r--r-- 1 tomoyan tomoyan 11544276 | + | |
- | -rw-r--r-- 1 tomoyan tomoyan | + | |
- | -rw-r--r-- 1 tomoyan tomoyan | + | |
</ | </ | ||
</ | </ | ||
行 251: | 行 229: | ||
===== 参考文献 ===== | ===== 参考文献 ===== | ||
+ | [[https:// | ||
[[https:// | [[https:// | ||
[[https:// | [[https:// | ||
[[https:// | [[https:// | ||
[[https:// | [[https:// | ||
+ | [[https:// | ||
+ | [[https:// | ||
==== 付録 ==== | ==== 付録 ==== | ||
[[tw> | [[tw> | ||