iPhone上字體字體的字母間距加倍

Question

我使用fontsquirrel下載了字體，但iPhone上的字母間距加倍。我試圖在fontsquirrel設置中啓用「刪除字距」，但這不起作用。

@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-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參考 （非常感謝薩姆·戈達德該職位！）