Webフォントとは何ですか?また、1つに変換するには何が関係しますか?


15

私はこれについていくつかの記事を読みましたが、Webフォントとデスクトップフォントの実際の技術的な違いからはまだ逃れられません。このトピックを読むほど、ウェブフォントとは何かを明確に技術的に定義している人は誰もいないと感じます。

FontSquirrelなどのWebフォント生成サービスに「デスクトップ」フォントをアップロードすると、それらのサービスはフォントファイルをWebフォントにするために正確に何をしますか?これらのサービスの主な用途がさまざまな形式への変換である場合、2019年時点で合理的な数のブラウザーをサポートするために、現代のWebでは実際にどの形式が必要ですか?

回答:


17

「Webフォント」とは、Webまたはブラウザで使用されるフォントのことです。これらのWebフォントジェネレーターが行うことは、訪問者にフォントを提供するために必要なcssを提供し、フォントがクロスブラウザーで動作することを確認するために必要なすべてのファイル形式に変換することにより、あなたの生活を楽にすることです。

一部のフォントは、「Arial」などのように、すべてのコンピューターに共通しているため、単に「Webセーフ」と見なされます。あなたは何もする必要はありませんが、そのフォントを使用するようウェブサイトに伝えてください。フォントがコンピューターにない場合は表示されないため、Webフォントは訪問者のブラウザーでダウンロードする必要があります。

WoffのようなWeb用に特別に開発されたフォント形式は、小さなファイルサイズを考慮して設計されています。Googleフォントもこの方法でさまざまな形式を提供しますが、少し隠されています。

一部のフォントには個別のWebフォントライセンスがあり、そのフォントファイルを所有していても所有していない場合があることに注意することが非常に重要です。Google画像と同じように...画像をダウンロードできたからといって、それを使用して会社のアフターシェーブを販売できるわけではありません。

Developers.google.comには、Webフォントの最適化に焦点を当てた優れた投稿がありますが、基本についても説明しています。

その記事には、さまざまな形式に関するかなり良い抜粋があります。

今日、Webで使用されているフォントコンテナ形式は、EOT、TTF、WOFF、およびWOFF2の4つです。残念ながら、幅広い選択肢にもかかわらず、すべての古いブラウザーと新しいブラウザーで機能する単一のユニバーサル形式はありません。EOTはIEのみ、TTFはIEの部分的なサポート、WOFFは幅広いサポートを享受していますが、一部の古いブラウザーでは使用できません、およびWOFF 2.0のサポートは多くのブラウザーで進行中の作業です。

だから、それは私たちをどこに残すのですか?すべてのブラウザで機能する単一の形式はありません。つまり、一貫したエクスペリエンスを提供するには、複数の形式を配信する必要があります

Transfonterには、ブラウザーのサポートに関する非常に優れた表もあります。

ここに画像の説明を入力してください ここに画像の説明を入力してください


6
これらのサポート表は古くなっています。代わりにcaniuse.comを使用してください:caniuse.com/#search=woff2
curiousdannii

本当です。すべてのフォーマットが1つにまとめられていて、さまざまなブラウザサポートに関するストーリーを説明しているため、これらを使用したのは、これらのフォントジェネレーターが重要な理由です。私はそれが少し話題外だと思ったのでそれを省くことを検討しましたが、明らかに私はこれがどのくらいOPに気にかけているのか気づきませんでした
ジョナス

@JoonasすべてのプロのWeb開発者はこれに気を配るべきだと思います。ここで複雑な理論について話しているわけではありません。ブラウザの使用と優れたUXは、Webサイトに非常に現実的な意味を持っています。たとえば、インドのユーザーに大量のトラフィックを取得するeコマースサイトを運営している場合、それらのユーザーが他のユーザーと同じレベルのUXを取得していることを確認しませんか?
ハシム

@Hashim、私はちょっとコメントを下手に言いました。元の投稿は「Webフォントとは何か」であり、特にWebフォントジェネレーターに興味がある場合は、2019年にどのフォーマットが必要かについて最後に尋ねた質問が後から思い浮かびました。これらのジェネレーターの1つであるこの情報は、結局はクロスブラウザーソリューションであるため、少し不要になります。しかし、その後、あなたは各フォーマットを分解するその投稿をしました。それは、私が意識的に無視した答えのセクションが、あなたにとって予想以上に大きなことのように思えたことに気づきました。
ジョナス

1
@Hashim、再び、私からの貧弱な単語の選択。私の考えは、「ここにWebフォントとは何かを知らない人がいます。彼はWebフォントジェネレータについて話しているのです。OK、彼が使用する場合、その最後の部分を知る必要はないジェネレーター...しかし、これらのジェネレーターがなぜ重要なのかを描くために、ブラウザーの統計を追加してみましょう」。どちらかといえば、私はあなたに次の一歩を踏み出し、それを自分で調べてくれたことを称賛します。
ジョナス

