From f24aa54104f54f2a4b4b6ac46d5656013b8c36c8 Mon Sep 17 00:00:00 2001 From: kotaro_sakae Date: Sat, 25 Apr 2020 15:58:14 +0900 Subject: [PATCH 1/6] Translation of fonts chapter to Japanese --- src/content/ja/2019/fonts.md | 651 +++++++++++++++++++++++++++++++++++ 1 file changed, 651 insertions(+) create mode 100644 src/content/ja/2019/fonts.md diff --git a/src/content/ja/2019/fonts.md b/src/content/ja/2019/fonts.md new file mode 100644 index 00000000000..fd9bf2ac28e --- /dev/null +++ b/src/content/ja/2019/fonts.md @@ -0,0 +1,651 @@ +--- +part_number: I +chapter_number: 6 +title: フォント +description: フォントがどこから読み込まれるか、フォントのフォーマット、フォントの読み込み性能、可変フォント、カラーフォントを網羅した2019年Web年鑑のFontsの章。 +authors: [zachleat] +reviewers: [hyperpress, AymenLoukil] +translators: [ksakae] +discuss: 1761 +results: https://docs.google.com/spreadsheets/d/108g6LXdC3YVsxmX1CCwrmpZ3-DmbB8G_wwgQHX5pn6Q/ +queries: 06_Fonts +published: 2019-11-11T00:00:00.000Z +last_updated: 2019-11-23T00:00:00.000Z +--- + +## 序章 + +ウェブフォントは、ウェブ上で美しく機能的なタイポグラフィを可能にします。ウェブフォントを使用することは、デザインに力を与えるだけでなく、デザインのサブセットを民主化します。しかし、どんなに良いことがあってもウェブフォントが適切に読み込まれていないと、サイトのパフォーマンスに大きな悪影響を及ぼすこともあります。 + +それらはウェブにとってプラスになるのか？　それらは害よりも多くの利益を提供しているか?　Web標準の牛道は、デフォルトでWebフォントの読み込みのベストプラクティスを奨励するために十分に舗装されているだろうか？　そうでない場合、何を変える必要があるのでしょうか？　今日のウェブ上でウェブフォントがどのように使用されているかを調べることで、これらの疑問に答えられるかどうかをデータ駆動型で覗いてみましょう。 + +## そのウェブフォントはどこで手に入れたの？ + +最初の、そして最も顕著な問題は、パフォーマンスです。[パフォーマンス](./performance)に特化した章がありますが、ここではフォント固有のパフォーマンスの問題について少し掘り下げてみましょう。 + +ホストされたWebフォントを使用すると、実装やメンテナンスが容易になりますが、セルフホスティングは最高のパフォーマンスを提供します。Webフォントはデフォルトで、Webフォントの読み込み中にテキストを非表示にする（[Flash of Invisible Text](https://css-tricks.com/fout-foit-foft/)、またはFOITとしても知られています）ことを考えると、Webフォントのパフォーマンスは画像のような非ブロッキング資産よりも重要になる可能性があります。 + +### フォントは同じホストでホストされているのか、それとも別のホストでホストされているのか？ + +サードパーティのホスティングに対するセルフホスティングの差別化は、[HTTP/2](./http2)の世界ではますます重要になってきています。同一ホストのリクエストには、ウォーターフォール内の他の同一ホストのリクエストに対して優先順位をつける可能性が高いという大きな利点があります。 + +別のホストからウェブフォントを読み込む際のパフォーマンスコストを軽減するための推奨事項としては、`preconnect`、`dns-prefetch`、`preload` [resource-hints](./resource-hints)の使用がありますが、優先度の高いウェブフォントは、ウェブフォントのパフォーマンスへの影響を最小限に抑えるため、同一ホストからのリクエストにすべきです。これは視覚的に、非常に目立つコンテンツやページの大部分を占める本文コピーで使用されるフォントへ対して特に重要です。 + +
+ + 図1. 人気のあるウェブフォントのホスティング戦略。 + + +
図1. 人気のあるウェブフォントのホスティング戦略。font hosting strategies.
+
+ +4分の3がホストされているという事実は、おそらく我々が議論するGoogle Fontsの優位性を考えると意外と知られていません[以下](#what-are-the-most-popular-third-party-hosts)。 + +Googleは`https://fonts.googleapis.com`でホストされているサードパーティのCSSファイルを使ってフォントを提供しています。開発者は、マークアップの``タグを使ってこれらのスタイルシートにリクエストを追加します。これらのスタイルシートはレンダーブロッキングされていますが、そのサイズは非常に小さいです。しかし、フォントファイルは`https://fonts.gstatic.com`という別のドメインでホストされています。2つの異なるドメインへの2つの別々のホップを必要とするモデルでは、CSSがダウンロードされるまで発見されない2つ目のリクエストには`preconnect`が最適な選択肢となります。 + +`preload`はリクエストのウォーターフォールの上位にフォントファイルをロードするための素晴らしい追加機能ですが（`preconnect`は接続を設定するもので、ファイルの内容をリクエストするものではないことを覚えておいてください）、`preload`はGoogle Fontsではまだ利用できません。Google Fontsはフォントファイル用のユニークなURLを生成します[これは変更される可能性があります](https://github.com/google/fonts/issues/1067)。 + +### 最も人気のあるサードパーティ製のホストは何ですか？ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ホストデスクトップモバイル
fonts.gstatic.com75.4%74.9%
use.typekit.net7.2%6.6%
maxcdn.bootstrapcdn.com1.8%2.0%
use.fontawesome.com1.1%1.2%
static.parastorage.com0.8%1.2%
fonts.shopifycdn.com0.6%0.6%
cdn.shopify.com0.5%0.5%
cdnjs.cloudflare.com0.4%0.5%
use.typekit.com0.4%0.4%
netdna.bootstrapcdn.com0.3%0.4%
fast.fonts.net0.3%0.3%
static.dealer.com0.2%0.2%
themes.googleusercontent.com0.2%0.2%
static-v.tawk.to0.1%0.3%
stc.utdstc.com0.1%0.2%
cdn.jsdelivr.net0.2%0.2%
kit-free.fontawesome.com0.2%0.2%
open.scdn.co0.1%0.1%
assets.squarespace.com0.1%0.1%
fonts.jimstatic.com0.1%0.2%
+
図2. リクエストの割合による上位20のフォントホスト。
+
+ +ここでのGoogle Fontsの優位性は、同時に驚くべきことであると同時に意外性のないものであった。期待していたという点では予想外でしたが、サービスの圧倒的な人気の高さには驚きました。フォントリクエストの75％というのは驚異的だ。TypeKitは一桁台の遠い2位で、Bootstrapライブラリがさらに遠い3位を占めていました。 + +
+
29%
+
図3. ドキュメント内にGoogle Fontsスタイルシートのリンクを含むページの割合 <head>。
+
+ +ここでのGoogle Fontsの使用率の高さは非常に印象的だが、Google Fonts``要素を含むページが29％しかなかったことも注目に値する。これはいくつかのことを意味しているかもしれない。 + +- ページがGoogle Fontsを使用する場合、彼らはGoogle Fontsを多く使用しています。それらは結局のところ、金銭的なコストなしで提供されています。おそらく、人気のあるWYSIWYGエディタで使われているのではないでしょうか？　これは非常に可能性の高い説明のように思えます。 +- あるいは、もっとありそうにない話としては、多くの人が``の代わりに`@import`を使ってGoogle Fontsを使っているということかもしれません。 +- あるいは、超ありえないシナリオにまで踏み込んでみたいのであれば、多くの人が代わりに[HTTP `Link:`ヘッダー](https://developer.mozilla.org/ja/docs/Web/HTTP)を使ってGoogle Fontsを使っているということになるかもしれません。 + +
+
0.4%
+
図4. ドキュメントの最初の子としてGoogle Fontsスタイルシートのリンクを含むページの割合 <head>。
+
+ +Google Fontsのドキュメントでは、Google Fonts CSSの``はページの``の最初の子として配置することを推奨しています。これは大きなお願いです！　実際、これは一般的でありません。全ページの半分のパーセント（約20,000ページ）しかこのアドバイスを受けていないので、これは一般的でありません。 + +さらに言えば、ページが`preconnect`や`dns-prefetch`を``要素として使用している場合、これらはいずれにしてもGoogle Fonts CSSの前へ来ることになります。これらのリソースのヒントについては、続きを読んでください。 + +### サードパーティホスティングの高速化 + +上述したように、サードパーティホストへのウェブフォント要求を高速化する超簡単な方法は、`preconnect`[リソースヒント](./resource-hints)を使用することです。 + +
+
1.7%
+
図5. モバイルページがウェブフォントホストにプリコネクティングしている割合。
+
+ +うわー！　2％未満のページが[`preconnect`](https://web.dev/uses-rel-preconnect)を使用している！　Google Fontsが75％であることを考えると、これはもっと高いはずです！　開発者の皆さん: Google Fontsを使うなら、`preconnect`を使いましょう！　Google Fonts:`preconnect`をもっと宣伝しよう！ + +実際、もしあなたがGoogle Fontsを使っているのであれば、``にこれを追加してください。 + +`````` + +### 最も人気のある書体 + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ランクフォントファミリーデスクトップモバイル
1Open Sans24%22%
2Roboto15%19%
3Montserrat5%4%
4Source Sans Pro4%3%
5Noto Sans JP3%3%
6Lato3%3%
7Nanum Gothic4%2%
8Noto Sans KR3%2%
9Roboto Condensed2%2%
10Raleway2%2%
11FontAwesome1%1%
12Roboto Slab1%1%
13Noto Sans TC1%1%
14Poppins1%1%
15Ubuntu1%1%
16Oswald1%1%
17Merriweather1%1%
18PT Sans1%1%
19Playfair Display1%1%
20Noto Sans1%1%
+
図6. 全フォント宣言に占める上位20のフォントファミリーの割合。
+
+ +ここでの上位のエントリが[Google Fontsの人気順フォント一覧](https://fonts.google.com/?sort=popularity)と非常によく似ていることは驚くに値しません。 + +## どのようなフォント形式を使用していますか？ + +今日のブラウザでは[WOFF2はかなりサポートされています](https://caniuse.com/#feat=woff2)。Google FontsはWOFF2というフォーマットを提供していますが、これは前身のWOFFよりも圧縮率が向上したフォーマットで、それ自体はすでに他の既存のフォントフォーマットよりも改善されていました。 + +
+ + 図7. ウェブフォントのMIMEタイプの普及率 + + +
図7. ウェブフォントのMIMEタイプの普及率
+
+ +私から見れば、ここでの結果を見て、WebフォントはWOFF2オンリーにした方がいいという意見もあるかもしれません。二桁台のWOFF使用率はどこから来ているのでしょうか？　もしかして、まだWebフォントをInternet Explorerに提供している開発者がいるのでしょうか？ + +第3位の`octet-stream`(およびもう少し下の`plain`)は、多くのウェブサーバが不適切に設定されており、ウェブフォントファイルのリクエストで誤ったMIMEタイプを送信していることを示唆しているように見えます。 + +もう少し深く掘り下げて、`@font-face`宣言の`src:`プロパティで使われている`format()`の値を見てみましょう。 + +
+ + 図8. <code>@font-face</code>宣言におけるフォントフォーマットの人気度。 + + +
図8. @font-face宣言におけるフォントフォーマットの人気度。
+
+ +[SVGフォント](https://caniuse.com/#feat=svg-fonts)が衰退しているのを見て期待していたのですが。バグだらけだし、Safari以外のブラウザでは実装が削除されている。そろそろ捨ててしまおうか。 + +ここのSVGデータポイントを見ると、どのMIMEタイプでSVGフォントを提供しているのか気になります。図7のどこにも`image/svg+xml`は見当たりません。とにかく、それを修正することは気にしないで、ただそれらを取り除くだけです！ + +### WOFF2専用 + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ランクフォーマットの組み合わせデスクトップモバイル
1woff284.0%81.9%
2svg, truetype, woff4.3%4.0%
3svg, truetype, woff, woff23.5%3.2%
4eot, svg, truetype, woff1.3%2.9%
5woff, woff21.8%1.8%
6eot, svg, truetype, woff, woff21.2%2.1%
7truetype, woff0.9%1.1%
8woff0.7%0.8%
9truetype0.6%0.7%
10truetype, woff, woff20.6%0.6%
11opentype, woff, woff20.3%0.2%
12svg0.2%0.2%
13eot, truetype, woff0.1%0.2%
14opentype, woff0.1%0.1%
15opentype0.1%0.1%
16eot0.1%0.1%
17opentype, svg, truetype, woff0.1%0.0%
18opentype, truetype, woff, woff20.0%0.0%
19eot, truetype, woff, woff20.0%0.0%
20svg, woff0.0%0.0%
+
図9. フォントフォーマットの組み合わせトップ20
+
+ +このデータセットは、大多数の人がすでに`@font-face`ブロックでWOFF2のみを使っていることを示唆しているように見える。しかし、このデータセットにおけるGoogle Fontsの優位性についての以前の議論によれば、もちろんこれは誤解を招くものです。Google Fontsは合理化されたCSSファイルを提供するためにいくつかのスニッフィングメソッドを実行しており、最新の`format()`のみを含んでいる。当然のことながら、WOFF2がここでの結果を支配しているのはこの理由によるもので、WOFF2に対するブラウザのサポートは以前からかなり広くなっている。 + +重要なのは、この特定のデータはまだWOFF2オンリーのケースを支持しているわけではないということですが、魅力的なアイデアであることに変わりはありません。 + +## 見えない文字との戦い + +デフォルトのWebフォントの読み込み動作である「読み込み中は見えない」(FOITとしても知られています)に対抗するため持っている第一のツールは`font-display`です。`font-display: swap`を`@font-face`ブロックに追加すると、ウェブフォントが読み込まれている間にフォールバックテキストを表示するようにブラウザに指示する簡単な方法です。 + +[ブラウザ対応](https://caniuse.com/#feat=mdn-css_at-rules_font-face_font-display)もいいですね。Internet ExplorerやChromium以前のEdgeではサポートされていませんが、Webフォントが読み込まれたときにデフォルトでフォールバックテキストをレンダリングしてくれます（ここではFOITは使えません）。Chromeのテストでは、`font-display`はどのくらいの頻度で使われているのでしょうか？ + +
+
26%
+
図10. font-displayスタイルを利用しているモバイルページの割合。
+
+ +私はこれが時間の経過とともに忍び寄ってくることを想定しています、特に今は[Google Fontsがすべての新しいコードスニペットに `font-display` を追加しています](https://www.zachleat.com/web/google-fonts-display/)が彼らのサイトからコピーされています。 + +Google Fontsを使っているなら、スニペットを更新しよう！　Google Fontsを使っていない場合は、`font-display`を使いましょう！　`font-display`についての詳細は [MDN](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/font-display) を参照してください。 + +どのような`font-display`値が人気あるのか見てみましょう。 + +
+ + 図11. `font-display'の値の使用法。 + + +
図11. font-displayの値の使用法。
+
+ +ウェブフォントの読み込み中にフォールバックテキストを表示する簡単な方法として、`font-display: swap`が最も一般的な値として君臨しています。`swap`は新しいGoogle Fontsのコードスニペットでもデフォルト値として使われています。いくつかの著名な開発者のエバンジェリストがこれを求めてちょっとした働きかけをしていたので、ここでは`optional`(キャッシュされた場合にのみレンダリングする)がもう少し使われることを期待していたのですが、駄目でした。 + +## ウェブフォントの数が多すぎる？ + +ある程度のニュアンスが必要な質問です。フォントはどのように使われているのか？　ページ上のコンテンツの量は？　そのコンテンツはレイアウトのどこにあるのか？　フォントはどのようにレンダリングされているのか？　しかし、ニュアンスの代わりに、リクエスト数を中心とした大まかで重い分析に飛び込んでみましょう。 + +
+ + 図12. ページあたりのフォント要求の分布。 + + +
図12. ページあたりのフォント要求の分布。
+
+ +中央値のウェブページでは、3つのウェブフォントをリクエストしています。90パーセンタイルでは、モバイルとデスクトップでそれぞれ6つと9つのウェブフォントをリクエストしています。 + +
+ + 図13. ページあたりに要求されたウェブフォントのヒストグラム。 + + +
図13. ページあたりに要求されたウェブフォントのヒストグラム。
+
+ +Webフォントのリクエストがデスクトップとモバイルの間でかなり安定しているように見えるというのは非常に興味深いことです。私は、[`@media`クエリの中の`@font-face`ブロックを隠すことを推奨すること](https://css-tricks.com/snippets/css/using-font-face/#article-header-id-6)が流行らなかったのを見てうれしく思います (何も考えないでください)。 + +しかし、モバイルデバイスでのフォントのリクエストはわずかに多い。ここでの私の勘は、モバイルデバイスで利用できる書体が少ないということはGoogle Fonts CSSでの`local()`のヒット数が少ないということであり、ネットワークからのフォントリクエストに戻ってしまうのではないかと考えています。 + +### この賞を受賞したくない + +
+
718
+
図14. 1ページで最も多くのWebフォントのリクエストがあった。
+
+ +最も多くのウェブフォントをリクエストしたページの賞は、**718**のウェブフォントをリクエストしたサイトに贈られます！ + +コードに飛び込んだ後、それらの718のリクエストのすべてがGoogle Fontsに向かっています！　どうやらWordPress用の「ページの折り返しの上に」最適化プラグインが誤作動して、このサイトで不正を行い、すべてのGoogle Fonts-oopsにリクエストしている（DDoS-ing？）。 + +パフォーマンス最適化プラグインは、あなたのパフォーマンスをはるかに悪化させることができることを皮肉っています！ + +## `Unicode-range`を使うとより正確なマッチングが可能になります。 + +
+
56%
+
図15. unicode-rangeプロパティでWebフォントを宣言しているモバイルページの割合。
+
+ +[`unicode-range`](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/unicode-range)は、ブラウザに、ページがフォントファイルで使用したいコードポイントを具体的に知らせるための優れたCSSプロパティです。`@font-face`宣言に`unicode-range`がある場合、ページ上のコンテンツは、フォントが要求される前に、その範囲内のコードポイントのいずれかにマッチしなければなりません。これは非常に良いことです。 + +Google FontsはそのCSSのほとんど（すべてではないにしても）で`unicode-range`を使用しているので、これもGoogle Fontsの使用状況によって偏っていると予想される指標です。ユーザーの世界でこれはあまり一般的でないと思いますが、Web年鑑の次の版ではGoogle Fontsのリクエストをフィルタリングして除外することが可能かもしれません。 + +## システムフォントが存在する場合、ウェブフォントを要求しないようにする + +
+
59%
+
図16. local()プロパティでWebフォントを宣言しているモバイルページの割合。
+
+ +`local()`は`@font-face`、`src`のシステムフォントを参照するための良い方法です。もし `local()`フォントが存在するならば、ウェブフォントを要求する必要は全くありません。これはGoogle Fontsによって広く使われており、論争の的にもなっているのでユーザの土地からパターンを得ようとしているのであれば、これも歪んだデータの一例になるでしょう。 + +ここでは、私よりも賢い人々(TypeKitのBram Stein氏) が、[インストールされているフォントのバージョンが古くて信頼性は低い場合があるため、`local()`を使うことは予測不可能である可能性がある](https://bramstein.com/writing/web-font-anti-patterns-local-fonts.html)と述べていることにも注目しておきましょう。 + +## 縮約されたフォントと`font-stretch` + +
+
7%
+
図17. font-stretch プロパティを持つスタイルを含むデスクトップページとモバイルページの割合。
+
+ +歴史的に、`font-stretch`はブラウザのサポートが悪く、よく知られた`@font-face`プロパティではありませんでした。詳しくは[MDNの`font-stretch`について](https://developer.mozilla.org/ja/docs/Web/CSS/font-stretch) を参照してください。しかし、[ブラウザのサポート](https://caniuse.com/#feat=css-font-stretch)は広がっています。 + +小さいビューポートで凝縮されたフォントを使用することで、より多くのテキストを表示できるようになることが示唆されていますが、このアプローチは一般的には使用されていません。とはいえ、このプロパティがモバイルよりもデスクトップで半パーセントポイント多く使われているというのは予想外で、7％というのは私が予想していたよりもはるかに高いと思えます。 + +## 可変フォントは未来のもの + +[可変フォント](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)では、1つのフォントファイルに複数のフォントの太さやスタイルを含めることができます。 + +
+
1.8%
+
図18. 可変フォントを含むページの割合
+
+ +1.8％でさえ、これは予想よりも高かったが、これがうまくいくのを見て興奮している。[Google Fonts v2](https://developers.google.com/fonts/docs/css2)には可変フォントのサポートがいくつか含まれています。 + +
+ + 図19. 'font-variation-settings'軸の使用法。 + + +
図19. font-variation-settings軸の使用法。
+
+ +この大規模なデータセットのレンズを通して見ると、これらの結果は非常に低いサンプルサイズであることがわかります。しかし、デスクトップページで最も一般的な軸として`opsz`が注目され、`wght`と`wdth`が後に続く。私の経験では、可変フォントの入門デモはたいていウェイトベースです。 + +## カラーフォントも未来かも？ + +
+
117
+
図20. カラーフォントを含むデスクトップウェブページの数。
+
+ +これらのここでの使用法は基本的に存在しませんが、詳細については[カラーフォント！　WTF?](https://www.colorfonts.wtf/)という優れたリソースをチェックできます。フォント用のSVGフォーマット(これは良くないし消えていく)に似ていますが(全くそうではありません)、これを使うとOpenTypeファイルの中にSVGを埋め込むことができ、これは素晴らしくクールです。 + +## 結論 + +ここでの最大の収穫は、Google Fontsがウェブフォントの議論を支配しているということだ。彼らが取ったアプローチは、ここで記録したデータに大きく影響している。ここでのポジティブな点はウェブフォントへのアクセスが容易であること、優れたフォントフォーマット（WOFF2）であること、そして自由な`unicode範囲`の設定が可能であることだ。ここでの欠点はサードパーティのホスティング、異なるホストからのリクエスト、および`preload`にアクセスできないことでパフォーマンスが低下することです。 + +私は、将来的には「バリアブルフォントの台頭」を見ることになるだろうと完全に予想しています。バリアブルフォントは複数の個々のフォントファイルを1つの合成フォントファイルに結合するので、これはウェブフォントのリクエストの減少と対になっているはずです。しかし歴史が示しているように、ここで通常起こることは、あるものを最適化してその空所を埋めるためにさらに多くのものを追加してしまうことです。 + +カラーフォントの人気が高まるかどうかは非常に興味深いところです。私は、これらは可変フォントよりもはるかにニッチなものになると予想していますが、アイコンフォントのスペースに生命線を見ることができるかもしれません。 + +フォントを凍らせるなよ。 From b1d032a361af0b12a43dafb40ff899d6e21cf885 Mon Sep 17 00:00:00 2001 From: kotaro_sakae Date: Sat, 25 Apr 2020 16:20:11 +0900 Subject: [PATCH 2/6] fix web almanac --- src/content/ja/2019/fonts.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/ja/2019/fonts.md b/src/content/ja/2019/fonts.md index fd9bf2ac28e..c06b6833e38 100644 --- a/src/content/ja/2019/fonts.md +++ b/src/content/ja/2019/fonts.md @@ -2,7 +2,7 @@ part_number: I chapter_number: 6 title: フォント -description: フォントがどこから読み込まれるか、フォントのフォーマット、フォントの読み込み性能、可変フォント、カラーフォントを網羅した2019年Web年鑑のFontsの章。 +description: フォントがどこから読み込まれるか、フォントのフォーマット、フォントの読み込み性能、可変フォント、カラーフォントを網羅した2019年Web AlmanacのFontsの章。 authors: [zachleat] reviewers: [hyperpress, AymenLoukil] translators: [ksakae] @@ -586,7 +586,7 @@ Webフォントのリクエストがデスクトップとモバイルの間で [`unicode-range`](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/unicode-range)は、ブラウザに、ページがフォントファイルで使用したいコードポイントを具体的に知らせるための優れたCSSプロパティです。`@font-face`宣言に`unicode-range`がある場合、ページ上のコンテンツは、フォントが要求される前に、その範囲内のコードポイントのいずれかにマッチしなければなりません。これは非常に良いことです。 -Google FontsはそのCSSのほとんど（すべてではないにしても）で`unicode-range`を使用しているので、これもGoogle Fontsの使用状況によって偏っていると予想される指標です。ユーザーの世界でこれはあまり一般的でないと思いますが、Web年鑑の次の版ではGoogle Fontsのリクエストをフィルタリングして除外することが可能かもしれません。 +Google FontsはそのCSSのほとんど（すべてではないにしても）で`unicode-range`を使用しているので、これもGoogle Fontsの使用状況によって偏っていると予想される指標です。ユーザーの世界でこれはあまり一般的でないと思いますが、Web Almanacの次の版ではGoogle Fontsのリクエストをフィルタリングして除外することが可能かもしれません。 ## システムフォントが存在する場合、ウェブフォントを要求しないようにする From 5b51fb9b51b8d7ee16cf04f97af4c498e26c48a2 Mon Sep 17 00:00:00 2001 From: Barry Date: Sat, 25 Apr 2020 09:46:47 +0100 Subject: [PATCH 3/6] Adding changes for @ksakae1216 due to permission issues --- src/content/ja/2019/fonts.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/ja/2019/fonts.md b/src/content/ja/2019/fonts.md index c06b6833e38..1b4050e68b4 100644 --- a/src/content/ja/2019/fonts.md +++ b/src/content/ja/2019/fonts.md @@ -29,7 +29,7 @@ last_updated: 2019-11-23T00:00:00.000Z サードパーティのホスティングに対するセルフホスティングの差別化は、[HTTP/2](./http2)の世界ではますます重要になってきています。同一ホストのリクエストには、ウォーターフォール内の他の同一ホストのリクエストに対して優先順位をつける可能性が高いという大きな利点があります。 -別のホストからウェブフォントを読み込む際のパフォーマンスコストを軽減するための推奨事項としては、`preconnect`、`dns-prefetch`、`preload` [resource-hints](./resource-hints)の使用がありますが、優先度の高いウェブフォントは、ウェブフォントのパフォーマンスへの影響を最小限に抑えるため、同一ホストからのリクエストにすべきです。これは視覚的に、非常に目立つコンテンツやページの大部分を占める本文コピーで使用されるフォントへ対して特に重要です。 +別のホストからウェブフォントを読み込む際のパフォーマンスコストを軽減するための推奨事項としては、`preconnect`、`dns-prefetch`、`preload` [リソースのヒント](./resource-hints)の使用がありますが、優先度の高いウェブフォントは、ウェブフォントのパフォーマンスへの影響を最小限に抑えるため、同一ホストからのリクエストにすべきです。これは視覚的に、非常に目立つコンテンツやページの大部分を占める本文コピーで使用されるフォントへ対して特に重要です。
@@ -177,7 +177,7 @@ Googleは`https://fonts.googleapis.com`でホストされているサードパ
0.4%
-
図4. ドキュメントの最初の子としてGoogle Fontsスタイルシートのリンクを含むページの割合 <head>。
+
図4. ドキュメントの最初の子としてGoogle Fontsスタイルシートのリンクを含むページの割合 <head>。
Google Fontsのドキュメントでは、Google Fonts CSSの``はページの``の最初の子として配置することを推奨しています。これは大きなお願いです！　実際、これは一般的でありません。全ページの半分のパーセント（約20,000ページ）しかこのアドバイスを受けていないので、これは一般的でありません。 @@ -361,7 +361,7 @@ Google Fontsのドキュメントでは、Google Fonts CSSの``はペー 図8. <code>@font-face</code>宣言におけるフォントフォーマットの人気度。 - +
図8. @font-face宣言におけるフォントフォーマットの人気度。
@@ -532,7 +532,7 @@ Google Fontsを使っているなら、スニペットを更新しよう！　Go 図11. `font-display'の値の使用法。 - +
図11. font-displayの値の使用法。
From e7e7630c45255c061635c6d6cb0e71fdd1b90699 Mon Sep 17 00:00:00 2001 From: Barry Date: Sat, 25 Apr 2020 09:48:38 +0100 Subject: [PATCH 4/6] Featured Chapters from @ksakae1216 --- src/templates/ja/2019/featured_chapters.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/templates/ja/2019/featured_chapters.html b/src/templates/ja/2019/featured_chapters.html index 226d5dd6554..d7a0a24cf20 100644 --- a/src/templates/ja/2019/featured_chapters.html +++ b/src/templates/ja/2019/featured_chapters.html @@ -25,9 +25,9 @@ {%- set featured_chapter_quote = "オープンウェブは広大で、リンク可能で、相互運用可能な設計になっています。他の誰かの複雑なライブラリを取得し、単一の <link> または <script> 要素を使用して自分のサイトで使用する能力は、開発者の生産性を高め、素晴らしい新しいウェブ体験を可能にしました。本章では、2019年のWebにおけるサードパーティコードの普及と影響、サードパーティソリューションの人気につながるWebの利用パターン、Webのパフォーマンスとプライバシーの将来に対する潜在的な影響を検証します。" %} {%- set featured_chapter_stats = {"stat1":"93%","label1":"サードパーティを含むページ","stat2":"49%","label2":"サードパーティのリクエスト","stat3":"28%","label3":"サードパーティのバイト数"} %} {%- elif featured_chapter == "fonts" %} - {%- set featured_chapter_name = "Fonts" %} - {%- set featured_chapter_quote = "Web fonts enable beautiful and functional typography on the web. Using web fonts not only empowers design, but it democratizes a subset of design, as it allows easier access to those who might not have particularly strong design skills. However, for all the good they can do, web fonts can also do great harm to your site's performance if they are not loaded properly." %} - {%- set featured_chapter_stats = {"stat1":"74.9%","label1":"3P Font Requests that use Google Fonts","stat2":"29%","label2":"Percent of pages that include a Google Fonts stylesheet link","stat3":"718","label3":"Most font requests on a single page"} %} + {%- set featured_chapter_name = "フォント" %} + {%- set featured_chapter_quote = "ウェブフォントは、ウェブ上で美しく機能的なタイポグラフィを可能にします。ウェブフォントを使用することは、デザインに力を与えるだけでなく、デザインのサブセットを民主化します。しかし、どんなに良いことがあっても、ウェブフォントが適切に読み込まれていないと、サイトのパフォーマンスに大きな悪影響を及ぼすこともあります。" %} + {%- set featured_chapter_stats = {"stat1":"74.9%","label1":"3P Googleフォントを使用したフォントリクエスト","stat2":"29%","label2":"Google Fontsスタイルシートのリンクを含むページの割合","stat3":"718","label3":"1ページでのフォントのリクエストが多い"} %} {%- elif featured_chapter == "performance" %} {%- set featured_chapter_name = "パフォーマンス" %} {%- set featured_chapter_quote = "パフォーマンスはユーザー体験の内臓的な部分です。多くのウェブサイトでは、ページの読み込み時間を高速化してユーザー体験を向上させることは、コンバージョン率の向上につながります。逆に、パフォーマンスが悪いと、ユーザーは頻繁にコンバージョンしないし、不満でページを激怒してクリックしてしまうことさえ観察されています。" %} From 18efcd73f8ef165bdf3539952c30a7e328cdca4d Mon Sep 17 00:00:00 2001 From: Barry Date: Sat, 25 Apr 2020 09:51:12 +0100 Subject: [PATCH 5/6] Fix markup bug for fonts chapter --- src/content/en/2019/fonts.md | 4 ++-- src/content/ja/2019/fonts.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/en/2019/fonts.md b/src/content/en/2019/fonts.md index c8824f40b41..2a68856dcc1 100644 --- a/src/content/en/2019/fonts.md +++ b/src/content/en/2019/fonts.md @@ -166,7 +166,7 @@ The dominance of Google Fonts here was simultaneously surprising and unsurprisin
29%
-
Figure 3. Percent of pages that include a Google Fonts stylesheet link in the document <head>.
+
Figure 3. Percent of pages that include a Google Fonts stylesheet link in the document <head>.
While the high usage of Google Fonts here is very impressive, it is also noteworthy that only 29% of pages included a Google Fonts `` element. This could mean a few things: @@ -177,7 +177,7 @@ While the high usage of Google Fonts here is very impressive, it is also notewor
0.4%
-
Figure 4. Percent of pages that include a Google Fonts stylesheet link as the first child in the document <head>.
+
Figure 4. Percent of pages that include a Google Fonts stylesheet link as the first child in the document <head>.
Google Fonts documentation encourages the `` for the Google Fonts CSS to be placed as the first child in the `` of a page. This is a big ask! In practice, this is not common as only half a percent of all pages (about 20,000 pages) took this advice. diff --git a/src/content/ja/2019/fonts.md b/src/content/ja/2019/fonts.md index 1b4050e68b4..f028ed0ae5b 100644 --- a/src/content/ja/2019/fonts.md +++ b/src/content/ja/2019/fonts.md @@ -166,7 +166,7 @@ Googleは`https://fonts.googleapis.com`でホストされているサードパ
29%
-
図3. ドキュメント内にGoogle Fontsスタイルシートのリンクを含むページの割合 <head>。
+
図3. ドキュメント内にGoogle Fontsスタイルシートのリンクを含むページの割合 <head>。
ここでのGoogle Fontsの使用率の高さは非常に印象的だが、Google Fonts``要素を含むページが29％しかなかったことも注目に値する。これはいくつかのことを意味しているかもしれない。 From c567247bea17bf125c880c719f30b49191f382b6 Mon Sep 17 00:00:00 2001 From: Barry Date: Sat, 25 Apr 2020 09:52:23 +0100 Subject: [PATCH 6/6] Active fonts featured chapters --- src/templates/ja/2019/featured_chapters.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/ja/2019/featured_chapters.html b/src/templates/ja/2019/featured_chapters.html index d7a0a24cf20..1ed5e46b621 100644 --- a/src/templates/ja/2019/featured_chapters.html +++ b/src/templates/ja/2019/featured_chapters.html @@ -1,4 +1,4 @@ -{%- set featured_chapter = ("css","markup","third-parties","performance","security","accessibility","seo","pwa","mobile-web","ecommerce","cms","compression","caching","cdn","page-weight","http2") | random %} +{%- set featured_chapter = ("css","markup","third-parties","fonts","performance","security","accessibility","seo","pwa","mobile-web","ecommerce","cms","compression","caching","cdn","page-weight","http2") | random %} {# Below is the full set of chapters. If all are translated then replace above line with this one. Other than add chapters to above first line as they are translated (min of two chapters so repeat if only one chapter)