@ Font-face不適用於手機

Question

這是我的代碼，它在桌面和平板電腦上完美地工作，但不適用於手機。是它的代碼或者做一些字體，只是無法在手機上

@font-face { 
    font-family: 'Out'; 
    src: url('http://location/Outstanding.otf'); 
} 

Answer 1

工作，你需要添加到字體的臉像這個例子中所需要的所有源：

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

來源：https://css-tricks.com/snippets/css/using-font-face/
希望它可以幫助， 歡呼聲。

（如果需要的字體轉換，你會需要的https://www.fontsquirrel.com/tools/webfont-generator）

Answer 2

您還沒有（假設你有他們）所有必要的字體文件：

@font-face { 
    font-family: 'Out'; 
    src: url('out.eot'); /* IE9 Compat Modes */ 
    src: url('out.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('out.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('out.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('out.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('out.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

所以* .TTF缺少Safari/IOS等。