Chrome 不抗鋸齒文字

問題描述

即使我新增了特定於 Google Chrome 的程式碼，Google Chrome 也不會對我的文字進行抗鋸齒。

在一個奇怪的問題上，Firefox 被認為與我所新增的程式碼不相容，但是對文字進行了適當的反駁。

這是具體的 CSS 樣式：

.jumbotron h1 {
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 1;
    /*
     * Webkit only supported by Chrome and Safari.
     */
    -webkit-font-smoothing: antialiased;
}

chrome ：

火狐：

正如你可以看到上面 (可能在網站上)，字型在 Firefox 上更好看。

最佳解決思路

注意：Chrome 37 及更高版本固定字型抗鋸齒，所以 Chrome 的最新版本不再需要修復。

我認為最好的解決方案是將您的字型轉換為 svg，如果字型檔案格式為 svg，則 Chrome 將渲染具有抗鋸齒字型的字型。

在我自己找到答案的文章中，您可以獲得更多資訊：http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

因此，基本上您必須將您的字型轉換為 svg 格式 (使用像 font squirrel 提供的字型轉換器)，並在 css 中設定媒體查詢，以便在您的字型宣告中首先指定 svg 檔案格式，而不是其他瀏覽器。

/* This is the default font face used for all browsers. */
@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;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}

和 voilà。該字型在具有抗鋸齒功能的 Chrome 中起作用。

次佳解決思路

我在這個問題上寫了一個很大的答案：Is there any 「font smoothing」 in Google Chrome? 。該帖子包含您需要知道的一切，以及如何解決此問題。這是 Google Chrome 中的官方錯誤，瀏覽器的開發人員已經瞭解了這些錯誤，正在修復。

簡而言之，您可以將其新增到文字規則中，使字型看起來更好：

text-stroke-fix：

-webkit-text-stroke: 1px

要麼

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

text-shadow-trick：

 text-shadow: #fff 0px 1px 1px;

要麼

 text-shadow: #333 0px 0px 1px; // for black text

font-smoothing-trick(與上述組合)：

-webkit-font-smoothing: antialiased;

注意：這些是解決方法，而不是基本問題的真正修復。

第三種解決思路

這是 Windows 7/8 的問題，而不是 Chrome 。 Chrome 常常渲染不好。但是他們用 build 37 修復了它。但是它仍然接受 Windows 字型渲染首選項。所以如果你像我一樣在 Windows 中關閉所有花哨的外觀設定，那麼你需要進行一個調整，以使 Chrome 再次正確渲染。

要解決此問題，您必須在 Windows 中設定清除型別的字型，並在效能選項中啟用字型平滑。

- 去開始選單。
- 搜尋「調整 ClearType 文字」。
- 啟用 ClearType 並透過嚮導選擇您的設定。 (很容易)，這樣就建立了下一步的 text-renderer 。 (如果您不設定 ClearType，下一步仍然可以工作，但 ClearType 看起來更好)
- 去開始選單
- 搜尋「調整視窗的外觀和效能」
- 這將開啟”performance Options” 螢幕。
- 轉到第一個標籤”Visual Effects”
- 如果您選擇「讓視窗選擇」或”best appearance”，那麼它是罰款。但是，如果您選擇最佳效能，系統將停用 anti-aliasing 。大多數瀏覽器 (包括 Internet Explorer) 忽略此設定。 Chrome 沒有。
- 將其重新開啟，但保留所有其他效能選項選擇”custom” 。
- 列表底部附近點選「平滑邊框的螢幕字型」旁邊的核取方塊
- 點選申請

現在關閉並重新開啟 chrome 。你會看到更好的文字。

第四種思路

根據這個部落格：http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

它將在 Chrome 37 中被修復。他是對的。我在 Chrome Canary 嘗試過，它的工作原理。

參考文獻

Chrome not antialiasing text

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。