鉻攪亂與SVG格式（有時）Web字體樣式文本

演示：http://jsbin.com/onixik/2（內容如下）鉻攪亂與SVG格式（有時）Web字體樣式文本

如果您檢查在Windows上的Chrome瀏覽器的演示，它可能看起來OK也可能不會。通過「確定」我的意思是它不起眼，只是一些文字。如果不行，那麼部分文本會覆蓋其他文本;這很明顯。

如果Chrome使它看起來不錯，然後嘗試隨機調整窗口大小几次。奇怪的是，一旦它開始出錯，真的很難（也許不可能）讓瀏覽器再次正確地顯示它。（編輯 —一些人，我與鋸正常工作的問題，就像我一樣，但他們的瀏覽器隨後開始工作，像我最終沒有。也許是極少數的，你會看到它）

這裏是什麼樣子時，它的「不正常」。 enter image description here

（字體爲Signika，它是由谷歌，FontSquirrel和Adobe提供一個免費的字體，我收留了它自己的服務器上，因爲谷歌不會成爲SVG，或者如果我不知道如何製作它，因爲我沒有提供正確的CORS頭文件和火狐瀏覽器，所以你無法在Firefox中看到任何東西。）

我知道如何解決這個問題：在SVG文件之前提供WOFF文件。然而，我目前正在爲SVG文件服務，因爲我已經在各種博客（以及這裏的問題）上反覆閱讀了Chrome瀏覽器呈現SVG比WOFF更好的內容。在這種情況下，這顯然不會發生:-)有沒有人看到這一點，並找到了另一種解決方法？

的HTML：

<div style='position: relative'> 
    <div class=wf style='font-size: 135%'> 
     Hello This is a test of some formatting issues 
     <span style='margin-top: -3px; font-size: 120%'>*</span> 
     The problem is strange. 
    </div> 
    </div>

的CSS：

@font-face { 
    font-family: 'Signika'; 
    src: url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.eot#') format('embedded opentype'), 
     url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.svg') format('svg'), 
     url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.woff') format('woff'), 
     url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.ttf') format('truetype'); 
    } 

.wf { 
    font-family: "Signika"; 
    font-weight: normal; 
    padding: 2em; 
    max-width: 12em; 
}

來源

2013-02-21 Pointy

FWIW儘管反覆調整大小/縮放，我無法在PC上重現Chrome 24.0.1312.57。 – 2013-02-21 18:55:42

@TimMedora非常感謝您嘗試:-)這是一個非常奇怪的行爲;渲染器內部的東西顯然出了問題。一旦出現錯誤，即使字體是從完全不同的URL提供的，也是錯誤的！而現在，在我的平臺上，它已經固定了，我不能再讓它破碎了。幸運的是我及時得到了screencap :-) – Pointy 2013-02-21 18:58:36

我在同一條船上 - 不能重現它。 – 2013-02-21 19:00:19

鉻似乎與字體和文字的問題。我也有這個問題，只有我的文本扭曲，它是一個付費字體。不知道它爲什麼這樣做，但我最終嘗試通過谷歌字體嘗試不同的字體，並且它可以在所有4種瀏覽器上運行。

嘗試在Google字體上找到符合您需要的字體並使用它。使用起來更容易，而且您不必將所有這些不同的格式加載到服務器中，只需從標題中的標記中從Google網站中提取即可。沒有CSS需要。

來源

2013-09-20 18:04:52 JCKnoell

鉻攪亂與SVG格式（有時）Web字體樣式文本

回答

相關問題