web:web_font

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
web:web_font [2022/09/09 04:54] – [WOFFConverter (Windows)] ともやんweb:web_font [2025/04/12 11:14] (現在) – [TrueType(.ttf) から Web Open Font Format(.woff と .woff2) へ変換🤤] ともやん
行 4: 行 4:
 ===== Web フォントの形式 ===== ===== 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 サーバーを設定する必要がある。   * EOT 形式と TTF 形式はデフォルトで圧縮されていない。\\ これらの形式を提供する場合は GZIP 圧縮を適用するように Web サーバーを設定する必要がある。
行 13: 行 13:
   * WOFF2 では独自の前処理アルゴリズムと圧縮アルゴリズムが使用されており、WOFF 形式よりも約 30% ファイルサイズが削減されている。   * WOFF2 では独自の前処理アルゴリズムと圧縮アルゴリズムが使用されており、WOFF 形式よりも約 30% ファイルサイズが削減されている。
  
-===== TrueType(.ttf) => Web Open Font Format(.woff, .woff2) への変換 (Linux) =====+===== TrueType(.ttf) から Web Open Font Format(.woff, .woff2) への変換 (Linux)🤤 =====
 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><html><pre> <WRAP color_command><html><pre>
-$ dnf provides sfnt2woff woff2_compress+<font color="#0087FF"><b>$</b></font> <font color="#26A269">dnf</font> provides sfnt2woff woff2_compress
 </pre></html></WRAP> </pre></html></WRAP>
 <WRAP color_result><html><pre> <WRAP color_result><html><pre>
-メタデータの期限切れの最終確認: 5 days, 16:01:19 時間前の 2022年09月03日 11時54分19秒 に実施しました。 +メタデータの期限切れの最終確認: 0:00:07 時間前の 2023年03月13日 16時00分49秒 に実施しました。 
-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
 一致: 一致:
 ファイル名    : /usr/bin/<b class=MAG>sfnt2woff</b> ファイル名    : /usr/bin/<b class=MAG>sfnt2woff</b>
  
-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><html><pre> <WRAP color_command><html><pre>
-$ sudo dnf install woff woff2-tools+<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> </pre></html></WRAP>
 <WRAP color_result><html><pre> <WRAP color_result><html><pre>
-メタデータの期限切れの最終確認: 1:07:15 時間前の 2022年09月09日 02時50分04秒 に実施しました。 +リポジトリの更新を読み込み中: 
-依存関係が解決しました。 +リポジトリを読み込みました。 
-============================================================================================================== +<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
- woff                      x86_64               0.20091126-25.fc36                 fedora                22 k +
- woff2-tools               x86_64               1.0.2-14.fc36                      fedora                24 k+
  
-トランザクションの概要 +Transaction Summary: 
-============================================================================================================== + Installing:         2 packages
-インストール  2 パッケージ+
  
