鐵血字體 - Chrome和Safari瀏覽器

我用在我的網頁自定義字體使用下面的代碼：鐵血字體 - Chrome和Safari瀏覽器

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

能正常工作在所有瀏覽器在Mac上，但看着它在PC上的Chrome和Safari它看起來參差不齊。有沒有我可以使用的修復程序使它看起來都一樣？下面顯示了不同之處（左側的Mac，右側的PC - 均爲Chrome）。

enter image description here

來源

2011-11-08 Rob

@個人電腦上的font-face字體通常看起來有點狼狽，但'提示'這些字體會提高可讀性。

嘗試通過字體松鼠轉換器運行您的字體，該轉換器可以將提示作爲轉換的一部分進行處理。

http://www.fontsquirrel.com/fontface/generator

作爲一個方面說明我還只是不要使用@字體面爲黑體，僅僅依靠其安裝的字體，回落至宋體人。不是最接近的匹配，但它會給你最好的結果。

來源

2011-11-10 01:04:24 addedlovely

謝謝。我曾經使用fontsquirrel，但後來轉移到一個名爲FontXchange的軟件。這是從來沒有讓我失望到現在（我已經轉換數百種字體），所以也許我需要使用兩者的組合如果字體看起來有點舉步維艱。 – Rob

是有。使用其他類似於cufon的平滑字體。

來源

2011-11-08 13:57:40 FBwall

有沒有修復的字體面？ – Rob

Cufon在視網膜設備上看起來很模糊。 – ahren

我不確定您使用的操作系統是什麼，但您可能需要爲屏幕字體啓用ClearType。

在XP中：轉到顯示屏控制面板，並選擇外觀選項卡。從那裏，點擊效果。選擇使用以下方法平滑屏幕字體邊框複選框，然後在列表中選擇ClearType。

這已經解決了我過去的問題。

來源

2011-11-08 14:39:55 Dov

雖然這會爲我解決問題，那麼網站的成千上萬的訪問者呢？ – Rob

這是Windows和OS X如何處理字體渲染的根本區別，所以你很難做到。 Chrome的一個冒險解決方法是添加一個幾乎看不見的陰影（text-shadow: rgba(0, 0, 0, .01) 0 0 1px），這會強制它對文本進行反鋸齒。像Typekit這樣的服務正在努力解決該問題，例如serving fonts as Postscript outlines，但這並不能幫助您解決問題。

來源

2011-11-08 14:40:28

該解決方案不工作了，看到http://taitems.tumblr.com/post/7107609467/font-face-smoothing-in-windows-chrome –

你可以試試：

-webkit-transform: rotate(-0.0000000001deg);

這旋轉元素就足以讓瀏覽器渲染它抗鋸齒。不知道它對性能有什麼影響，但我沒有注意到渲染有任何不同。

發現的解決方案在這裏：https://twitter.com/#!/komejo/statuses/117241707522818048

來源

2012-03-28 13:30:40

不適用於我。 –

這隻適用於Chrome，您使用的是哪個版本？ –

19.它旋轉文本，我只是看不到antialiasing關閉。 –

看來Chrome不喜歡SVG被稱爲最後在CSS的@ font-face聲明。在你的CSS你@字體面{...}後補充一點：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
    font-family: 'HelveticaNeueBold'; 
    src: url('fonts/HelveticaNeueBold.svg') format('svg'); 
    } 
}

的@media查詢針對WebKit瀏覽器，並告訴他們僅僅利用.SVG文件。根據我的經驗，這改進了Windows Chrome上的呈現。

注意：此修復程序可能會導致另一個問題，在Chrome在Windows 7或8，這是我在一些場合遇到過：利用這個有時修復防止文字環繞在Chrome Windows版。一個很奇怪的行爲，這種行爲只發生在有時候，我還沒有找到解決辦法。關於這個問題，一個已經張貼在這裏：

Strange word length issue when using font-face in Chrome

來源

2013-04-12 14:54:35 NielsvdH

這似乎這樣的伎倆：

html { 
    -webkit-text-stroke-width: .10px; 
}

來源

2014-05-06 17:34:10 Rob

鐵血字體 - Chrome和Safari瀏覽器

回答

相關問題