web-dev-qa-db-ja.com

@ Font-faceがモバイルで機能しない

これはデスクトップとタブレットで完全に動作しますが、モバイルでは動作しません。それはコードですか、一部のフォントはモバイルでは動作しませんか？

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

この例のように、必要なすべてのsrcを@font-faceに追加する必要があります。

@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/
お役に立てば幸いです。

（これを必要とするフォントを変換する必要がある場合font-generator ）

13
Roy

必要なすべてのフォントファイルを含めていません（持っていると仮定して）。

@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 */
}

そのため、Safari/IOSなどでは* .ttfが欠落しています。

0
Dan