17

いくつかのOpenType機能をサポートするWebフォントを購入しましたが、もちろんそれらを使用したいと思います。
残念ながら、構文を使用するための最良の方法を説明するソースをオンラインで見つけることができませんでした-font-feature-settingsプレフィックス地獄の別の例であるように私には思えます。

現時点ではそのように書いていますが、これらの機能をサポートするすべてのブラウザを本当にカバーしているかどうかはわかりません。

.element {
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "case" 1;
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1";
       -moz-font-feature-settings: "kern" on, "liga" on, "case" on;
        -ms-font-feature-settings: "kern" 1, "liga" 1, "case";
         -o-font-feature-settings: "kern", "liga", "case";
            font-feature-settings: "kern", "liga", "case";
}

具体的には、-moz構文がおかしいようです。一部の情報源は、これが使用される構文であると主張しています。 

-moz-font-feature-settings: "liga=1";  /* Firefox 14 and before */
-moz-font-feature-settings: "liga" on; /* Firefox 15 */

他の人はそれを単にこのようにします： 

-moz-font-feature-settings: "cswh=1";
-moz-font-feature-settings: "cswh";

同じことが-webkit;にも当てはまります。そのように書く人もいます： 

-webkit-font-feature-settings: "liga" on, "dlig" on;

他の人がこのようにそれをしている間： 

-webkit-font-feature-settings: "liga", "dlig";

またはこのように： 

-webkit-font-feature-settings: "liga" 1, "dlig" 1;

さらに、少なくともWebkitブラウザーでは text-rendering: optimizelegibility;、と同じように見えるものもあります。"kern""liga"

では、2013年にWebでOpenTypeフォント機能を使用するための正しい防弾方法は何でしょうか。

4

2 に答える 2

12

さて、2013年のWeb機能がどのように機能するかを探すのに最適な場所は、W3CSS3仕様です。

存在する場合、値はグリフの選択に使用されるインデックスを示します。値は0以上である必要があります。値0は、機能が無効になっていることを示します。ブール機能の場合、値1で機能が有効になります。非ブール機能の場合、1以上の値は機能を有効にし、機能選択インデックスを示します。'on'の値は1と同義であり、'off'は0と同義です。値が省略された場合、値1が想定されます。

これは、、"liga" 1および"liga" onすべてligaが同じことを行うことを意味します。

BoltClockが質問に対する彼のコメントで述べたように、これ"feature=value"は有効な構文ではなく、Firefoxに固有のもののようです。

OperaとIE（<10）はまったくサポートfont-feature-settingsしていないため、-o-*and-ms-*属性はおそらく役に立たないでしょう。

全体として、現在サポートされているすべてのブラウザで機能する構文は次のようになります。

.element {
    -webkit-font-feature-settings: "kern", "liga", "case"; /* No variation */
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1"; /* Firefox 4.0 to 14.0 */
       -moz-font-feature-settings: "kern", "liga" , "case"; /* Firefox 15.0 onwards */
       -moz-font-feature-settings: "kern" 1, "liga" 1, "case" 1; /* Firefox 15.0 onwards explicitly set feature values */
            font-feature-settings: "kern", "liga", "case"; /* No variation */
}
于 2013-03-01T15:34:48.080 に答える
1

http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/は、仕様自体だけでなく、おそらく開始するのに適した場所です。

また、すべてのブラウザで機能するという意味で、フォント機能を完全に防弾する方法が得られないことにも注意してください。caniuseによると、font-featuresは一種の大ざっぱなサポートを持っています（Operaには何もありません、IE10より前には何もありません、ほとんどのモバイルブラウザには何もありません、残っているものに部分的で接頭辞が付いています）。ドラフト」ステータス。これは、変更される可能性がまだあることを意味します。したがって、この機能にまだ依存せず、すべてのブラウザで機能するわけではないことを期待することをお勧めします。

border-radius別の注意点として、「プレフィックス地獄」（実際にはそれほど悪くはありません-プレフィックスは時間の経過とともに削除されることを意味します。本当に古いブラウザのサポートに固執しない限り、プレフィックスはまったく必要ないことをご存知ですか？ ）-LESSやSassなどのCSSプリプロセッサの1つを調べたい場合があります。これらのツールは、プレフィックスと正しい構文を入力することで最先端のCSSを支援し、W3C標準に準拠した宣言でソースをクリーンに保ちます。

于 2013-03-01T15:28:00.633 に答える