3

この質問をした後、さらに詳細な調査を行ったので、この答えをJoonasの一種の補遺として追加しています。これは良かったですが、最後の質問には十分に答えられませんでした

これらのサービスの主な用途がさまざまな形式への変換である場合、2019年時点で合理的な数のブラウザーをサポートするために、現代のWebでは実際にどの形式が必要ですか?

多くの開発者は、現代のWeb開発に必要なフォント形式はWOFFとWOFF2だけであると主張しています。ただし、これらの回答は十分な情報源ではありません。また、やや熱心すぎると思うので、これを文書化するための業界標準であるCanIUse.comの好意により、WOFFおよびWOFF2の実際のサポート図を見てみましょう。ある種のもの。

WOFF2のサポート

WOFF2は、あらゆる点でWOFFを改善し、2014年以降にリリースされたほとんどのデスクトップブラウザーでサポートされていますが、ほとんどのモバイルブラウザーでサポートされ始めたのは2018年からです。世界中の推定 93%のブラウザーでサポートされています。

WOFFのサポート

WOFFは、それはによってサポートされています2011年以降にリリースされたIEのバージョンの廃止されたEOT形式レンダリング(2011年発売)IE9でのInternet Explorerでサポートされるようになったと推定世界的なブラウザの97%。

Firefox 3.6以降のFirefox、Chrome 5以降のChrome、5.1以降のSafari(それぞれ2010年、2011年、2011年にリリース)など、他のデスクトップブラウザーがほぼ同時にWOFFをサポートし始め、以前のバージョンではTTFおよびOTF 1形式が廃止されました。2013年以降、ほとんどのモバイルブラウザはWOFFをサポートしています。

警告と結論

この観点から、他のすべての形式を不要であるとみなすのは簡単ですが、公式にサポートされなくなったソフトウェアは、使用されなくなったことを示す良い指標ではありませんでした。別の言い方をすれば、グローバルなブラウザーバージョンの共有は、Webサイトが使用される人口統計を代表するものではありません。

ブラウザーバージョンの共有は、人口統計によって大きく異なります。国、社会階級、収入などの要因はすべて、ユーザーが使用しているデバイス(つまりブラウザーのバージョン)に大きく影響します。開発者として、構築しているサイトが、それらの古いバージョンを使用する可能性が高い人口統計によって使用されるかどうかを考えてください。

その場合、2011年より古いデスクトップブラウザー、または2013年より古いモバイルブラウザーをサポートする必要がある場合は、WOFF2、WOFF、TTF(またはOTF)、およびEOTのフルフォントスタックを使用してください。

これらの古代のブラウザをサポートする必要がなく、サポートしない可能性高い場合は、WOFF2とWOFFをフォントスタックとして使用してください。


(1) TTFとOTFは従来のデスクトップフォント形式であり、一方をサポートするブラウザーは他方をサポートするため、両方を使用しないでください


関連:コマンドラインを使用して(したがって、一度に1つではなくバルクで)TTF / OTFフォントファイルをWOFFおよびWOFF2形式に変換する方法
ハシム

1

あまりない。

WOFFはTTFの圧縮形式に他ならないため、サイズが小さくなります。内部は変わりません。WOFF2はさらに進んでおり、フォント表現をわずかに変更して、圧縮を少し増やします。EOTはMS専用の形式であるため、まったくカウントされません。SVGは実質的には輪郭のみであり、ほとんどないため、実際のフォントとしてはカウントされず、アイコンとしてのみ使用されます。

WOFFを使用するだけで完了です。最後のバイトを絞り出す場合は、WOFF2も提供できますが、違いは無視できます。


0

ただし、技術的な実装の詳細は別として、「webfont」は、その作成者またはWebサイトで使用する特定のタスクの権利所有者によってライセンスされたフォントです。そしてそれらはウェブフォント形式で提供されます。フォントをウェブフォント形式に変換するためにジェネレータの前に座っていて、それがオープンソースでも自分で描いたものでもない場合は、すぐに停止してください!あなたはほぼ間違いなくライセンスを破り、訴えられる可能性があります。また、Web上にあるので、人々はあなたがしていることを見つけて、彼らの売り上げのリストをチェックするのは簡単です。

たとえば、このdoofusは、FacebookとGoogleで仕事をしており、誰かが彼のWebサイトで技術的に海賊版フォントを使用していると彼に告げるまで気づかなかった。彼はデスクトップサブスクリプションライセンスを持っていましたが、それはWeb使用のライセンスではありません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.