解決瀏覽器不支援Webdings字型的問題

  • 315
  • 0
  • 2017-09-25

讓不支援Webdings字型的瀏覽器能夠顯示這些字型

如何用JavaScript設計音樂播放器的內容,我在課堂上設計的音樂播放器剛好有使用到Webdings字型當作功能按鍵使用。這些按鍵可以在IE和Chrome顯示,卻不能在某些瀏覽器或手持裝置顯示,因為它們並不支援Webdings字型。以Firefox為例,它並不支援此字型,所以在執行音樂播放器的時候,它的畫面如下:

如果這個音樂播放器的功能按鍵沒辦法用Webdings字型顯示,對使用者而言就是一堆沒有意義的文字,而且很難瞭解這個播放器的功能了!

解決方法

Step1:找到存在C槽內的webdings字形檔案(如果要變更檔案格式,可以到ttf-to-woffttf-to-eotttf-to-svg下載)

Step2:將檔案拖曳至CSS(<style></style>標籤內)

/*ttf格式*/ 
@font-face {
            font-family: 'webdings';
            src: url('font/webdings.ttf') format('truetype');
        }
/*woff格式*/  
@font-face {
            font-family: 'webdings';
            src: url('font/webdings.woff') format('woff');
        }
/*eot格式*/ 
@font-face {
            font-family: 'webdings';
            src: url('font/webdings.eot') format('embedded-opentype');
        }
/*svg格式*/   
@font-face {
            font-family: 'webdings';
            src: url('font/webdings.svg') format('svg');
        }

最終執行畫面(Firefox)