材料圖標連字電子OSX

我想在電子應用程序中使用Google Material Icons，並在渲染圖標時遇到問題。圖標在Windows上完美呈現，但不在OSX上。使用devtools我已經看到，這兩個請求的字體'woff2'格式成功，但只有Windows似乎呈現圖標... OSX只需列出結紮文本。材料圖標連字電子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，一個操作系統字體的問題，或什麼？如果任何人可以提供任何指導，以嘗試一些事情，我會非常感謝幫助。

這裏是正在使用

@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'; 
}

來源

2016-11-03 afreeland

所以，CSS，我沒有在這個問題上是什麼100％肯定，但希望發佈一個更新，如果它可以幫助其他人。

在我的Windows版本中，我安裝了一個字體MaterialIcons-Regular.ttf ...一旦我複製它，然後卸載它，Windows應用程序停止正確渲染。

我然後複製到MaterialIcons-Regular.ttf字體文件夾在我的電子項目，然後更新我的CSS看起來像

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

現在似乎是工作...如果不知道有什麼不對的其他字體集或如果我有一些CSS安裝不正確。

來源

2016-11-07 19:26:32 afreeland

材料圖標連字電子OSX

回答

相關問題