Chrome SVG網頁字體選擇輸入中的怪異字符

Windows 8上的Chrome 26.0.1410.64m在渲染WebFonts時出現問題。這是一個已知的問題，一個解決方案是首先提供svg版本的字體，而不是woff版本。它修復了抗鋸齒，並使字體看起來又漂亮。Chrome SVG網頁字體選擇輸入中的怪異字符

該方法的缺點是選擇輸入內元素內部的奇怪渲染。

我添加了一個jsfiddle來看看它的行動：http://jsfiddle.net/4mSpv/6/。

該CSS儘可能簡單。

@font-face { 
    font-family: 'Montserrat'; 
    src: url('https://raw.github.com/louh/website/master/fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); 
    font-weight: 400; 
    font-style: normal; 
} 
select { 
    font-family: 'Montserrat', sans-serif; 
}

我刪除了一個字體的本地安裝，並注意到其他Windows 7計算機也這樣做。任何人都知道鉻是怎麼回事？（IE，火狐，Safari所有渲染罰款）

Select input rendering font chrome

PS：其他瀏覽器的字體會不列入的jsfiddle過濾掉這個問題，每個瀏覽器都有自己的怪癖（不允許字體大小等），但呈現文字很好

來源

2013-04-16 automaticoo

請您分享一下這個錯誤報告的鏈接嗎？ – ComFreek

我剛剛創建了一個，因爲我使用chrome在更多設備上測試過，並且可以驗證問題。 https://code.google.com/p/chromium/issues/detail?id=232099&thanks=232099&ts=1366149037 – automaticoo

順便說一句，它不僅僅是Win8，與OSX Chrome相同的問題。 – Vexter

有沒有辦法解決這個問題。

這不是迴歸問題，而是從M24開始存在。

我提交了錯誤報告並Weird character rendering in option menu

來源

2013-04-28 13:19:29 automaticoo

鑑於他們給予字體渲染問題的優先級，我們很快就不會看到這個問題。爲了讓它出現在bug報告中，讓它看起來更重一些。在此之前，我會回退到我的選擇框的通用字體 – Vexter

是的，我也切換回正常的字體以及選擇框。這有點煩人，容易重現。我同意他們已經有大量的字體渲染錯誤，這可能是他們的一個邊緣案例 – automaticoo

由於automaticoo說，這是一個已知的問題與Chrome瀏覽器。但是，您可以使用本文所選答案中提到的技術來解決問題：Google Webfonts Render Choppy in Chrome on Windows。

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    select { 
    font-family: Arial; /* standard font */ 
    } 
}

通過這種方式，您可以使用任何您需要的字體瀏覽器仍然工作，並將其替換爲Chrome的通用HTML字體。

來源

2014-04-12 00:45:34 geis

所以，我實際上是在爲這個尋找答案，而我偶然發現了這個問題。我注意到這個錯誤今天仍然存在（我剛剛遇到它，這麼開心的會議......）。現在我只找到了1個解決方案，即將svg字體放在@ font-face聲明中（這也意味着包括所有其他格式）。唯一的問題是，當你進行抽樣時，嘗試修復字體渲染（以使其一切順利和東西），你實際上首先將svg。下面是一些例子來證明它

1：SVG字體最後，沒有清晰的字體，顯示選項正確

@font-face { 
font-family: 'OpenSansLight'; 
src: url('../font/OpenSans-Light-webfont.eot'); 
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/OpenSans-Light-webfont.woff') format('woff'), 
    url('../font/OpenSans-Light-webfont.ttf') format('truetype'), 
    url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); 
font-weight: normal; 
font-style: normal; }

Example 1

因此，大家可以看到，在選擇對話框中的選項顯示得很好，但字體真的不是那些crips，只是看看「註冊」（你可能會注意到這與我的第二個例子比較好）

2：SVG字體最後，清脆的字體，選擇愚蠢的選項

@font-face { 
font-family: 'OpenSansLight'; 
src: url('../font/OpenSans-Light-webfont.eot'); 
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'), 
    url('../font/OpenSans-Light-webfont.woff') format('woff'), 
    url('../font/OpenSans-Light-webfont.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; }

Example 2

現在你會看到，字體是很多較脆，但選擇是非常愚蠢的。

我建議在svg上添加另一個font-face作爲select。這將使您的字體在整個網站中保持清晰，但顯示的選項都很好。

來源

2014-08-01 05:49:22

Chrome SVG網頁字體選擇輸入中的怪異字符

回答

相關問題