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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。