iPhoneでフォントフェイスフォントの文字間隔を倍増

Question

フォントのダウンロードにfontsquirrelを使用しましたが、iPhoneで文字の間隔が2倍になりました。 fontsquirrelの設定で "kerningを削除"を有効にしようとしましたが、うまくいきません。デスクトップブラウザとモバイル間の間隔を一致させるための回避策は

@font-face { 
font-family: 'fjalla_oneregular'; 
src: url('../../core/texts/fjallaone-regular-webfont.eot'); 
src: url('../../core/texts/fjallaone-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../../core/texts/fjallaone-regular-webfont.woff2') format('woff2'), 
    url('../../core/texts/fjallaone-regular-webfont.woff') format('woff'), 
    url('../../core/texts/fjallaone-regular-webfont.ttf') format('truetype'), 
    url('../../core/texts/fjallaone-regular-webfont.svg#fjalla_oneregular') format('svg'); 
font-weight: normal; 
font-style: normal; 
-webkit-font-smoothing: antialiased; 

}

.post-header h1 { 
    font-family: "fjalla_oneregular", Impact, Helvetica Neue, Helvetica, sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: #191919; 
    letter-spacing: 0px; 
} 

ありますか？

Answer 1

解決策を見つけるのは混乱して厳しい問題になる可能性があります。 EOT URL行の前にSVG URL行を移動してみてください。 Chromeは@ font-faceキットで.svgファイルを使用しているようで、最後に呼び出されるのは嫌です。以下は、CSS使用する@ font-faceのための標準的な呼び出しです：例に見られるように

@font-face { 
    font-family: 'chunk-webfont'; 
    src: url('../../includes/fonts/chunk-webfont.eot'); 
    src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'), 
    url('../../includes/fonts/chunk-webfont.woff') format('woff'), 
    url('../../includes/fonts/chunk-webfont.ttf') format('truetype'), 
    url('../../includes/fonts/chunk-webfont.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

は、.svgのファイルが呼ばれるURLのリストで最後になります。 Webkitブラウザを対象とするコードを修正した場合は、.svgファイルのみを使用するように指示します。

@font-face { 
    font-family: 'chunk-webfont'; 
    src: url('../../includes/fonts/chunk-webfont.eot'); 
    src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'), 
    url('../../includes/fonts/chunk-webfont.woff') format('woff'), 
    url('../../includes/fonts/chunk-webfont.ttf') format('truetype'), 
    url('../../includes/fonts/chunk-webfont.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face {font-family: ‘chunk-webfont’; 
    src: url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’); 
} 

私は書体とFontSquirrelから同じコードを使用していたし、最近ではiOSの10更新した後、私のサイトのいくつかは、すべての間違ったフォントの間隔で破壊されました。

を参照 のために（そのポストのためのサム・ゴダードのビッグ感謝を！）Font Face Chrome Renderingを参照してください