CSSまたはJSでのフォント文字の置換の使用

現在、this fontを使用していくつかの代替文字グリフにアクセスしようとしています。CSSまたはJSでのフォント文字の置換の使用

フォントの文字のサブルーチンは、 "A.alt"、 "A.alt1"、 "B.alt"などのように名前が付けられているため、後に行くユニコードはありません。

私が見つけたのはthisですが、Inspect Elementを使用している場合、CSSプロパティは「不明なプロパティ名」エラーを返すだけです。これを行う他の方法？

<html> 
    <meta charset="ISO-8859-1"> 
    <title>Glyph-test</title> 
    <style> 
     h1 { 
      font-family: Baron neue; 

     } 
     h1 span.A-alt { 
      font-variant-alternates: character-variant(A.alt); 
     } 
    </style> 


    <h1>Testing alternative <span class="A-alt">A</span></h1> 
</html>

出典

2016-10-07 Carl Papworth

あなたは、FirefoxやSafariでそれをテストしましたか？現在のところ、font-variant-alternatesをサポートする唯一のブラウザであるようです：http://caniuse.com/#feat=font-variant-alternates – ausi

FirefoxとChromeを試しました –

font-variant-alternatesの代わりにfont-feature-settingsを使用してください。使用する方法に応じて、"salt"またはまたは"salt" 3（など）に設定します。

あなたのCSSのコードは次のようになります。

h1 span.A-alt { 
    font-feature-settings: "salt" 2; 
}

出典

2016-10-07 09:09:35 ausi

ダムラッド '！その仲間に感謝します。 –

これを以下のデータバリアント機能と組み合わせることは可能ですか？ –

私はそうは思わない。しかし、 'alt-1'や' alt-2'などのCSSクラスを作成し、別の文字に使うことができます。おそらく 'alt-5'以上の値を必要としません。 – ausi

-1

私にとって最良の方法は、HTML5のdata-属性を使用することです。あなたのケースでは

あなたはそうのようにそれを実装することができます：あなたはそれをしたいが、あなたはポイントが権利を取得しかし

<html> 
    <meta charset="ISO-8859-1"> 
    <title>Glyph-test</title> 
    <style> 
     h1 { 
      font-family: Baron neue; 

     } 
     h1 span.A-alt { 
      font-variant-alternates: character-variant(attr(data-variant)); 
     } 
    </style> 


    <h1>Testing alternative <span class="A-alt" data-variant="A.alt">A</span></h1> 
</html>

あなたはcharacter-variant(attr(data-variant))を実装することができます。 HTML &で渡した値は、CSSで同じ値を使用します。attr(data-name)

出典

2016-10-07 08:46:46

実際にプロパティが実際には本当にきれいです作品はそうではないようです。私の主な問題は、代わりのグリフにアクセスすることです。 –

これはあなたのキャニウスリンクが言うことです。 - "CSS値とユニットレベル3では、コンテンツ**だけでなく、文字列以外の値（数字、色など）にもCSSプロパティにattr（）**を使用する機能が追加されています。あなたはdownvotingの前にもっと慎重に自分の提案を読むことができますか？あなたのコメントを今のところFlagingしています –

@NikhilNanjappaそうです、それはキャニウスが言うことです。しかし、より詳しく見ると、1つのブラウザでその機能がサポートされているわけではありません。それが私が指摘したかったことです、あいまいさには申し訳ありません。 – ausi

CSSまたはJSでのフォント文字の置換の使用

答えて

関連する問題