-ダウンロードサイズの合計: 45 k +パッケージサイズ 57 KiB 、ダウンロードサイズ 57 KiB 。 
-インストール後のサイズ: 88 k +完了後、124 KiB のサイズが利用されます（インストール 124 KiB、削除 0 B）。 
-これでよろしいですか? [y/N]: y +[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 
-(1/2): woff-0.20091126-25.fc36.x86_64.rpm                                     103 kB/s |  22 kB     00:00     +------------------------------------------------------------------------------------------------------------------ 
-(2/2): woff2-tools-1.0.2-14.fc36.x86_64.rpm                                    99 kB/s |  24 kB     00:00     +[2/2] Total                                                               100% |  16.5 KiB/s |  56.6 KiB |  00m03s
--------------------------------------------------------------------------------------------------------------- +
-合計                                                                           45 kB/s |  45 kB     00:01      +
-トランザクションの確認を実行中 +
-トランザクションの確認に成功しました。 +
-トランザクションのテストを実行中 +
-トランザクションのテストに成功しました。+
 トランザクションを実行中 トランザクションを実行中
-  準備             :                                                                                      1/1  +[1/4] パッケージ ファイルを検証                               100% | 500.0   B/s |   2.0   B |  00m00s 
-  インストール中   : woff2-tools-1.0.2-14.fc36.x86_64                                                     1/2  +[2/4] トランザクションの準備                                   100% |   1.0   B/s |   2.0   B |  00m01s 
-  インストール中   : woff-0.20091126-25.fc36.x86_64                                                       2/2  +[3/4] インストール中 woff2-tools-0:1.0.2-20.fc41.x86_64            100% | 264.3 KiB/s |  53.4 KiB |  00m00s 
-  scriptletの実行中: woff-0.20091126-25.fc36.x86_64                                                       2/2  +[4/4] インストール中 woff-0:0.20091126-41.fc41.x86_64              100% |  35.4 KiB/s |  73.9 KiB |  00m02s 
-  検証             : woff-0.20091126-25.fc36.x86_64                                                       1/2  +完了しました！
-  検証             : woff2-tools-1.0.2-14.fc36.x86_64                                                     2/2  +
- +
-インストール済み: +
-  woff-0.20091126-25.fc36.x86_64                       woff2-tools-1.0.2-14.fc36.x86_64                       +
- +
-完了しました!+
 </pre></html></WRAP> </pre></html></WRAP>
 </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_term>
-<WRAP color_command><code> +<WRAP color_command><html><pre> 
-$ curl -LO https://github.com/yuru7/HackGen/releases/download/v2.7.0/HackGen_NF_v2.7.0.zip +<font color="#0087FF"><b>$</b></font> <font color="#26A269">cd</font> <u style="text-decoration-style:solid">HackGen_NF_v2.10.0</u> 
-</code></WRAP> +<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">&apos;sfnt2woff </font><font color="#2A7BDE"><b>{}</b></font><font color="#A2734C"> &amp;&amp; woff2_compress </font><font color="#2A7BDE"><b>{}</b></font><font color="#A2734C">&apos;</font> 
-<WRAP color_result><code> +</pre></html></WRAP> 
-  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current +<WRAP color_result><html><pre> 
-                                 Dload  Upload   Total   Spent    Left  Speed +Processing HackGen35ConsoleNF-Bold.ttf =&gt; HackGen35ConsoleNF-Bold.woff2 
-  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0 +Compressed 10875327 to 4569738. 
-100 42.0M  100 42.0M    0     0  2229k      0  0:00:19  0:00:19 --:--:-- 2223k +Processing HackGen35ConsoleNF-Regular.ttf =&gt; HackGen35ConsoleNF-Regular.woff2 
-</code></WRAP>+Compressed 10427620 to 4393224. 
 +Processing HackGenConsoleNF-Bold.ttf =&gt; HackGenConsoleNF-Bold.woff2 
 +Compressed 10876056 to 4571220. 
 +Processing HackGenConsoleNF-Regular.ttf =&gt; HackGenConsoleNF-Regular.woff2 
 +Compressed 10426503 to 4395310. 
 +</pre></html></WRAP>
  
-<WRAP color_command><code> +<WRAP color_command><html><pre> 
-$ unzip HackGen_NF_v2.7.0.zip +<font color="#0087FF"><b>$</b></font> <font color="#26A269">ll</font> 
-</code></WRAP> +</pre></html></WRAP> 
-<WRAP color_result><code> +<WRAP color_result><html><pre> 
-Archive:  HackGen_NF_v2.7.0.zip +合計 94328 
-   creating: HackGen_NF_v2.7.0/ +-rw-r--r-- 1 tomoyan tomoyan 13462380 12月 29 16:04 HackGen35ConsoleNF-Bold.ttf 
-  inflating: HackGen_NF_v2.7.0/HackGen35ConsoleNF-Bold.ttf   +-rw-r--r-- 1 tomoyan tomoyan  6531888  4月 12 10:54 HackGen35ConsoleNF-Bold.woff 
-  inflating: HackGen_NF_v2.7.0/HackGen35ConsoleNF-Regular.ttf   +-rw-r--r-- 1 tomoyan tomoyan  4569844  4月 12 10:55 HackGen35ConsoleNF-Bold.woff2 
-  inflating: HackGen_NF_v2.7.0/HackGen35ConsoleNFJ-Bold.ttf   +-rw-r--r-- 1 tomoyan tomoyan 12922844 12月 29 16:04 HackGen35ConsoleNF-Regular.ttf 
-  inflating: HackGen_NF_v2.7.0/HackGen35ConsoleNFJ-Regular.ttf   +-rw-r--r-- 1 tomoyan tomoyan  6398440  4月 12 10:55 HackGen35ConsoleNF-Regular.woff 
-  inflating: HackGen_NF_v2.7.0/HackGenConsoleNF-Bold.ttf   +-rw-r--r-- 1 tomoyan tomoyan  4393332  4月 12 10:56 HackGen35ConsoleNF-Regular.woff2 
-  inflating: HackGen_NF_v2.7.0/HackGenConsoleNF-Regular.ttf   +-rw-r--r-- 1 tomoyan tomoyan 13464288 12月 29 16:04 HackGenConsoleNF-Bold.ttf 
-  inflating: HackGen_NF_v2.7.0/HackGenConsoleNFJ-Bold.ttf   +-rw-r--r-- 1 tomoyan tomoyan  6534948  4月 12 10:56 HackGenConsoleNF-Bold.woff 
-  inflating: HackGen_NF_v2.7.0/HackGenConsoleNFJ-Regular.ttf +-rw-r--r-- 1 tomoyan tomoyan  4571328  4月 12 10:57 HackGenConsoleNF-Bold.woff2 
-</code></WRAP>+-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">&apos;sfnt2woff </font><font color="#2A7BDE"><b>{}</b></font><font color="#A2734C"> &amp;&amp; woff2_compress </font><font color="#2A7BDE"><b>{}</b></font><font color="#A2734C">&apos;</font> 
 +</pre></html></WRAP> 
 +<WRAP color_result><html><pre> 
 +Processing HackGen-Bold.ttf =&gt; HackGen-Bold.woff2 
 +Compressed 9098739 to 3604203. 
 +Processing HackGen-Regular.ttf =&gt; HackGen-Regular.woff2 
 +Compressed 8646368 to 3431454. 
 +Processing HackGen35-Bold.ttf =&gt; HackGen35-Bold.woff2 
 +Compressed 9098354 to 3603655. 
 +Processing HackGen35-Regular.ttf =&gt; HackGen35-Regular.woff2 
 +Compressed 8645686 to 3430103. 
 +Processing HackGen35Console-Bold.ttf =&gt; HackGen35Console-Bold.woff2 
 +Compressed 9118148 to 3611814. 
 +Processing HackGen35Console-Regular.ttf =&gt; HackGen35Console-Regular.woff2 
 +Compressed 8670425 to 3441278. 
 +Processing HackGenConsole-Bold.ttf =&gt; HackGenConsole-Bold.woff2 
 +Compressed 9118925 to 3614983. 
 +Processing HackGenConsole-Regular.ttf =&gt; 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> </WRAP>
  
行 113: 行 167:
  
 ===== 参考文献 ===== ===== 参考文献 =====
 +[[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://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://01earth.jp/web-create/coding/web-font/|自社サーバーにフォントをアップロードして、Webフォントを使用する方法｜株式会社ゼロワンアース]]\\
 [[https://en.wikipedia.org/wiki/Web_Open_Font_Format|Web Open Font Format - Wikipedia]]\\ [[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://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.1662666845.txt.gz
  • 最終更新: 2022/09/09 04:54
  • by ともやん