差分

このページの2つのバージョン間の差分を表示します。

--- web:web_font [2022/09/09 04:10] – [Web フォント] ともやん
+++ web:web_font [2023/09/23 11:05] (現在) – [TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤] ともやん
@@ 行 4: / 行 4: @@
 ===== Web フォントの形式 =====
 ^  拡張子  ^  形式  ^  説明  ^
-|  .woff2  | [[https://www.w3.org/TR/WOFF2/|Web Open Font Format 2.0]]  | [[https://ja.wikipedia.org/wiki/Web_Open_Font_Format|Web Open Font Format (WOFF)]] 2.0 は、Google によるリファレンス実装と共に公開された。フォントの圧縮に [[https://ja.wikipedia.org/wiki/Brotli|Brotli]] を使用するように改善された。  |
+|  .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]]  | [[https://ja.wikipedia.org/wiki/Web_Open_Font_Format|Web Open Font Format (WOFF)]] は、ウェブページで使用するためのフォント形式である。WOFF は OpenType 又は TrueType 形式のフォントを圧縮し、XMLによるメタデータを追加したものとなっている。  |
+|  .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  | [[https://ja.wikipedia.org/wiki/TrueType|TrueType - Wikipedia]]  | TrueType (トゥルータイプ) はデジタルフォントの規格である。Windows や macOS、Linux で標準的に利用されている。  |
+|  .ttf  | [[wwjp>TrueType|TrueType]]  | TrueType (トゥルータイプ) はデジタルフォントの規格である。Windows や macOS、Linux で標準的に利用されている。  |
-|  .eof  | [[https://en.wikipedia.org/wiki/Embedded_OpenType|Embedded OpenType]]  | Web ページの埋め込みフォントとして使用するために Microsoft が設計したコンパクトな OpenType フォントである。MS IE でのみサポートされる。  |
+|  .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>
+<b class=GRN>$</b> <b class=HIY>dnf</b> 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>
+<b class=GRN>$</b> <b class=HIY>sudo</b> dnf install woff woff2-tools
+</pre></html></WRAP>
+<WRAP color_result_long><html><pre>
+メタデータの期限切れの最終確認: 2:29:35 時間前の 2023年03月13日 13時35分15秒 に実施しました。
+依存関係が解決しました。
+==============================================================================================================
+ パッケージ                アーキテクチャー     バージョン                        リポジトリー          サイズ
+==============================================================================================================
+インストール:
+ <b class=GRN>woff                     </b> x86_64               0.20091126-35.fc37                updates                32 k
+ <b class=GRN>woff2-tools              </b> x86_64               1.0.2-15.fc37                     fedora                 24 k
+トランザクションの概要
+==============================================================================================================
+インストール  2 パッケージ
+ダウンロードサイズの合計: 56 k
+インストール後のサイズ: 121 k
+これでよろしいですか? [y/N]: y
+パッケージのダウンロード:
+(1/2): woff-0.20091126-35.fc37.x86_64.rpm                                     158 kB/s |  32 kB     00:00
+(2/2): woff2-tools-1.0.2-15.fc37.x86_64.rpm                                    91 kB/s |  24 kB     00:00
+--------------------------------------------------------------------------------------------------------------
+合計                                                                           26 kB/s |  56 kB     00:02
+トランザクションの確認を実行中
+トランザクションの確認に成功しました。
+トランザクションのテストを実行中
+トランザクションのテストに成功しました。
+トランザクションを実行中
+  準備             :                                                                                      1/1
+  インストール中   : woff-0.20091126-35.fc37.x86_64                                                       1/2
+  インストール中   : woff2-tools-1.0.2-15.fc37.x86_64                                                     2/2
+  scriptletの実行中: woff2-tools-1.0.2-15.fc37.x86_64                                                     2/2
+  検証             : woff2-tools-1.0.2-15.fc37.x86_64                                                     1/2
+  検証             : woff-0.20091126-35.fc37.x86_64                                                       2/2
+インストール済み:
+  woff-0.20091126-35.fc37.x86_64                       woff2-tools-1.0.2-15.fc37.x86_64
+完了しました!
+</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.\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">curl</span> <span style="color:#A347BA">-LO</span> https://github.com/yuru7/HackGen/releases/download/v2.9.0/HackGen_NF_v2.9.0.zip
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
+                                 Dload  Upload   Total   Spent    Left  Speed
+     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
+23.0M  100 23.0M    0     0  8693k      0  0:00:02  0:00:02 --:--:-- 11.2M
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">curl</span> <span style="color:#A347BA">-LO</span> https://github.com/yuru7/HackGen/releases/download/v2.9.0/HackGen_v2.9.0.zip
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
+                                 Dload  Upload   Total   Spent    Left  Speed
+     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
+38.5M  100 38.5M    0     0  9460k      0  0:00:04  0:00:04 --:--:-- 11.3M
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">unzip</span> <u style="text-decoration-style:single">HackGen_v2.9.0.zip</u>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Archive:  HackGen_v2.9.0.zip
+   creating: HackGen_v2.9.0/
+  inflating: HackGen_v2.9.0/HackGen-Bold.ttf
+  inflating: HackGen_v2.9.0/HackGen-Regular.ttf
+  inflating: HackGen_v2.9.0/HackGen35-Bold.ttf
+  inflating: HackGen_v2.9.0/HackGen35-Regular.ttf
+  inflating: HackGen_v2.9.0/HackGen35Console-Bold.ttf
+  inflating: HackGen_v2.9.0/HackGen35Console-Regular.ttf
+  inflating: HackGen_v2.9.0/HackGenConsole-Bold.ttf
+  inflating: HackGen_v2.9.0/HackGenConsole-Regular.ttf
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">unzip</span> <u style="text-decoration-style:single">HackGen_NF_v2.9.0.zip</u>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Archive:  HackGen_NF_v2.9.0.zip
+   creating: HackGen_NF_v2.9.0/
+  inflating: HackGen_NF_v2.9.0/HackGen35ConsoleNF-Bold.ttf
+  inflating: HackGen_NF_v2.9.0/HackGen35ConsoleNF-Regular.ttf
+  inflating: HackGen_NF_v2.9.0/HackGenConsoleNF-Bold.ttf
+  inflating: HackGen_NF_v2.9.0/HackGenConsoleNF-Regular.ttf
+</pre></html></WRAP>
+</WRAP>
+==== TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤 ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">cd</span> <u style="text-decoration-style:single">HackGen_v2.9.0</u>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">ls</span> <span style="color:#13496F"><b>*</b></span>.ttf <span style="color:#13496F"><b>|</b></span> <span style="color:#26A269">xargs</span> <span style="color:#A347BA">-i</span> sh <span style="color:#A347BA">-c</span> <span style="color:#A2734C">&apos;sfnt2woff </span><span style="color:#13496F"><b>{}</b></span><span style="color:#A2734C"> &amp;&amp; woff2_compress </span><span style="color:#13496F"><b>{}</b></span><span style="color:#A2734C">&apos;</span>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Processing HackGen-Bold.ttf => HackGen-Bold.woff2
+Compressed 9099366 to 3604694.
+Processing HackGen-Regular.ttf => HackGen-Regular.woff2
+Compressed 8646957 to 3431083.
+Processing HackGen35-Bold.ttf => HackGen35-Bold.woff2
+Compressed 9099743 to 3605098.
+Processing HackGen35-Regular.ttf => HackGen35-Regular.woff2
+Compressed 8647249 to 3431110.
+Processing HackGen35Console-Bold.ttf => HackGen35Console-Bold.woff2
+Compressed 9119537 to 3613699.
+Processing HackGen35Console-Regular.ttf => HackGen35Console-Regular.woff2
+Compressed 8671988 to 3441818.
+Processing HackGenConsole-Bold.ttf => HackGenConsole-Bold.woff2
+Compressed 9119552 to 3614099.
+Processing HackGenConsole-Regular.ttf => HackGenConsole-Regular.woff2
+Compressed 8669945 to 3443688.
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">ll</span>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+合計 153772
+-rw-r--r-- 1 tomoyan tomoyan 11239764  5月  3 17:51 HackGen-Bold.ttf
+-rw-r--r-- 1 tomoyan tomoyan  5243656  9月 23 10:52 HackGen-Bold.woff
+-rw-r--r-- 1 tomoyan tomoyan  3604800  9月 23 10:52 HackGen-Bold.woff2
+-rw-r--r-- 1 tomoyan tomoyan 10695124  5月  3 17:51 HackGen-Regular.ttf
+-rw-r--r-- 1 tomoyan tomoyan  5106732  9月 23 10:52 HackGen-Regular.woff
+-rw-r--r-- 1 tomoyan tomoyan  3431188  9月 23 10:53 HackGen-Regular.woff2
+-rw-r--r-- 1 tomoyan tomoyan 11239408  5月  3 17:51 HackGen35-Bold.ttf
+-rw-r--r-- 1 tomoyan tomoyan  5243108  9月 23 10:53 HackGen35-Bold.woff
+-rw-r--r-- 1 tomoyan tomoyan  3605204  9月 23 10:53 HackGen35-Bold.woff2
+-rw-r--r-- 1 tomoyan tomoyan 10694628  5月  3 17:51 HackGen35-Regular.ttf
+-rw-r--r-- 1 tomoyan tomoyan  5105320  9月 23 10:53 HackGen35-Regular.woff
+-rw-r--r-- 1 tomoyan tomoyan  3431216  9月 23 10:54 HackGen35-Regular.woff2
+-rw-r--r-- 1 tomoyan tomoyan 11250760  5月  3 17:51 HackGen35Console-Bold.ttf
+-rw-r--r-- 1 tomoyan tomoyan  5250220  9月 23 10:54 HackGen35Console-Bold.woff
+-rw-r--r-- 1 tomoyan tomoyan  3613804  9月 23 10:54 HackGen35Console-Bold.woff2
+-rw-r--r-- 1 tomoyan tomoyan 10711388  5月  3 17:51 HackGen35Console-Regular.ttf
+-rw-r--r-- 1 tomoyan tomoyan  5113104  9月 23 10:54 HackGen35Console-Regular.woff
+-rw-r--r-- 1 tomoyan tomoyan  3441924  9月 23 10:55 HackGen35Console-Regular.woff2
+-rw-r--r-- 1 tomoyan tomoyan 11251872  5月  3 17:51 HackGenConsole-Bold.ttf
+-rw-r--r-- 1 tomoyan tomoyan  5252108  9月 23 10:55 HackGenConsole-Bold.woff
+-rw-r--r-- 1 tomoyan tomoyan  3614204  9月 23 10:55 HackGenConsole-Bold.woff2
+-rw-r--r-- 1 tomoyan tomoyan 10710336  5月  3 17:51 HackGenConsole-Regular.ttf
+-rw-r--r-- 1 tomoyan tomoyan  5115612  9月 23 10:55 HackGenConsole-Regular.woff
+-rw-r--r-- 1 tomoyan tomoyan  3443796  9月 23 10:56 HackGenConsole-Regular.woff2
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">cd</span> <u style="text-decoration-style:single">../HackGen_NF_v2.9.0</u>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">ls</span> <span style="color:#13496F"><b>*</b></span>.ttf <span style="color:#13496F"><b>|</b></span> <span style="color:#26A269">xargs</span> <span style="color:#A347BA">-i</span> sh <span style="color:#A347BA">-c</span> <span style="color:#A2734C">&apos;sfnt2woff </span><span style="color:#13496F"><b>{}</b></span><span style="color:#A2734C"> &amp;&amp; woff2_compress </span><span style="color:#13496F"><b>{}</b></span><span style="color:#A2734C">&apos;</span>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Processing HackGen35ConsoleNF-Bold.ttf => HackGen35ConsoleNF-Bold.woff2
+Compressed 10551428 to 4365109.
+Processing HackGen35ConsoleNF-Regular.ttf => HackGen35ConsoleNF-Regular.woff2
+Compressed 10103895 to 4187458.
+Processing HackGenConsoleNF-Bold.ttf => HackGenConsoleNF-Bold.woff2
+Compressed 10551379 to 4366483.
+Processing HackGenConsoleNF-Regular.ttf => HackGenConsoleNF-Regular.woff2
+Compressed 10101788 to 4189298.
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<span style="color:#FF8700"><b>$</b></span> <span style="color:#26A269">ll</span>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+合計 90800
+-rw-r--r-- 1 tomoyan tomoyan 13060044  5月  3 17:51 HackGen35ConsoleNF-Bold.ttf
+-rw-r--r-- 1 tomoyan tomoyan  6238424  9月 23 11:01 HackGen35ConsoleNF-Bold.woff
+-rw-r--r-- 1 tomoyan tomoyan  4365216  9月 23 11:01 HackGen35ConsoleNF-Bold.woff2
+-rw-r--r-- 1 tomoyan tomoyan 12520684  5月  3 17:51 HackGen35ConsoleNF-Regular.ttf
+-rw-r--r-- 1 tomoyan tomoyan  6101096  9月 23 11:01 HackGen35ConsoleNF-Regular.woff
+-rw-r--r-- 1 tomoyan tomoyan  4187564  9月 23 11:02 HackGen35ConsoleNF-Regular.woff2
+-rw-r--r-- 1 tomoyan tomoyan 13061184  5月  3 17:51 HackGenConsoleNF-Bold.ttf
+-rw-r--r-- 1 tomoyan tomoyan  6240728  9月 23 11:02 HackGenConsoleNF-Bold.woff
+-rw-r--r-- 1 tomoyan tomoyan  4366588  9月 23 11:02 HackGenConsoleNF-Bold.woff2
+-rw-r--r-- 1 tomoyan tomoyan 12519656  5月  3 17:51 HackGenConsoleNF-Regular.ttf
+-rw-r--r-- 1 tomoyan tomoyan  6104016  9月 23 11:02 HackGenConsoleNF-Regular.woff
+-rw-r--r-- 1 tomoyan tomoyan  4189404  9月 23 11:03 HackGenConsoleNF-Regular.woff2
+</pre></html></WRAP>
+</WRAP>
 ===== WOFFConverter (Windows) =====
@@ 行 19: / 行 229: @@
 ===== 参考文献 =====
+[[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]]\\