@ Font-faceがモバイルで動作しない

Question

ここは自分のコードですが、デスクトップやタブレットではうまく動作しますが、モバイルでは動作しません。それはあなたがこの例のように顔をフォントに必要なすべてのSRCを追加する必要があるコードや一部のフォントがちょうど携帯

上では動作しません

@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などでは表示されません。