マテリアルアイコン合字電子OSX

Question

私は電子アプリでGoogleマテリアルアイコンを使用しようとしていて、アイコンのレンダリングに問題があった。アイコンはWindowsでは完全に描画されますが、OSXでは描画されません。 devtoolsを使用して私は両方のフォントを 'woff2'形式として正常に要求しているが、Windowsのみがアイコンをレンダリングしているようだ... OSXは単に合字のテキストを表示する。

のWindows（左）、OSX（右）

のWindowsでこれらの作品は、構築ではなく、OSXが...それは単に私が持っているhomeまたは

<i class="material-icons">home</i> 
<i class="material-icons">&#xE88A;</i> 

を示していますまた試しました

<i class="material-icons" id="test"></i> 
#test:after{ content: 'home' } 

クロムの問題がOSX、OSのフォントの問題、または何のために構築されているかわからない誰かが試しにいくつかのことについてのガイダンスを提供できれば、本当に助けに感謝します。ここで

だから

@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(./fonts/Material-Design-Iconic-Font.eot); /* For IE6-8 */ 
    src: local('Material Icons'), 
     local('MaterialIcons-Regular'), 
     url(./fonts/Material-Design-Iconic-Font.woff2) format('woff2'), 
     url(./fonts/Material-Design-Iconic-Font.woff) format('woff'), 
     url(./fonts/Material-Design-Iconic-Font.ttf) format('truetype'); 
} 

.material-icons { 
    font-family: 'Material Icons'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 24px; /* Preferred icon size */ 
    display: inline-block; 
    line-height: 1; 
    text-transform: none; 
    letter-spacing: normal; 
    word-wrap: normal; 
    white-space: nowrap; 
    direction: ltr; 

    /* Support for all WebKit browsers. */ 
    -webkit-font-smoothing: antialiased; 
    /* Support for Safari and Chrome. */ 
    text-rendering: optimizeLegibility; 

    /* Support for Firefox. */ 
    -moz-osx-font-smoothing: grayscale; 

    /* Support for IE. */ 
    font-feature-settings: 'liga'; 
} 

Answer 1

を使用しているCSSで、私は問題が何であるかには100％を確認していないが、それは他の誰かを助けることができれば、更新を投稿したかったです。

私のWindowsビルドでは、フォントをMaterialIcons-Regular.ttfにインストールしました。コピーしてからアンインストールすると、Windowsアプリケーションは正しくレンダリングを停止しました。

私はその後、私の電子プロジェクトでフォントフォルダにMaterialIcons-Regular.ttfをコピーして、

@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(fonts/MaterialIcons-Regular.ttf) format('truetype'); 
} 

に見えるように私のCSSを更新今では、と間違って何かがあったかどうかわからない...動作しているようです他のフォントセットや私は誤っていくつかのCSSのセットアップがある場合。