web-dev-qa-db-ja.com

OpenType可変フォント:サポートされているブラウザー

enter image description here

可変フォント はしばらくの間掲示板にあり、 GoogleはChrome 62 これらの新しいフォントをサポートしており、非常に使いやすいように見えます。例:

  • font-variation-settings: 'wght' 700, 'wdth' 75;

悲しいことに、まだ canIuse はこの機能をリストしていないため、他のブラウザがそれをサポートしているかどうかはわかりません。質問:

  • どのブラウザが可変フォントをサポートしていますか?
  • これらの新しいフォントをサポートしていないデバイス、またはすべてのブラウザーと互換性があるが調整する機能がないデバイスに対して、フォールバックメソッドを使用する必要がありますか?
5
Simon Hayter

まず簡単な答えに移りましょう。可変フォントのブラウザーサポート:Firefox開発版にはある程度のサポートがあり、現在はChrome 62、Chrome Android、Safari iOS、およびSafariです。使用状況に基づいて、Chrome +モバイルおよびSafariは、Can I Useを使用する最も使用頻度の高いブラウザーの大半にヒットしました。そしてChromeが一般リリースになったので、レースに残りたい他のブラウザはそれに続きます。

ブラウザに関連するすべてのものと同様に、いくつかの異なる実装といくつかのコマンドがサポートされている場合とサポートされていない場合があります。すべてに共通する設定をサポートおよび使用する予定のリリースノートを確認することをお勧めします。

回避策:代わりにCSS属性を使用できます。それほど派手ではありませんが、ブラウザ間の互換性があり、機能します。 CSSでデフォルトを設定し、可変フォントが必要な場所でフォントを可変設定に変更できます。 2、3のブラウザーでCSSを少し試して、これが目的の外観になるかどうかを確認してください。 CSSで設定することは、ブラウザがデフォルトを使用することを許可するよりも安全だと思います-ユーザーがほとんど何でも可能です。

1
Lena Weber